Für ein neues Projekt hab ich solche “Buttons” als Karteireiter entworfen, mit Farbverlauf und allem drum und dran. Allerdings sind solche Farbverläufe bekanntlich nicht gerade platzsparend komprimierbar, also so wenig Bilder wie möglich verwenden. Ich wollte, dass sich diese Buttons, wenn man mit der Maus drüberfährt, nach oben erweitern. Dazu habe ich auch das Bild einige Pixel höher gemacht, damit es sich nicht wiederholt.

Positionierung

Jetzt gibt’s aber ein Problem: Das Element (li) müsste sich nach oben ausdehnenn, nicht nach unten - also genau entgegen der Standardeinstellung. Es muss also am unteren Rand fixiert werden. Nach einigem Rumprobieren bin ich dann auf die Positionierung gekommen. Dazu ist das folgende Markup gegeben:

<ul id="nav">
  <li id="news"><a href="#">news</a></li>
  [...]
</ul>

Als erstes weisen wir dem li mit der ID news eine absolute Positionierung zu und positionieren es vom unteren Rand her mit 0 Pixel Abstand:

#nav #news {
    background:url(images/bg-news.png);
    width:75px;
    position:absolute;
    bottom:0px;
}

Hier wird dem li-Element gleich noch ein Hintergrund und eine feste Breite zugewiesen. Das ist deshalb nötig, da ich für die Schrift auch (antialiaste) Grafiken einsetze und keinen normalen Text nehme. Man kann das Ganze aber auch leicht mit der “Sliding-Doors”-Technik kombinieren (Artikel bei A List Apart, Fortsetzung). Dafür wäre hier aber mehr Markup nötig (z.B. ein zusätzliches div oder span).

Wenn man das Ganze jetzt im Browser anschaut gibt’s eine kleine Enttäuschung. Der Karteireiterbutton erscheint ganz am unteren Rand und bleibt dort kleben - freie Positionierung ade. Um die Buttonleiste wie ein normales Element benutzen zu können, muss das Elternelement entweder fixed, absolute oder relative positioniert sein, da sich dann das position:absolute; vom li an diesem Elternelement orientiert - nicht mehr am body.

Die Definition der ul schaut so aus: #nav { list-style-type:none; padding:0px; margin:0px; height:36px; position:relative; }

Da wir mit position:absolute; quasi alle Elemente aus der ul rausziehen und diese damit keinen (regulären) Inhalt mehr hat, braucht die ul eine feste Höhe, sonst wäre sie einfach 0 Pixel hoch und die Navigationselemente ragen dann oben über die Liste hinaus (zumindest in standardkompatiblen Browsern, der Internet Explorer rendert das etwas anders). Zu beachten ist, dass der IE aus irgendeinem unerfindlichen Grund bei ungeraden Höhenangaben (z.B. 35px) die Listenelemente um einen Pixel nach oben schiebt und ein unschöner Streifen unterhalb entsteht. Deswegen ist es notwendig, dass hier eine gerade Zahl angegeben wird, was aber kein Problem sein sollte.

Hover-Effekt

Jetzt fehlt eigentlich nur noch der Hover-Effekt - das Listenelement soll sich ja auch ausdehnen. Dazu braucht es folgende Stylesheets:

#nav #news a {
    display:block;
    height:32px;
    [...]
}

#nav #news a:hover {
    height:35px;
    [...]
}

Für normale Links wird die Höhe 32 Pixel festgelegt (display:block;nicht vergessen, sonst greift die Höhendefinition nicht da a ein Inline-Element ist). Wenn der Benutzer allerdings mit der Maus auf den Link zeigt, wird das a-Element in der Größe verändert und - voilà - dehnt sich nach oben und nicht nach unten aus.

Nachteile

Einen großen Nachteil hat diese Lösung aber: Alle Buttons müssen absolut positioniert werden - mehrere Buttons nebeneinander werden durch das position:absolute; alle auf der selben Stelle angezeigt, deswegen ist die Angabe von left nötig.

Beispiel

Im fertigen Beispiel stehen noch einige weitere CSS-Angaben die aber nur dem Optischen dienen, jedoch keine weitere Funktion haben. Das Ganze funktioniert in folgenden Browsern:

• Internet Explorer 5.01, 5.5 und 6 (SP2)
• Mozilla Firefox 1.0
• Opera 7.60
• Safari 1.1

Fertiges Beispiel ansehen