Horizontale Listennavigationen
Nach obenTeil 2
In diesem Tutorial wird die Navigation ein bißchen komplexer werden als im ersten Beispiel.
Aufgabenstellung:
- 5 Menuepunkte
- Navigationsbreite: 500px; -höhe: 26px
- Horizontale Anordnung
- Schaltbare Flächen, nicht nur Textlinks
- Text sollte vertikal und horizontal zentriert sein
- Endergebnis
- Beispiel
Zu 01: Wir benutzen einfach das Markup aus dem vorherigen Teil:
<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>
Zu 02: Jetzt kommt CSS zum Einsatz:
Zur Festlegung der Breite und Höhe formatieren wir die ungeordnete Liste des Navigationscontainers.
Anschließend werden die Standardaussen- und innenabstände für die Liste und deren Listenelemete entfernt, genauso wie der Listentyp.
ul#navigation
{
width: 500px;
height: 26px;
margin: 0;
padding: 0;
list-style: none;
}
ul#navigation li
{
margin: 0;
padding: 0;
}
Zu 03: Für die Horizontale Ausrichtung sorgt diesmal nicht display:inline;, sondern float:left;, da wir display für andere Zwecke benutzen wollen.
ul#navigation li
{
float: left;
}
Zu 04: Damit der Link nicht nur auf dem Text, sondern auch auf einer festgelegten Fläche wirksam ist, definiert man für die Pseudoelemente eine feste Höhe und Breite.
Das entscheidende ist jedoch display:block;. Damit werden die Links von Inline-Element zum Blockelement umgewandelt. Zur Veranschaulichung habe ich noch einen Hintergrund eingefügt.
ul#navigation li a
{
display: block;
height: 22px;
width:100px; /* Gesamtbreite: 5 x 100px = 500px */
background: #990000;
}
Zu 05: Zunächst wird der Text horizontal zentriert. Dies ist mit dem altbekannten text-align:center; für die Pseudoelemete zu erreichen:
ul#navigation li a
{
display: block; /* wichtig */
height: 26px;
width: 100px;
background: #990000;
text-align: center;
}
Für die vertikale Zentierung verwendet man den Innenabstand padding - und zwar von oben. Damit wird der Text in Richtung Mitte geschoben. Ich habe es mal mit 4px probiert.
Damit sich aber jetzt nicht insgesamt die Schaltfläche vergrößert, da man padding in die Größenberechung miteinbeziehen muss, zieht man das, was man an Innenabstand oben zur Boxenhöhe dazu gibt, bei der Höhe des Links wieder ab.
ul#navigation li a
{
display: block;
height:22px; /* Gesamthöhe: 26px - 4px = 22px */
padding-top: 4px;
width: 100px;
background: #990000;
text-align: center;
}
Zu 06: Zu Illustration habe ich noch einige Texformatierungen hinzugefügt und ein Hoverelement definiert. Der komplette Code sieht nun so aus:
ul#navigation
{
width: 500px;
height: 26px;
margin: 0;
padding: 0;
list-style: none;
}
ul#navigation li
{
margin: 0;
padding: 0;
text-align: center;
float: left;
}
ul#navigation li a
{
display: block;
height: 22px;
width: 100px;
padding-top: 4px;
background: #990000;
text-decoration: none;
color: #eaeaea;
}
ul#navigation li a:hover
{
background-color: #CC0000;
}
Zu 07: Hier das Beispiel wie das umgesetzt aussieht.
Cocoa
Leute ihr macht hier echt ne prima Arbeit. Ihr erklärt alles super und verständlich. Freue mich schon auf meine neue Seite, die mit euren Tipps einfach nur gut wird. Dankeschön...
thxthx
Ich glaub ich muss mich hier mal gut einlesen :-), weil die Tips und Infos hier sind einfach super. Würde mich freuen, wenn ihr den Bereich CSS-Layouts bald fertigstellt.
cu thxthx
W3Profiler
Ich bin gerad dabei, unsere Firmensite auf die nächste styleversion zu bringen. da kann ich solche tipps wie auf dieser seite gut gebrauchen!
bigman
moin ihr, ich kann nur sagen, dass ist das was ich suche !!! perfekt! dickes lob!
prine
Wirklich gut und verständlich erklärt. Danke!
Jonas
Macht weiter so die Seite ist sehr lehrreich!
white57
kleiner tipp: eine vertikale zentrierung kann man einfacher und universeller dadurch erreichen, dass man line-height genauso groß setzt wie die gesamthöhe des Elements. Also in dem Beispiel:
ul#navigation li a
{
display:block;
height:22px; /* Gesamthöhe: 26px - 4px = 22px */
line-height:26px;
width:100px;
background:#990000;
text-align:center;
}
Felix
Vielen Dank für die schöne **ausfühliche** Beschreibung! Endlich wurden meine vielen Fragen zur horizontalen Anordnung der Navigation geklährt . Vielen Dank nachmals :) Mfg Felix