On 17/02/2011 9:08 AM, James Sheffer wrote:
On Feb 16, 2011, at 3:11 PM, Alan Gresley wrote:
[snip]
Ok, now that we have the img floating, we will un-float the #nav2
which now behave as a block in normal flow.
#nav2 {
/* float: left; DELETE */
list-style: none;
font-size: 12px;
background-image:url(http://new.thetoyz.com/graphics/nav_blue.jpg);
background-repeat: repeat-x;
color: #CCCCCC;
font-weight: bold;
background-position: left 32px;
margin:0; /* removing this causes both the img and nav2 to move down
10px ??? */
overflow:hidden; /* Add to contain the floats */
}
#header img {
float: left;
}
#nav2 li {
float: left;
margin-top: 32px;
}
Since the div#nav2 is in normal flow, it will now expand to the
full width of the viewport. This doesn't stop the list items
dropping when you narrow the viewport enough but it's one step
closer. There are way to stop this but it's time for my sleep.
Alan-
Thank you so much!
That lined up the nav as I was wanting!
As for the nav wrapping, I noticed that the entire nav wraps, not
just one part of it. I can see that this is because it is all in a
list.
It would happen to any set of sibling elements that are floated.
I'll do some homework to see what can be done for this before
asking here on the list but if someone can point me in the right
direction that would be great. I'm thinking that either I need to
get it out of a list, or better yet there is a way to prevent the
entire list from wrapping. I'm going to go with the later so If I'm
wrong someone please stop me :-)
James
The later is the best option. I do not know if the original site and
format had a width declared. This is the common way to somewhat prevent
float dropping. If the layout is fluid then it never happens if zooming
in. My own site and menu just grows with zooming.
<http://css-class.com/test/>
It can tolerate a user text size setting of 26px without any wrapping.
It can tolerate a text size siting of 40px without any wrapping on my
widescreen. My container has this.
min-width:760px;
max-width:1300px;
Now next stage in learning. We will remove the image from the HTML an
use it as a background-image and float the list again and also add some
min-width.
Major parts of the CSS.
#nav2 {
float: left;
margin: 0; /* zero out default margin */
margin-left: 32%; /* see width below, keep it after the margin: 0 above
*/
width: 68%; /* see margin above */
background :url(http://new.thetoyz.com/graphics/nav_blue.jpg) left 32px
repeat-x;
}
#website {
min-width:1000px;
max-width:1600px;
}
And a test.
<http://css-class.com/x/laaso.htm>
Trying resizing the viewport now. A screenshot showing the rendering
with a user font-size setting of 20px.
<http://css-class.com/x/laaso.png>
Working in FF4b, IE9 RC, IE7 mode in IE9 RC, Opera 11 and Safari 5. Not
game to look in IE6 yet.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
