Bilder statt Texte im Menü:
Buttons

Grundsätzlich gibt es 2 Wege, ein Bild statt Text ins Menü zu bekommen: Klassisch mit <img>-Tag oder per CSS als Hintergrundbild. Letzte Methode hat den Vorteil, dass ein fehlendes Bild kein Malheur ist – weil es nicht als solches angezeigt wird. Außerdem können Bilder ohne Frickelei im Code viel eleganter im CSS definiert werden.
Und nicht zuletzt: Ein Hover/Aktiv-Effekt kann ohne Javascript bewerkstelligt werden. Nicht dass ich etwas gegen Javascript hätte, aber der Code wird sehr aufgeblasen durch die unsäglichen Pfadangaben, die dazu nötig sind.

Hover / Active Buttons:

Da der IE ohne Tricks nur bei Links einen Mouseover erkennt, wurden die verschiedenen Zustände der Buttons als Hintergrundbild in einem <a>-Bereich angelegt. Darüber befindet sich eine weitere Fläche, in der das Icon ist. Beide Bilder sind transparente Gifs. Das ganze steckt in einer Tabelle, um diese waghalsige Konstruktion stabil zu halten.

Wie die Icons auf die Buttons kommen

Die Icons auf den Buttons sind lediglich weiß/transparente Pixelbilder, die für jederman leicht zu machen sind.
Die Zuordnung erfolgt über die Page_ID der Ziel-Seite. Um diese leichter herauszufinden, wird sie für angemeldete Besucher sichtbar im Footer der Seite ausgegeben.
Ist die Zielseite also die mit der Page_ID 2 und auf dem Button dazu soll das Symbol "thumbup" sein, wird in der Datei "buttons.css" einfach folgende Zeile angegeben:

.linkto2 {background-image: url(buttons/thumbup.gif);}

Weiters kann in der selben Datei noch für jede Seite angegeben werden, wie sich das Submenü verhält; etwa welchen Abstand es von links haben soll:

#submenu_id2 {margin-left:180px;}

Dabei gilt folgende Regel: Bei Unterseiten der 1. Ebene wird nicht die Page_ID dieser Seite verwendet, sondern die Page_ID der übergeordneten Seite (Parent). Das ist auch logisch, sonst müsste man ja mehrere - identische - Einträge haben.

Und jetzt noch eine H3

Damit wir auch das restliche CSS noch bewundern können.

Und eine Überschrift h4

Die Überschrift 4 ist normalerweise gleich groß wie p, aber mit etwas mehr Abstand.

• Eine kleine Liste
• Und das
• Und das auch nocht

Ein bissel Blockquote.
Blockquotes eigenen sich ideal für Gästebücher oder Linklisten

Das wars für heute. Was vergessen? Ja: Link

Chio (h5)

Webdesign (h6)