homepage Welcome to WebmasterWorld Guest from 54.166.122.86
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 Floated Menu - Prevent Wrapping
bearcatnat



 
Msg#: 4192103 posted 6:16 pm on Aug 25, 2010 (gmt 0)

Hi, This is my first post here. I'm working on adding a horizontal navigation menu to the top of my company's website. I've got it working pretty well the way I want, but I'm having issues with the links wrapping. They will wrap if the browser window or screen resolution is too small, and they also seem to wrap in some browsers.

I have two images placed in their own divs on the left of the page (basically a title and address header). The horizontal menu is floated to the right of these. It is supposed to fill to the right edge of the browser (works on most, but not all browsers).

If anyone can take a look and help me fix the wrapping problem and how to stretch the menu to the right in all browsers, I'd really appreciate it!

Relavant HTML:
<div id="header">
<div class="fltlft">
<img class="hdrimg" src="images/page-elements/wdi-banner.gif" width="649" height="96" alt="World Digital Imaging" />
<div id="hdrbar">
<ul>
<li>1138 Richfield Center, Beavercreek, OH 45430</li>
<li>ph: 937-431-1982</li>
<li><a class="linkplain" href="mailto:orderentry&#64;wdi-whq&#46;com">ordereentry&#64;wdi&#46;whq.com</a></li>
</ul>
</div>
</div>
<div id="menumain">
<div id="menumain-wrap">
<ul>
<li id="home"><a href="index.html">HOME</a></li>
<li id="about"><a href="pages/about/about-us.html">ABOUT US</a>
<ul id="about-sub">
<li><a href="../pages/testimonials.html">Testimonials</a></li>
<li><a href="../pages/about/people.html">Our People</a></li>
<li><a href="../pages/about/facilities.html">Our Facilities</a></li>
<li><a href="../pages/about/pricing.html">Our Pricing</a></li>
</ul>
</li>
<li id="order"><a href="pages/order.html">ORDER</a>
<ul>
<li><a href="pages/quickorder.html">Quick Order</a></li>
<li><a href="pages/order.html">Advanced Order</a></li>
<li><a href="pages/order-wideformat.html">Wide-Format Order</a></li>
</ul>
</li>
<li id="contact"><a href="pages/contact.html">CONTACT US</a></li>
</ul>
</div>
</div>
<p class="hdrtext">Place an order quickly with <a href="pages/quickorder.html">QUICK ORDER!</a></p>
<p class="clrflt"></p>

Relevant CSS:
body {
background:#036 url(http://www.wdi-whq.com/images/page-elements/body-bg.jpg) no-repeat;
background-attachment:fixed;
color:#FFF;
font:100% Verdana, Helvetica, Tahoma, Arial;
margin:0;
padding:0;
}

#container {
position:relative;
text-align:left;
width:100%;
z-index:0;
}

#header {
padding:10px 0 0 0;
}

#hdrbar {
background:url(../images/page-elements/aqua-bar.gif) no-repeat;
font-size:11px;
height:34px;
padding-left:20px;
z-index:2;
}

#hdrbar ul {
display:inline;
list-style:disc;
}

#hdrbar li {
color:#CFF;
float:left;
margin-left:20px;
padding-top:8px;
}

.hdrimg {
position:relative;
z-index:2;
}

.hdrtext {
color:#FFF;
position:relative;
}

#hdrbar a {
color:#cff;
text-decoration:none;
}

#hdrbar a:hover {
color:#0f0;
}

#hdrbar a:active {
color:#3c0;
}


/* 3. NAVIGATION code */

/* a. menumain */
#menumain {
background:#093 url(../images/page-elements/menu/horizontal/mainmenu-bg.gif) repeat-x;
font-size:14px;
height:35px;
margin:0;
padding:0;
position:relative;
z-index:1;
}

#menumain li {
float:left;
list-style:none;
text-align:center;
white-space:nowrap;
width:11em;
}

/* top level menu links */
#menumain li a {
color:#FFF;
display:block;
font:bold Verdana, Arial, sans-serif;
padding:8px 0;
text-decoration:none;
}

/*top menu style on mouse over */
#menumain li a:hover {
background:#6C6;
}

/* submenu */
#menumain li ul {
background-color:#6C6;
display:none;
}

#menumain li:hover ul{
display:block;
padding:0;
position:absolute;
}

#menumain li:hover li {
float:none;
}

/* dropmenu style */
#menumain li:hover li,
#menumain li:hover a{
background:#6C6;
}

/* dropmenu style on mouse over */
#menumain li li a:hover {
background:#9F9;
}

#menumain li li a:active {
background-color:#3F6;
color:#6C6;
}

 

Shado



 
Msg#: 4192103 posted 7:10 pm on Aug 30, 2010 (gmt 0)

Don't know if you got sorted with your problem but if not here goes.

Set your menu container to width:100% - that should stretch it across the page.

To prevent the text wrapping you could give each tab the width needed for the longest of your list items or you can shrink the text to fit the tab but that will look unpleasant to the eye.

You shouldn't use the white-space attribute for list items. The white-space attribute allows you to prevent text from wrapping until you place a break <br /> into your text. It's best used for paragraphs of text.

Hope it helps.

Hoople

10+ Year Member



 
Msg#: 4192103 posted 11:37 pm on Aug 30, 2010 (gmt 0)

Missing closing </div> for <div id="header">

.fltlft is not defined. You meant .fltlft {float:left;}

#menumain height is set to 35. When wrapped it needs to be 70.

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