Horizontale Listennavigationen
Nach obenTeil 1
In diesem Abschnitt wird erklärt, wie man eine einfache horizontale Listennavigation mit CSS formatiert.
Der HTML-Teil beschränkt sich auf das Notieren einer ungeordneten Liste, mit Verweisen innerhalb der Listenelemente. Der Liste gibt am besten eine Id, damit die Formatierungen sich ausschließlich nur darauf beziehen.
<ul id="navigation">
<li><a href="#">Link 01</a></li>
<li><a href="#">Link 02</a></li>
<li><a href="#">Link 03</a></li>
<li><a href="#">Link 04</a></li>
<li><a href="#">Link 05</a></li>
</ul>
Jetzt muss die Liste nur noch in eine Reihe gebracht und die Listenpunkte entfernt werden. Damit die Listenpunkte verschwinden, muss man für die ungeordnete Liste (ul) den Listentyp verändern - in diesem Fall none. Die horizontale Ausrichtung der Listenelemente erreicht man, in dem man ihnen display:inline; zuweist.
So sieht der CSS-Teil aus:
ul#navigation { list-style: none; }
ul#navigation li { display: inline; }
Hier mal ein Beispiel wie das umgesetzt aussehen könnte.
miraculix
sehr schön, navigationen als listen zu machen ist definitiv die beste lösung. lässt sich ja auch als grafik link machen!
schorsch
der einzige nachteil beim verwenden von inline ist, dass man keine höhe zuweisen kann. ich hab das menü dann komplett gefloatet. dann kann man auch buttons implementieren.
Cord
Die Höhe kann mit 'line-height' bestimmt werden.