10 Aug, 2009
Navigatie centreren door display:inline
Categoriën: centreren |crossbrowser |links |menu |template |valid |W3C |Xhtml Strict
Een navigatie centreren als je float gebruikt heeft het nadeel dat je een container element moet hebben en de exacte afmetingen moet weten om het te centreren, door display:inline te gebruiken vereenvoudig je dit door geen specifieke afmetingen nodig te hebben en text-align:center doet het werk voor jouw, om het even hoeveel navigatie-items je hebt.
HTML
<ul id="minitabs">
<li><a href="#">home</a></li>
<li><a id="current" href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
CSS
body{
padding-top: 60px;
background: #FFF;
font: 76% Arial,sans-serif;
}
ul#minitabs{
list-style: none;
margin: 0;
padding: 7px 0;
border-bottom: 1px solid #CCC;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
ul#minitabs li{
display: inline;
margin: 0 2px;
}
ul#minitabs a{
text-decoration: none;
padding: 0 0 3px;
border-bottom: 4px solid #FFF;
color: #999;
}
ul#minitabs a#current{
border-color: #F60;
color: #06F;
}
ul#minitabs a:hover{
border-color: #F60;
color: #666;
}