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;
}

Gerelateerde Snippets

Geen reacties op "Navigatie centreren door display:inline"

Reactie formulier


Demo: Navigatie centreren door display:inline:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.