Flexible Rahmen mit CSS2

Das grundlegende Seitenlayout ist damit vollständig. Nun kann ich Ränder mit CSS2 verwenden, um Pseudo-Buttons in der oberen Menüleiste zu erstellen. Abbildung B zeigt das endgültige Aussehen der Seite.

Abbildung B: Das fertige grundlegende Seitenlayout

Genau wie das Seitenlayout können auch die Pseudo-Buttons mit CSS2 erstellt werden. Listing F zeigt den entsprechenden Code für die Menüleiste.

Nun erscheint eine Reihe von vier Buttons innerhalb der oberen Menüleiste. Jeder hat einen 1 Pixel breiten schwarzen Rand an der rechten Seite. Der erste Button benutzt den Rand der oberen Menüleiste für seinen linken Rand. Die anderen Buttons verwenden den rechten Rand des jeweils linken Buttons für ihren linken Rand.

Ich habe einen „buttons strong“-Style verwendet, um den Button, der die aktuelle Seite markiert, hervorzuheben. Wenn dies z. B. meine Startseite wäre, sollte der entsprechende Button sich von den anderen Buttons unterscheiden. Mit dem „buttons strong“-Style kann ich für ein individuelles Aussehen jedes Buttons sorgen, indem ich den Text einfach in <strong>-Tags setze.

Da die Styles für die anderen Buttons sich auf Hyperlinks beziehen, kann ich dem einzelnen Link-Verhalten (wie z. B. Hover) unterschiedliche Styles zuweisen. Damit kann ich einen Mouseover-Effekt erzeugen, der die Hintergrundfarbe eines Buttons von blau zu dunkelgrau ändert, wenn sich der Mauszeiger über dem Button befindet. Ohne CSS2 erfordert dieser Effekt normalerweise zwei Grafiken, eine für den Normal- und eine für den Mouseover-Zustand.