CSS-Reiter

Die Reiterbreite passt sich der Beschriftung an

Anstelle der früher üblichen Buttons und Reiter als Vollgrafiken – die mühsam einzeln erzeugt werden mussten und die für Suchmaschinen keine Bedeutung hatten – kann man mit Hilfe von CSS Reiter gestalten, deren Breite sich aus der jeweiligen Beschriftung ergibt. Im Wesentlichen bestehen sie aus einer Tabelle (damit mehrere nebeneinander erscheinen können), mit Anchor-Tags als Block-Elemente in den Zellen. Die Anker wiederum enthalten je zwei positionierten Grafiken – die (schräg oder abgerundeten) Querseiten.

Die nachfolgend abgebildeten Reiter haben also pro Reiter-Typ nur insgesamt je zwei Grafiken – die linke und rechte Seite jedes Reiters. Die dritte Variante besitzt zusätzlich die Seiten des aktuellen Reiters, der höher ist.
CSS Reiter-Beispiele
Dabei sind die Seitengrafiken keine Hintergrundbilder, sondern werden bei jedem Reiter explizit im Vordergrund positioniert. Nach aussen hin laufen sie in die umgebende Farbe über, nach innen hin sind sie transparent. So wirkt sich das Hover-Effekt auf den Link richtig aus – seine Wirkung ist nach aussen verdeckt, aber nach innen, im Reiter, sichtbar. Beim Erstellen der Grafiken müssen Sie auf das Anti-Aliasing zu beiden Seiten der (schrägen) Kanten achten, sonst sieht es zerfranst aus.

Der Einbau in HTML

<div class="contreiter">
 <div class="contreitertrenner"></div>
 <table cellpadding="0" cellspacing="0" class="reiter">
  <tr>
   <td><a href="index.php" class="current"><img
    src="images/26-sep-links.gif" alt="" class="tablinks" />Eins<img
    src="images/26-sep-rechts.gif" alt="" class="tabrechts" /></a></td>
   <td><a href="zwei.php"><img
    src="images/26-sep-links.gif" alt="" class="tablinks" />Reiter Zwei<img
    src="images/26-sep-rechts.gif" alt="" class="tabrechts" /></a></td>
   <td><a href="drei.php"><img
    src="images/26-sep-links.gif" alt="" class="tablinks" />Langer Reiter Drei<img
    src="images/26-sep-rechts.gif" alt="" class="tabrechts" /></a></td>
  </tr>
 </table>
</div>

Als erstes kommt ein positionierter DIV, in dem die Tabelle mit den Reitern an der richtigen Stelle sitzt – üblicherweise direkt oberhalb des Textbereichs einer Seite. Als erstes Element in diesem DIV kommt ein langer, schmaler DIV, mit dem Querstriche gezeichnet werden (einfach wegen der Optik). Die nachfolgende Reiter-Tabelle hat einen höheren z-index als die Querstriche, damit seine Zellen – sofern nicht durchsichtig – die Striche überlagern.

Die CSS-Anweisungen

1. Anchor-Tag = Block-Element

table.reiter td a {
  display: block;
  position: relative;  /* Positioniert da enthält positionierte Gifs */
  height: 18px;  /* border- und padding-top kommen hinzu */
  padding: 4px 24px 0px 24px;
  border-top: 2px solid #4A4A99;
  border-bottom: 2px solid #CACFE6;
  text-decoration: none;
  background-color: #E6E8F2; }

2. Anchor-Tag Hover-Effekt

table.reiter td a:hover {
  background-color: #CACFE6; }

3. Aktueller Reiter gestalten

table.reiter td a.current {
  font-weight: bold;
  border-bottom: 2px solid white;
  background-color: transparent; }
table.reiter td a.current:hover {
  background-color: transparent; }

4. Die Seitengrafiken

table.reiter td a img.tablinks {
  position: absolute;
  top: -2px;  left: 0px; }
table.reiter td a img.tabrechts {
  position: absolute;
  top: -2px;  right: 0px; }

5. IE Bugfix

<!--[if gte IE 5]>
table.reiter td a img.tabrechts {
  right: -1px; }
<![endif]-->

6. Basislinie(n) dazu - fertig

div.contreitertrenner {
  position: absolute;
  top: 24px;  left: 0px;
  width: 605px;  height: 2px;
  overflow: hidden;  z-index: 1;
  background-color: #CACFE6; }

Werden Sie kreativ!

Es gibt beliebig viele Möglichkeiten auf dieser Basis – eine weitere finden Sie auf dieser Website, z.B. bei Ratgeber => Gestaltung. Buttons – wie hier in der Navigation – lassen sich auf ähnlicher Weise optisch verschönern.

Das Archiv

Hier können Sie eine Mini-Website (in PHP und XHTML) mit Beispielreitern herunterladen:

Zum Herunterladen bitte einloggen.