On Feb 16, 2011, at 3:11 PM, Alan Gresley wrote: > On 17/02/2011 6:06 AM, James Sheffer wrote: > >> Sorry that was a typo - there is no nav 3. >> >> I changed my stylesheet and removed the img from the list, adding it >> in the header div. This was along my thought pattern of removing it >> from the list but I wasn't sure what to do with it! >> >> I'm still doing something wrong. The nav bar lines up "under" the >> image now, not the the right of the image. When I remove the "width: >> 100%" from nav2, the nav aligns to the right (makes sense). I also >> removed the border styles. I cannot get it to align with the blue >> bar, however. I tried playing with "margin-top: 32px;" thinking it >> would move the nav up or down from the top, but it shrinks/expands >> the bar rather than moving it. >> >> Right now the nav bar is about 10px(?) too low... > > > I don't know where that 10px is coming from > > > >> Here's the page with the new settings: >> >> http://new.thetoyz.com/index2.lasso >> >> >> ALSO: The nav bar does not stretch with the browser and if the >> browser is too small the nav jumps below the image... > > > 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. 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 ______________________________________________________________________ css-discuss [[email protected]] 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/
