CSS Tabs wie bei O'Reilly

[Braeburn]

Hallo zusammen,

ich wüßte gerne, wie man so eine Linkleiste (die schwarze mit Glossy-Effekt und rotem Untermenü) wie sie O'Reilly hat, erstellt. In diesem Tutorial ist es zwar beschrieben, bei O'Reilly aber ist die Darstellung immer perfekt, auch bei übermäßiger Vergrösserung der Schrift.

Daher nehme ich an, daß die Linkleiste auf CSS basiert, denn sonst würde das mit der Skalierung nicht so perfekt wie hier funktionieren. Richtig?

Und hat jemand eine Idee, wie man das so sauber hinbekommt?

Schöne Grüße,

B.

[Ingo]

Hi, Braeburn.
Ich habe mir O'Reilly mal angesehen; der Code ist gar nicht so außergewöhnlich: der HTML-Teil
besteht aus je einer <ul> für Navi und Subnavi, von denen jede in einem eigenen Div steht und
deren <li>s je einen Link enthalten. Die <li> sind dabei "float:left" und die Links "display:
block". Das findet man in vielen CSS-Menüs (allerdings sind manche Menüs ein wenig "überzüchtet").

Dass das Menü sich problemlos vergrößern läßt, liegt wohl daran, dass die Breite der beiden
Menü-Divs und das padding der Links nicht in Pixeln sondern in em angegeben sind, also einer
Maßeinheit relativ zur Schriftgröße: vergrößert man die Schrift, wächst auch das Menü in
Breite und Höhe entsprechend mit. - Maßgeblich sind hier die Angaben für "#(sub)nav" und
"#(sub)nav ul li a" sowie "#nav .nav_selected a(:hover)". - Soweit meine erste Analyse.

Wie man diese Flexibilität mit einem Glas/Glossy-Effekt verbindet, weiß ich zwar nicht, aber eine
Idee hätte ich schon: man verwendet ein Hintergrundbild, das auch für eine sehr große Darstellung
genügend hoch ist, und zentriert dieses vertikal ... Nur ne Idee.

Grüße, Ingo