html - Building a fluid horizontal navigation -


i'm trying build horizontal navigation using %'s, , cant seem figure out whats going on. have set how want it, whenever specify size or li nothing changes, , therefore, can see silver of background image.

<div id=mainwrap>   <div id=header>       <div id = title>     <img src="images/hangaquilt.png" width="483" height="78" alt="hang quilt">      </div>      <div id = cartstatus>     <p> cart empty </p>     </div>        <div id=nav>         <ul>         <li><a href="#">home</a></li>         <li><a href="#">products</a></li>         <li><a href="#">contact us</a></li>         <li><a href="#">view cart</a></li>         <li><a href="#">dealers</a></li>         </ul>      </div>  </div>   <div id=bodycontent>      <div id=sidebar>     </div>      <div id=bodytext>     </div>  </div>  <div id=slideshow> </div>  <div id=footer> </div>       </div>  

and css

body { background-color: rgb(238,225,185); }  #mainwrap {  margin: 0 auto; height: 700px; width: 75%; max-width:1024px; min-width:800px; }  #header { margin: 0 auto; margin-top: 3%; width: 100%; height: 25%; } #header img{ margin-left: 3.3%; } #title { float:left; width: 55%; } #cartstatus{ float: right; width: 45%; }  #cartstatus p{ margin-right: 7.1%; float: right; } #nav{ clear: both; width: 100%; height: 33%; font-family:"rockwell bold",trebuchet ms, arial, helvetica, sans-serif;  } #nav ul { height: 100%; list-style-type: none; text-align: center; } #nav li{ padding: 0; width: 20%; height: 100%; font-size:18px; display:inline; } #nav ul li a{ background-image: url(../images/navbg.png); width: 19%; height: 98%; color: black; text-decoration: none; } 

i've done navigation likes before, , have never had problem. it's frustrating know it's simple i'm missing.

if define element "inline", can't change it's width or height. instead of

display:inline; 

try

display:inline-block; 

here want: http://jsfiddle.net/jmtkb/


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -