cpugeek Posted November 30, 2009 Share Posted November 30, 2009 I'm currently building a new site, and my current obstacle is the navigation bar. I'm trying to get it to be 100% and all of the links (list items) to be fluid even lengths, but I'm not sure how to edit my current css to do so.A working example of my bar is here: http://studios.picsbypros.com/x/Any and All help is appreciated! [:The Css: #menu{ margin:0 auto; width:100%; } #menu ul{ list-style:none; } #menu li{ list-style:none; display:block; float:left; background:#f4f4ec; border-bottom:4px solid #7400cf; } #menu li a{ display:block; float:left; color:#000000; text-transform:uppercase; font-size:11px; font-weight:bold; line-height:35px; border:solid #e1e1d3; border-width:1px 1px 0 1px; text-decoration:none; padding:0 25px; } #menu li a:hover{ color:#7400CF; } #menu li a.current{ display:block; float:left; background:url(../images/menu_002_h.jpg) repeat-x; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; line-height:35px; border:solid #e1e1d3; border-width:1px 1px 0 0; text-decoration:none; padding:0 25px; } #menu li a:hover.current{ color:#fff; } The Html: <div id="menu"> <ul> <li><a href="#" class="current">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">services</a></li> <li><a href="#">solutions</a></li> <li><a href="#">contact us</a></li> </ul></div> Link to comment Share on other sites More sharing options...
jlhaslip Posted November 30, 2009 Share Posted November 30, 2009 I'm thinking that you might need a width on the containing div before the percentages take effect as you need them to.check the top line of this link : http://www.jlhaslip.trap17.com/sm/5wide/5wide.html Link to comment Share on other sites More sharing options...
cpugeek Posted November 30, 2009 Author Share Posted November 30, 2009 I tried this and no change, does anybody know? Thank you for trying [: Link to comment Share on other sites More sharing options...
roundcorners Posted November 30, 2009 Share Posted November 30, 2009 if you want the lit items to be the same length and fluid, assign a width to them in em'sie. li {width:7em;} Link to comment Share on other sites More sharing options...
cpugeek Posted December 1, 2009 Author Share Posted December 1, 2009 Idk, what to do, I've tried both suggestions and still no difference. Link to comment Share on other sites More sharing options...
jlhaslip Posted December 1, 2009 Share Posted December 1, 2009 Best source for Menu bars that I have found on the web is http://cssplay.co.ukThere are tons of stuff over there. Link to comment Share on other sites More sharing options...
cpugeek Posted December 1, 2009 Author Share Posted December 1, 2009 Thank you jlhaslip,I found a menu that suits my needs, and after a few small changes to add a link on the right side, there appears to be a small circle on the upper left hand corner. Does anybody know how to get rid of this?Any and All help is appreciated. [: Link to comment Share on other sites More sharing options...
cpugeek Posted December 1, 2009 Author Share Posted December 1, 2009 Nevermind, I realized that I just needed to add "list-style: none;" to the css. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.