Tabbed Browsing mit HTML/CSS

[Peitzi]

'Nabend zusammen,

ich könnte wieder mal ein bisschen Hilfe gebrauchen.

Vorerst ein Bild zur Verdeutlichung meiner Fragen.

Das ist ein Screen von ulf-theis.de, wo man sehr gute Tuts für zB PS bekommt.
Leider beschreibt er nicht, wie man das Tabbed Browsing so wie im Bild oben macht.

Was ich gerne genau erläutert hätte:
MouseOver (wie oben das grüne "Leistungen"),
Kein Rand unter dem aktien Menüpunkt ("Turtorials).

Ich hab absolut keine Ahnung wie ich das machen soll. Jedes mal neue Buttons laden, kann ja kaum die Lösung sein, denn das würde das Volumen der Seite unnötig in die Höhe treiben,
aber ich bin mir sicher, dass hier jemand weiss, wie es geht :-D.

Besten Dank schonmal für die Hilfe!

 

[creative7even]

ist mit CSS lösbar! denke das könnte dir weiterhelfen: http://nontroppo.org/test/tab1.html
lg.c7

 

[Hairy]

Theoretisch macht man das z.B. so, dass das Bild des "normalen" Buttons und der Hover-Variante direkt nebeneinander in einem Bild gespeichert sind. Standardmäßig wird nur der Teil des "normalen" Buttons angezeigt, der Browser hat das Bild aber natürlich schon geladen. Beim Hovern wird das Bild dann nur noch verschoben, wodurch ein "flüssiger" Hovereffekt gewährleistet ist, da nichts mehr nachgeladen wird.

 

[P.Stylez]

Theoretisch macht man das z.B. so, dass das Bild des "normalen" Buttons und der Hover-Variante direkt nebeneinander in einem Bild gespeichert sind. Standardmäßig wird nur der Teil des "normalen" Buttons angezeigt, der Browser hat das Bild aber natürlich schon geladen. Beim Hovern wird das Bild dann nur noch verschoben, wodurch ein "flüssiger" Hovereffekt gewährleistet ist, da nichts mehr nachgeladen wird.

Jau, also wenn du das komplett ohne Roundtrips haben willst, wär das wohl auch mein Ansatz. Den onhover-Handler mittels Javascript so setzen, dass der z-Index des Tabs erhöht wird. Der zugehörige Content würde dann in mehreren DIVs stehen, die halt nacheinander visible oder invisible gemacht werden, je nachdem welches Tab gehovert wird

 

[Hairy]

Hmm ich meinte es eigentlich ohne JavaScript:
http://wellstyled.com/css-nopreload-rollovers.html

 

[Peitzi]

Vielen Dank euch allen.
Habs hinbekommen. Geht ganz ohne Javascript.

Am längsten hats wirklich gedauert, die verschiedenen Buttons zu machen. 3 Stück an der Zahl.
Inaktiv, aktiv und einen Hover-Button.

Lohnt sich aber :-D.