CSS left and right aligning

13/06/2008, 23h01

In a navbar I want 4 images on the left and 1 image to align to the right of
the window. As the user resizes the window the right image should always be on
the right, EXCEPT when it touches the other 4 images on the left, then the
image should stop.

While I can float an image to the right, then it slides under (or over, I
forget) the left images. This is not what I want to happen. I know how I could
do it with tables, but any ideas how to do this with CSS?

13/06/2008, 23h21

Without seeing your code it's a guess, if your images are inside of a div,
set a min-width to the div to be the width of the total widths of all of the
images.

--
Regards,
Trent Pastrana
www.fourlevel.com
--------------------

"danrodney" <webforumsuser@macromedia.com> wrote in message
news:g2uqof$8or$1@forums.macromedia.com...
> In a navbar I want 4 images on the left and 1 image to align to the right
> of
> the window. As the user resizes the window the right image should always
> be on
> the right, EXCEPT when it touches the other 4 images on the left, then the
> image should stop.
>
> While I can float an image to the right, then it slides under (or over, I
> forget) the left images. This is not what I want to happen. I know how I
> could
> do it with tables, but any ideas how to do this with CSS?
>

14/06/2008, 03h02

min-width doesn't work in IE, so I need to find a cross browser compatible
method. Attached is an example of the min-width code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="header">
<img src="" alt="contact" name="contact" width="95" height="53"
id="contact">
<img src="" alt="" name="image1" width="95" height="53" id="image1">
<img src="" alt="" name="image2" width="95" height="53" id="image2">
<img src="" alt="" name="image3" width="95" height="53" id="image3">
<img src="" alt="" name="image4" width="95" height="53" id="image4"></div>
</body>
</html>

14/06/2008, 03h15

Hello,

Try this:

#header {
position:absolute;
left:0px;
top:0px;
width:100%;
height:64px;
z-index:1;
background-color: #666666;
width: expression( document.body.clientWidth < 599 ? "600px" : "100%" );
min-width: 600px;
}

Take care,
Tim

"danrodney" <webforumsuser@macromedia.com> wrote in message
news:g2v8si$m69$1@forums.macromedia.com...
> min-width doesn't work in IE, so I need to find a cross browser compatible
> method. Attached is an example of the min-width code.
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
> <title>Untitled Document</title>
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <div id="header">
> <img src="" alt="contact" name="contact" width="95" height="53"
> id="contact">
> <img src="" alt="" name="image1" width="95" height="53" id="image1">
> <img src="" alt="" name="image2" width="95" height="53" id="image2">
> <img src="" alt="" name="image3" width="95" height="53" id="image3">
> <img src="" alt="" name="image4" width="95" height="53"
> id="image4"></div>
> </body>
> </html>
>

14/06/2008, 11h53

Watch what happens when you give that element a border.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"TC2112" <nospam@nospam.com> wrote in message
news:g2v9jt$n0r$1@forums.macromedia.com...
> Hello,
>
> Try this:
>
> #header {
> position:absolute;
> left:0px;
> top:0px;
> width:100%;
> height:64px;
> z-index:1;
> background-color: #666666;
> width: expression( document.body.clientWidth < 599 ? "600px" : "100%" );
> min-width: 600px;
> }
>
>
> Take care,
> Tim
>
> "danrodney" <webforumsuser@macromedia.com> wrote in message
> news:g2v8si$m69$1@forums.macromedia.com...
>> min-width doesn't work in IE, so I need to find a cross browser
>> compatible
>> method. Attached is an example of the min-width code.
>>
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>> "http://www.w3.org/TR/html4/loose.dtd">
>> <html>
>> <head>
>> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
>> <title>Untitled Document</title>
>> <style type="text/css">
>> 
>> </style>
>> </head>
>>
>> <body>
>> <div id="header">
>> <img src="" alt="contact" name="contact" width="95" height="53"
>> id="contact">
>> <img src="" alt="" name="image1" width="95" height="53" id="image1">
>> <img src="" alt="" name="image2" width="95" height="53" id="image2">
>> <img src="" alt="" name="image3" width="95" height="53" id="image3">
>> <img src="" alt="" name="image4" width="95" height="53"
>> id="image4"></div>
>> </body>
>> </html>
>>
>
>

14/06/2008, 14h03

A horizontal scrollbar and having to scroll to see the right border when you
use a 100% width?
Like so:

body {
margin: 0px;
}
#header {
width:100%;
height:64px;
border: 1px solid #FF0000;
}
-->
</style>
</head>
<body>
<div id="header">A 100% wide div with a border</div>............

Good thing to mention for the OP.
If planning on adding a border, don't use 100% (with or without the
expression.)

#header {
width:98%;
height:64px;
background-color: #666666;
width: expression( document.body.clientWidth < 599 ? "600px" : "98%" );
min-width: 600px;
border: 2px solid #FF0000;
}

Take care,
Tim

"Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
news:g30804$o9c$1@forums.macromedia.com...
> Watch what happens when you give that element a border.
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
> ==================
>
>
> "TC2112" <nospam@nospam.com> wrote in message
> news:g2v9jt$n0r$1@forums.macromedia.com...
>> Hello,
>>
>> Try this:
>>
>> #header {
>> position:absolute;
>> left:0px;
>> top:0px;
>> width:100%;
>> height:64px;
>> z-index:1;
>> background-color: #666666;
>> width: expression( document.body.clientWidth < 599 ? "600px" : "100%" );
>> min-width: 600px;
>> }
>>
>>
>> Take care,
>> Tim
>>
>> "danrodney" <webforumsuser@macromedia.com> wrote in message
>> news:g2v8si$m69$1@forums.macromedia.com...
>>> min-width doesn't work in IE, so I need to find a cross browser
>>> compatible
>>> method. Attached is an example of the min-width code.
>>>
>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>>> "http://www.w3.org/TR/html4/loose.dtd">
>>> <html>
>>> <head>
>>> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
>>> <title>Untitled Document</title>
>>> <style type="text/css">
>>> 
>>> </style>
>>> </head>
>>>
>>> <body>
>>> <div id="header">
>>> <img src="" alt="contact" name="contact" width="95" height="53"
>>> id="contact">
>>> <img src="" alt="" name="image1" width="95" height="53" id="image1">
>>> <img src="" alt="" name="image2" width="95" height="53" id="image2">
>>> <img src="" alt="" name="image3" width="95" height="53" id="image3">
>>> <img src="" alt="" name="image4" width="95" height="53"
>>> id="image4"></div>
>>> </body>
>>> </html>
>>>
>>
>>
>

14/06/2008, 18h17

I wasn't familiar with the ie expressions, so thanks for that tip, as well as
the note about the borders. I don't need a border now, but it's a good thing to
remember.

The syntax of the expression is not much like actual javascript, so I assume
that
document.body.clientWidth < 599 ? "600px" : "100%"
would be translated roughly as:
if the element is less than 599 make it 600px, otherwise make it 100%. Weird
that they choose those characters for separators since they aren't similar to
any javascript I have written. It's also weird that the 599 doesn't have a px
and lacks quotes.

I also put this line of CSS in an IE conditional comment so the code will
validate.
Thanks for the !

14/06/2008, 18h27

That's exactly javascript, and C#, and C++, I believe.

> It's also weird that the 599 doesn't have a px
> and lacks quotes.

Not really - it's the numeric value that is returned by the
document.body.clientWidth, so I don't think either would make sense.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"danrodney" <webforumsuser@macromedia.com> wrote in message
news:g30ueo$hoq$1@forums.macromedia.com...
>I wasn't familiar with the ie expressions, so thanks for that tip, as well
>as
> the note about the borders. I don't need a border now, but it's a good
> thing to
> remember.
>
> The syntax of the expression is not much like actual javascript, so I
> assume
> that
> document.body.clientWidth < 599 ? "600px" : "100%"
> would be translated roughly as:
> if the element is less than 599 make it 600px, otherwise make it 100%.
> Weird
> that they choose those characters for separators since they aren't similar
> to
> any javascript I have written. It's also weird that the 599 doesn't have a
> px
> and lacks quotes.
>
> I also put this line of CSS in an IE conditional comment so the code will
> validate.
> Thanks for the !
>

14/06/2008, 18h45

That's right.
If the width is less than 599px, make it 600px. Otherwise, make it 100%.
By the way, the reason why it's not 600 ? "600px" is because expressions
with equal "conditional" and "target"
values may cause IE6 to lock up.

Take care,
Tim

"danrodney" <webforumsuser@macromedia.com> wrote in message
news:g30ueo$hoq$1@forums.macromedia.com...
>I wasn't familiar with the ie expressions, so thanks for that tip, as well
>as
> the note about the borders. I don't need a border now, but it's a good
> thing to
> remember.
>
> The syntax of the expression is not much like actual javascript, so I
> assume
> that
> document.body.clientWidth < 599 ? "600px" : "100%"
> would be translated roughly as:
> if the element is less than 599 make it 600px, otherwise make it 100%.
> Weird
> that they choose those characters for separators since they aren't similar
> to
> any javascript I have written. It's also weird that the 599 doesn't have a
> px
> and lacks quotes.
>
> I also put this line of CSS in an IE conditional comment so the code will
> validate.
> Thanks for the !
>

13/06/2008, 23h01	#1
danrodney Messages: n/a Hébergeur:	CSS left and right aligning In a navbar I want 4 images on the left and 1 image to align to the right of the window. As the user resizes the window the right image should always be on the right, EXCEPT when it touches the other 4 images on the left, then the image should stop. While I can float an image to the right, then it slides under (or over, I forget) the left images. This is not what I want to happen. I know how I could do it with tables, but any ideas how to do this with CSS?

13/06/2008, 23h21	#2
T. Pastrana Messages: n/a Hébergeur:	Re: CSS left and right aligning Without seeing your code it's a guess, if your images are inside of a div, set a min-width to the div to be the width of the total widths of all of the images. -- Regards, Trent Pastrana www.fourlevel.com -------------------- "danrodney" <webforumsuser@macromedia.com> wrote in message news:g2uqof$8or$1@forums.macromedia.com... > In a navbar I want 4 images on the left and 1 image to align to the right > of > the window. As the user resizes the window the right image should always > be on > the right, EXCEPT when it touches the other 4 images on the left, then the > image should stop. > > While I can float an image to the right, then it slides under (or over, I > forget) the left images. This is not what I want to happen. I know how I > could > do it with tables, but any ideas how to do this with CSS? >

14/06/2008, 03h02	#3
danrodney Messages: n/a Hébergeur:	Re: CSS left and right aligning min-width doesn't work in IE, so I need to find a cross browser compatible method. Attached is an example of the min-width code. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Untitled Document</title> <style type="text/css"> <!-- body { margin: 0px; } #header { position:absolute; left:0px; top:0px; width:100%; height:64px; z-index:1; background-color: #666666; min-width: 600px; } #header #contact { float: right; } --> </style> </head> <body> <div id="header"> <img src="" alt="contact" name="contact" width="95" height="53" id="contact"> <img src="" alt="" name="image1" width="95" height="53" id="image1"> <img src="" alt="" name="image2" width="95" height="53" id="image2"> <img src="" alt="" name="image3" width="95" height="53" id="image3"> <img src="" alt="" name="image4" width="95" height="53" id="image4"></div> </body> </html>

14/06/2008, 03h15	#4
TC2112 Messages: n/a Hébergeur:	Re: CSS left and right aligning Hello, Try this: #header { position:absolute; left:0px; top:0px; width:100%; height:64px; z-index:1; background-color: #666666; width: expression( document.body.clientWidth < 599 ? "600px" : "100%" ); min-width: 600px; } Take care, Tim "danrodney" <webforumsuser@macromedia.com> wrote in message news:g2v8si$m69$1@forums.macromedia.com... > min-width doesn't work in IE, so I need to find a cross browser compatible > method. Attached is an example of the min-width code. > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > "http://www.w3.org/TR/html4/loose.dtd"> > <html> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> > <title>Untitled Document</title> > <style type="text/css"> > <!-- > body { > margin: 0px; > } > #header { > position:absolute; > left:0px; > top:0px; > width:100%; > height:64px; > z-index:1; > background-color: #666666; > min-width: 600px; > } > #header #contact { > float: right; > } > --> > </style> > </head> > > <body> > <div id="header"> > <img src="" alt="contact" name="contact" width="95" height="53" > id="contact"> > <img src="" alt="" name="image1" width="95" height="53" id="image1"> > <img src="" alt="" name="image2" width="95" height="53" id="image2"> > <img src="" alt="" name="image3" width="95" height="53" id="image3"> > <img src="" alt="" name="image4" width="95" height="53" > id="image4"></div> > </body> > </html> >

14/06/2008, 11h53	#5
Murray ACE Messages: n/a Hébergeur:	Re: CSS left and right aligning Watch what happens when you give that element a border. -- Murray --- ICQ 71997575 Adobe Community Expert (If you MUST email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "TC2112" <nospam@nospam.com> wrote in message news:g2v9jt$n0r$1@forums.macromedia.com... > Hello, > > Try this: > > #header { > position:absolute; > left:0px; > top:0px; > width:100%; > height:64px; > z-index:1; > background-color: #666666; > width: expression( document.body.clientWidth < 599 ? "600px" : "100%" ); > min-width: 600px; > } > > > Take care, > Tim > > "danrodney" <webforumsuser@macromedia.com> wrote in message > news:g2v8si$m69$1@forums.macromedia.com... >> min-width doesn't work in IE, so I need to find a cross browser >> compatible >> method. Attached is an example of the min-width code. >> >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >> "http://www.w3.org/TR/html4/loose.dtd"> >> <html> >> <head> >> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> >> <title>Untitled Document</title> >> <style type="text/css"> >> <!-- >> body { >> margin: 0px; >> } >> #header { >> position:absolute; >> left:0px; >> top:0px; >> width:100%; >> height:64px; >> z-index:1; >> background-color: #666666; >> min-width: 600px; >> } >> #header #contact { >> float: right; >> } >> --> >> </style> >> </head> >> >> <body> >> <div id="header"> >> <img src="" alt="contact" name="contact" width="95" height="53" >> id="contact"> >> <img src="" alt="" name="image1" width="95" height="53" id="image1"> >> <img src="" alt="" name="image2" width="95" height="53" id="image2"> >> <img src="" alt="" name="image3" width="95" height="53" id="image3"> >> <img src="" alt="" name="image4" width="95" height="53" >> id="image4"></div> >> </body> >> </html> >> > >

14/06/2008, 14h03	#6
TC2112 Messages: n/a Hébergeur:	Re: CSS left and right aligning A horizontal scrollbar and having to scroll to see the right border when you use a 100% width? Like so: body { margin: 0px; } #header { width:100%; height:64px; border: 1px solid #FF0000; } --> </style> </head> <body> <div id="header">A 100% wide div with a border</div>............ Good thing to mention for the OP. If planning on adding a border, don't use 100% (with or without the expression.) #header { width:98%; height:64px; background-color: #666666; width: expression( document.body.clientWidth < 599 ? "600px" : "98%" ); min-width: 600px; border: 2px solid #FF0000; } Take care, Tim "Murray ACE" <forums@HAHAgreat-web-sights.com> wrote in message news:g30804$o9c$1@forums.macromedia.com... > Watch what happens when you give that element a border. > > -- > Murray --- ICQ 71997575 > Adobe Community Expert > (If you MUST email me, don't LAUGH when you do so!) > ================== > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources > http://www.dwfaq.com - DW FAQs, Tutorials & Resources > ================== > > > "TC2112" <nospam@nospam.com> wrote in message > news:g2v9jt$n0r$1@forums.macromedia.com... >> Hello, >> >> Try this: >> >> #header { >> position:absolute; >> left:0px; >> top:0px; >> width:100%; >> height:64px; >> z-index:1; >> background-color: #666666; >> width: expression( document.body.clientWidth < 599 ? "600px" : "100%" ); >> min-width: 600px; >> } >> >> >> Take care, >> Tim >> >> "danrodney" <webforumsuser@macromedia.com> wrote in message >> news:g2v8si$m69$1@forums.macromedia.com... >>> min-width doesn't work in IE, so I need to find a cross browser >>> compatible >>> method. Attached is an example of the min-width code. >>> >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >>> "http://www.w3.org/TR/html4/loose.dtd"> >>> <html> >>> <head> >>> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> >>> <title>Untitled Document</title> >>> <style type="text/css"> >>> <!-- >>> body { >>> margin: 0px; >>> } >>> #header { >>> position:absolute; >>> left:0px; >>> top:0px; >>> width:100%; >>> height:64px; >>> z-index:1; >>> background-color: #666666; >>> min-width: 600px; >>> } >>> #header #contact { >>> float: right; >>> } >>> --> >>> </style> >>> </head> >>> >>> <body> >>> <div id="header"> >>> <img src="" alt="contact" name="contact" width="95" height="53" >>> id="contact"> >>> <img src="" alt="" name="image1" width="95" height="53" id="image1"> >>> <img src="" alt="" name="image2" width="95" height="53" id="image2"> >>> <img src="" alt="" name="image3" width="95" height="53" id="image3"> >>> <img src="" alt="" name="image4" width="95" height="53" >>> id="image4"></div> >>> </body> >>> </html> >>> >> >> >

14/06/2008, 18h17	#7
danrodney Messages: n/a Hébergeur:	Re: CSS left and right aligning I wasn't familiar with the ie expressions, so thanks for that tip, as well as the note about the borders. I don't need a border now, but it's a good thing to remember. The syntax of the expression is not much like actual javascript, so I assume that document.body.clientWidth < 599 ? "600px" : "100%" would be translated roughly as: if the element is less than 599 make it 600px, otherwise make it 100%. Weird that they choose those characters for separators since they aren't similar to any javascript I have written. It's also weird that the 599 doesn't have a px and lacks quotes. I also put this line of CSS in an IE conditional comment so the code will validate. Thanks for the !

14/06/2008, 18h27	#8
Murray ACE Messages: n/a Hébergeur:	Re: CSS left and right aligning That's exactly javascript, and C#, and C++, I believe. > It's also weird that the 599 doesn't have a px > and lacks quotes. Not really - it's the numeric value that is returned by the document.body.clientWidth, so I don't think either would make sense. -- Murray --- ICQ 71997575 Adobe Community Expert (If you MUST email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "danrodney" <webforumsuser@macromedia.com> wrote in message news:g30ueo$hoq$1@forums.macromedia.com... >I wasn't familiar with the ie expressions, so thanks for that tip, as well >as > the note about the borders. I don't need a border now, but it's a good > thing to > remember. > > The syntax of the expression is not much like actual javascript, so I > assume > that > document.body.clientWidth < 599 ? "600px" : "100%" > would be translated roughly as: > if the element is less than 599 make it 600px, otherwise make it 100%. > Weird > that they choose those characters for separators since they aren't similar > to > any javascript I have written. It's also weird that the 599 doesn't have a > px > and lacks quotes. > > I also put this line of CSS in an IE conditional comment so the code will > validate. > Thanks for the ! >

14/06/2008, 18h45	#9
TC2112 Messages: n/a Hébergeur:	Re: CSS left and right aligning That's right. If the width is less than 599px, make it 600px. Otherwise, make it 100%. By the way, the reason why it's not 600 ? "600px" is because expressions with equal "conditional" and "target" values may cause IE6 to lock up. Take care, Tim "danrodney" <webforumsuser@macromedia.com> wrote in message news:g30ueo$hoq$1@forums.macromedia.com... >I wasn't familiar with the ie expressions, so thanks for that tip, as well >as > the note about the borders. I don't need a border now, but it's a good > thing to > remember. > > The syntax of the expression is not much like actual javascript, so I > assume > that > document.body.clientWidth < 599 ? "600px" : "100%" > would be translated roughly as: > if the element is less than 599 make it 600px, otherwise make it 100%. > Weird > that they choose those characters for separators since they aren't similar > to > any javascript I have written. It's also weird that the 599 doesn't have a > px > and lacks quotes. > > I also put this line of CSS in an IE conditional comment so the code will > validate. > Thanks for the ! >

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email