Navigation um 90° gedreht

[Schnickes]

Hallo zusammen,

über die Suche habe ich leider nichts zu meiner Frage gefunden, es scheint also ein etwas ungewöhnlicher Wunsch zu sein.

Ich möchte die Main Navigation senkrecht haben, damit man es sich besser vorstellen kann habe ich eine Grafik angehangen.

Ich habe zwar schon Ansätze über eigenen Code gefunden z.B. writing-mode: tb-rl, aber vermutlich setze ich ihn falsch ein, denn es passiert einfach gar nichts

Hat jemand eine Idee oder gibt es evtl. sogar eine Erweiterung die das macht?

Grüße
Ralf

[hofff]

Juhu,

die Antwort ist CSS3. Das wird von allen aktuellen Browsern unterstützt, außer IE. Aber da kannst du ja noch ein Fallback mit Bildern machen.

fg
nicky

[psren]

Also eine Möglichkeit wäre es das mit Image-Sprites zu machen. Dann funktioniert es fast genau wie die horizontale Navigation. Nachteil: Man muss für jeden Navigationspunkt bilder machen.


writing-mode: bt-lr;
(bottom->top - left->right) Wird allerdings von den meisten browsern soweit ich weiß noch nicht unterstützt (bzw. nur mit Präfix). Wie du das trotzdem nutzen kannst (in Verbindung mit rotate) findest du hier

Oder du machst es irgendwie mit Javascript rotate...

Das sind die 3 Möglichkeiten die mir so einfallen.
Unter obigem Link gibt es auch ein Beispiel (Das ich allerdings nur im Chrome12 angeschaut habe)

Viele Grüße
psren

[psren]

die Antwort ist CSS3. Das wird von allen aktuellen Browsern unterstützt, außer IE.

But there is a better way using CSS3 writing-mode property that has been in IE since version 5.5.

- www.thecssninja.com

[andreasisaak]

Oder du nutzt einfach GraphicalText

[psren]

Auch eine möglichkeit (die war mir garnicht eingefallen) Aber formschöner finde ich es nur über CSS... kommt aber eben drauf an welche Browser du bedienen musst/willst...

[wotank]

bei Graphical Text mißfällt mir das es keinerlei Linktext gibt.
Es gibt zwar ein alt/title-Attribut für das img, aber ich weiss nicht so genau wie google mit sowas umgeht.
Außerdem ist sowas ein Schmuckbild was im Quelltext normal nix zu suchen hat gemäß Trennung von Inhalt und Gestaltung.

Man kann sowas mit Image Replacement nach Gilder/Levin korrekt umsetzen. Das Bild wäre da und der Linktext befände sich nur darunter.
Funktioniert sogar browserübergreifend bis inkl IE6.