Der "Alte Weg"
In der "alten" Art und Weise, bevor CSS begann sich auf breiter Front durchzusetzen bestanden die meisten Navigationen aus Tabellen. Die Navigation von Style-Sheets.de könnte in etwa so ausgesehen haben (man denke sich Farben und Schriftarten dazu, die wurden im Beispiel der Einfachheit halber weggelassen):
| Home | Über die Site | CSS-Guide | Alte Doku |
Der passende Code dazu sieht so aus:
<table cellpadding="2" cellspacing="2"
border="1"
width="100%">
<tbody>
<tr>
<td width="20%">Home</td>
<td width="20%">Über die
Site</td>
<td
width="20%">CSS-Guide</td>
<td width="20%">Alte
Doku</td>
<td
width="20%"> </td>
</tr>
</tbody>
</table>
Strukturelle Überlegungen
Wenn man jedoch darüber nachdenkt, ist eine Navigation in Wirklichkeit keine Tabelle. Die Form einer ein-zeiligen Tabelle mit 5 Zellen wurde lediglich gewählt, weil ihr Aussehen dem Wunschergebnis eines horizontalen Navigations-Balkens nahekommt.
Eigentlich ist eine Navigation doch nichts anderes als eine Liste von Links, oder? Eine Liste, aus der der Besucher den Link auswählt, den er besuchen will. Folglich müsste der HTML-Code für unsere Navigation folgendermaßen aussehen...
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Über die
Site</a></li>
<li><a href="#">CSS-Guide</a></li>
<li><a href="#">Alte-Doku</a></li>
</ul>
... was dann folgende, für unseren Wunsch nach einer gut designedten Navigationsleiste unpassende, Darstellung zur Folge hätte:
CSS kommt ins Spiel
Mit CSS jedoch kann man das Aussehen jeglicher HTML-Elemente in sehr großem Ausmaß beeinflussen. So können wir uns unsere gepunktete Liste sehr einfach in einen horizontalen Balken verwandeln. Wichtig dafür ist die CSS-Eigenschaft display:, die festlegt wie ein HTML-Element im Browser dargestellt wird. Sagen wir dem Browser etwa mittels Stylesheet, dass er ein einen Listenpunkt unserer Navigationsliste nicht mehr als Listenpunkt (display: list-item) behandeln soll, sondern als normalen Inhalt (display: inline), verändert sich das komplette Aussehen der Liste. Damit sich diese Änderung nicht auf alle Listen auswirkt, sondern nur auf die Navigation, vergeben wir ihr eine eindeutige ID.
Der HTML Code ist nun wie folgt:
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Über die
Site</a></li>
<li><a href="#">CSS-Guide</a></li>
<li><a href="#">Alte-Doku</a></li>
</ul>
Dazu folgendes CSS in unserem Stylesheet:
ul#navigation li { /* Selektor für einen Listenpunkt in unserer Navigationsliste */
display: inline;
}Das Ergebnis sieht nun aus wie folgt:
Und das ist immernoch dieselbe Liste wie oben!
Feintuning
Damit das ganze etwas ansehlicher wird, fügen wir noch Abstände und Farben zu den Links hinzu. Dazu muss lediglich das CSS verwendet werden, dass dann wie folgt lautet:
ul#navigation li { /* Selektor für einen Listenpunkt in unserer Navigationsliste */
display: inline; /* Listenpunkt als normalen Inhalt darstellen lassen */
margin: 0 5px; /* Ein wenig horizontaler Abstand */
padding: 2px; /* Platz um die Links */
background: #5c9734; /* Eine Hintergrundfarbe */
}Das Ergebnis ist nun endlich eine einigermaßen ordentliche Navigationsleiste, nur mit sinnvollem HTML-Code im Hintergrund.
Der Hauptvorteil dieser Methode ist jedoch die unerreichte Flexibilität. Man kann diese Liste beliebig stylen, lediglich Änderungen am Stylesheet sind nötig, der HTML-Code kann unangetastet bleiben. Mit Tabellen ist so etwas unmöglich.
Wie geht's weiter?
Dieser Beitrag soll aufzeigen wie machtvoll CSS bei der "Umwandlung" der Präsentation von HTML sein kann. Das vorliegende Beispiel taugt schon zum Einsatz in eigenen Webseiten, der CSS-Code (und natürlich die Link-Texte und -Ziele im HTML-Code) müssten dann natürlich noch entsprechend angepasst werden.
Ein in Bälde folgender Artikel wird auf diesem Beispiel aufbauen und Schritt für Schritt zeigen wie man eine grafisch Aufwendige Navigation wie diejenige von Style-Sheets.de mit demselben HTML-Code und ein wenig zusätzlichem CSS herstellen kann.