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 http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
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/
