Waagerechte Navigation CSS
Ich hab schon viele Arten von Navigationen gesehen – doch die Waagrechte Navigation (Horizontale Navigation) ist sicher ein Fixer Bestandteil fast jeder Seite! Darum hab ich diese mal ein wenig angeschaut! Hier meine Erfahrungen dazu und wie ich diese meist einbaue! Zuerst mal die Struktur in HTML:
<div id=”navinnen”>
<ul>
<li><a href=”#”>Navigation 1</a></li>
<li><a href=”#”>Navigation 2</a></li>
<li><a href=”#”>Navigation 3</a></li>
<li><a href=”#”>Navigation 4</a></li>
</ul>
</div>
Im CSS Bereich kommt dieser Block hinein!
#navinnen {
float:left;
width:930px;
margin-left:10px;
margin-top:10px;
}
#navinnen ul {
list-style:none;
}
#navinnen ul li {
float:left;
width:auto;
}
#navinnen ul li a {
display:block;
padding:0px 10px;
text-decoration:none;
color:#333;
font-size:14px;
line-height:24px;
border-right:1px #333 solid;
text-transform:uppercase;
}
Jetzt kann man sich da noch etwas spielen mit last-child – first-child das ich auch schon kurz angesprochen habe – und bitte auch die Kommentare dazu lesen! Leider kommt der IE6 da nicht damit zurecht!
Danke das Sie diesen Artikel gelesen haben. Sie können nun eine Nachricht hinterlassen oder bestellen den RSS Feed.
Comments
No comments yet.
Leave a comment