< Chinese Marketing | China Open 2007: Die Viertelfinals >

29 Mar 2007 Tab-Navigation mit CSS

Die Seitennavigation mit Tabs da oben ist natürlich nicht auf meinem Mist gewachsen – der Code wie auch die Grafiken stammen von Christopher Ware, der jede Menge solcher Menüdesigns zusammengebastelt hat, eines schöner als das andere.

Der HTML-Code für eine solche Navigation ist denkbar simpel: Eine in einen div-Container verpackte ul, deren Listenpunkte jeweils einen Link enthalten, dessen Linktext wiederum nochmal in ein span verpackt wird.

0 Trackbacks

Trackback-URL

  1. No Trackbacks

2 Comments

RSS Feed (Comments) for this entry

  1. * Thomas Koll (29.03.07, 19:37):

    Hi,
    Du solltest übrigens deinem #wrapper mal eine max-width geben. So in etwa die Breite des Bildes oben. Spätestens ab 1100 wird’s nämlich schon hässlich weil der Titel niht mehr lesbar ist.

  2. * YellowLed (30.03.07, 01:31):

    Dieses Template ist »work in progress«. Als Unterlage dient ein Template-Framework, an dem derzeit noch gebastelt wird. max-width für #wrapper wäre grundsätzlich der richtige Ansatz – leider funtioniert das nicht in allen Browsers (wir raten jetzt einfach mal, in welcher Browserfamilie es nicht funktioniert … richtig). Mittelfristig wird es wahrscheinlich – zumindest in diesem Blog – dadurch gelöst werden, dass der Blogtitel in die Headergrafik eingebaut wird. Dazu müsste ich aber erstmal dazu kommen, die endgültige Headergrafik zu bauen – das hier ist quasi ein »Platzhalter«. Irgendwann nächste Woche … trotzdem danke für den Hinweis, es wird vermutlich behelfsmäßig schon reichen, #serendipity_banner zusätzlich eine Hintergrundfarbe zu verpassen.

Add Comment

Please notice the comment directions.

Directions

Textile-formatting allowed
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.
Gravatar, Twitter, Identica, Favatar author images supported.

Mandatory fields are marked with a *.

Comments including at least one link will be moderated. Comments including at least three links will be blocked. Sorry – spam protection.

Using noses in emoticons might lead to unexpected results in conjunction with Textile, especially in the middle of a sentence – please use :) or ;) etc. instead.