Search the Community

Hello All, I was wondering if anyone had some fluid techniques for nav bars. I want to evenly distribute each li in the nav bar and have them be fluid. Structure like the following: <nav id="nav" class="width"> <div id="slide" class="body"> <ul id="bar"> <li><a href="#">NEWS</a></li> <li><a href="#">SPORTS</a></li> <li><a href="#">OPINION</a></li> <li><a href="#">LIFESTYLES</a></li> <li><a href="#">A&E</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">ABOUT</a></li> </ul> </div> </nav> the width class is 100% and the body is 80% centered with the margin 0px auto. I need to know the padding for each li to make it fluid and evenly distributed through the ul bar. Thanks in advance!

I'm using wordpress 3.4.2, I'm trying to create a nav bar using css3 but it isn't working and I don't know where I went wrong. What I mean by it itsn't working is that the nav bar is not showing up, the links are there but there is no css3 style for the nav bar. this is my style.css /* Theme Name: Voluptuous Decadents Theme URI: //www.voluptuous_decadents.co.za Description: An awesome theme for voluptuous decadents Author: Nicole Version: 1.0 */[/size][/font][/color] body{ font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; background: #b6b6b6; color: #000000 } a:link, a:visited{ text-decoration: none; color: #000000; } a:hover{ color: #5f5f5f; } h1{ font-size: 54px; } h3{ font-size: 24px; } #wrapper{ margin: 0 auto; width: 750px; text-align: left; background: #fff; padding: 20px; } #header{ width: 750px; height: 100px; } #blog{ float: left; width: 520px; padding: 0 10px 10px 10px; } .sidebar{ float: left; width: 200px; margin: 0 0 0 10px; font-size: 14px; list-style: none; } #footer{ clear: both; text-align: center; height: 50px; background: #ccc; padding: 10px; } table#wp-calendar{ width: 100%; } /* JS disabled styles */ .no-js nav li:hover ul { display:block; } /* base nav styles */ nav { display:block; margin:0 auto 20px; border:1px solid #222; position:relative; background-color:#6a6a6a; font:16px Tahoma, Sans-serif; } nav ul { padding:0; margin:0; } nav li { position:relative; float:left; list-style-type:none; } nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } nav li a { display:block; padding:10px 20px; border-left:1px solid #999; border-right:1px solid #222; color:#eee; text-decoration:none; } nav li a:focus { outline:none; text-decoration:underline; } nav li:first-child a { border-left:none; } nav li.last a { border-right:none; } nav a span { display:block; float:right; margin-left:5px; } nav ul ul { display:none; width:100%; position:absolute; left:0; background:#6a6a6a; } nav ul ul li { float:none; } nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; } nav ul ul a:hover { background-color:#555; } /* CSS3 */ .borderradius nav { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .cssgradients nav { background-image:-moz-linear-gradient(0% 22px 90deg, #222, #999); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#999), to(#222)); } .boxshadow.rgba nav { -moz-box-shadow:2px 2px 2px rgba(0,0,0,.75); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.75); box-shadow:2px 2px 2px rgba(0,0,0,.75); } .cssgradients nav li:hover { background-image:-moz-linear-gradient(0% 100px 90deg, #999, #222); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#555)); } .borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; } .boxshadow.rgba nav ul ul { background-color:rgba(0,0,0,0.; -moz-box-shadow:2px 2px 2px rgba(0,0,0,.; -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.; box-shadow:2px 2px 2px rgba(0,0,0,.; } .rgba nav ul ul li { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); } .rgba nav ul ul a:hover { background-color:rgba(85,85,85,.9); } .borderradius.rgba nav ul ul li.last { border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; } .csstransforms ul a span { -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); } /* fallbacks */ .no-cssgradients nav, .no-js nav { padding-bottom:4px; border:none; background:url(../fallback/navBG.gif) repeat-x 0 0; } .no-borderradius nav ul, .no-js nav ul { background:url(../fallback/navRight.gif) no-repeat 100% 0; } .no-borderradius nav ul ul, .no-js nav ul ul { background:none; } .no-borderradius nav li, .no-js nav li { height:44px; } .no-cssgradients nav li:hover, .no-js nav li:hover { background:url(../fallback/navOverBG.gif) repeat-x 0 0; } .no-borderradius nav li li, .no-js nav li li { height:auto; width:98%; left:-2px; } .no-borderradius nav li:first-child, .no-js nav li:first-child { background:url(../fallback/navLeft.gif) no-repeat 0 0; } .no-borderradius nav li:first-child:hover, .no-js nav li:first-child:hover { background:url(../fallback/navOverLeft.gif) no-repeat 0 0; } .no-borderradius nav li li:first-child, .no-js nav li li:first-child { background:none; } .no-rgba nav ul ul, .no-js nav ul ul { left:1px; padding-left:2px; background:url(../fallback/subnavBG.png) no-repeat 100% 100%; } .no-rgba nav ul ul a, .no-js nav ul ul a { left:3px; } .no-rgba nav ul ul a:hover { background:url(../fallback/subOverBG.png) repeat 0 0; } .no-csstransforms ul a span { height:7px; width:12px; margin-top:8px; text-indent:-5000px; overflow:hidden; background:url(../fallback/indicator.png) no-repeat 0 0; } .no-borderradius ul ul li.last { margin-bottom:10px; } .no-cssgradients.boxshadow nav { box-shadow:none; }