homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

horizontal nav bar carryover problem

5+ Year Member

Msg#: 3945542 posted 2:04 pm on Jul 3, 2009 (gmt 0)

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]



10+ Year Member

Msg#: 3945542 posted 4:37 pm on Jul 6, 2009 (gmt 0)

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+ Year Member

Msg#: 3945542 posted 5:18 pm on Jul 6, 2009 (gmt 0)

that worked. thank you.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved