Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

horizontal nav bar carryover problem



2:04 pm on Jul 3, 2009 (gmt 0)

5+ Year Member

when i shrink the width of my page (<snip>), the top nav bar buttons to the far right get bumped down below the nav bar. what am i missing to set the width so becomes fixed? thanks!

<div id="nav_bar"><a href="../index1.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../pics/home.jpg',1)"><img src="../pics/home_up.jpg" name="Image2" width="73" height="30" border="0" id="Image2" /></a><a href="../security.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../pics/security.jpg',1)"><img src="../pics/security_up.jpg" name="Image3" width="102" height="30" border="0" id="Image3" /></a><a href="../investigations.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../pics/investigations.jpg',1)"><img src="../pics/investigations_up.jpg" name="Image4" width="167" height="30" border="0" id="Image4" /></a><a href="../surveillance.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../pics/surveillance.jpg',1)"><img src="../pics/surveillance_up.jpg" name="Image5" width="147" height="30" border="0" id="Image5" /></a><a href="../management.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../pics/management.jpg',1)"><img src="../pics/management_up.jpg" name="Image6" width="216" height="30" border="0" id="Image6" /></a><a href="../links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../pics/links.jpg',1)"><img src="../pics/links_up.jpg" name="Image7" width="75" height="30" border="0" id="Image7" /></a><a href="../contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../pics/contact.jpg',1)"><img src="../pics/contact_up.jpg" name="Image8" width="120" height="30" border="0" id="Image8" /></a></div>

#nav_bar {
width: 100%;
background-position: left top;
height: 30px;
text-align: center;
margin: 0px 0px 20px;
padding: 0px;
float: left;
background-repeat: repeat-x;
background-image: url(pics/nav_slice.jpg);
clear: both;

[edited by: swa66 at 5:46 pm (utc) on July 6, 2009]
[edit reason] No personal URLs allowed please see ToS and forum charter [/edit]


4:37 pm on Jul 6, 2009 (gmt 0)

10+ Year Member

Just at a glance you might want to set the #nav_bar width to what ever pixels the rest of the body content is set i.e. 780px this should prevent them from moving down a level (being wrapped) as having 100% width (if im not mistaken) will mean that it will be 100% of the parent container.


5:18 pm on Jul 6, 2009 (gmt 0)

5+ Year Member

that worked. thank you.

Featured Threads

Hot Threads This Week

Hot Threads This Month