Navigation/Buttons in reinem CSS/Sonderfall

[Torsten]

Ich hänge hier mal 2 Buttongrafiken an, die eine soll den Normalzustand darstellen, die andere den MouseOver-Zustand.

Ob es wohl möglich ist dies in einer reinen CSS Anweisung nachzubauen?

Die Schwierigkeit besteht in dem Abgeschnittenem Text und dem roten Balken für den MouseOver-Zustand der zusätzlich einen Abstand hat!

Ach ja die verschiedenen Buttons sind untereinander angeordnet mit einem Abstand von 5 px, dafür hänge ich ebenfalls eine Grafik an. Dadurch kann man den Text nicht einfach nach unten verschieben, denn dann rutscht er in den nächsten Button

[wildmieze]

Hmmm ... müsste der Text bei overflow:hidden nicht automatisch abgeschnitten werden ..?

... und für den roten Balken .. *kratzamkopp* .. vielleicht dem <li> beim hovern einen breiteren, weißen balken geben, und dem <a> den schmaleren roten? Wäre jetzt so mein erster Gedanke, keine Ahnung, obs funktioniert ..

[sejuma]

Wenn ich mir die Grafikinfos ansehe, haben beide Buttons die gleiche Breite.
Der Out-Button somit offensichtlich noch einen weißen rechten "Platzhalterbereich".

Eigentlich müsste das wir hier unter Ziffer 2 beschrieben funktionieren:
http://www.ohne-css.gehts-gar.net/0022.php

[Torsten]

Hmmm ... müsste der Text bei overflow:hidden nicht automatisch abgeschnitten werden ..?

... und für den roten Balken .. *kratzamkopp* .. vielleicht dem <li> beim hovern einen breiteren, weißen balken geben, und dem <a> den schmaleren roten? Wäre jetzt so mein erster Gedanke, keine Ahnung, obs funktioniert ..

Danke für die Tipps, muss ich mal probieren.

Wenn ich mir die Grafikinfos ansehe, haben beide Buttons die gleiche Breite.
Der Out-Button somit offensichtlich noch einen weißen rechten "Platzhalterbereich".

Eigentlich müsste das wir hier unter Ziffer 2 beschrieben funktionieren:
http://www.ohne-css.gehts-gar.net/0022.php

Ja die Buttons sind gleich groß, so soll es ja auch sein, denn rechts neben den Buttons ist ja ein Inhaltsbereich.

Danke für den Link, hier bin ich nur skeptisch, weil ja quasi gar nichts an Text in der Liste steht, wenn ich das mit CSS löse, dann sollte auch Text in HTML vorhanden sein.

Frage: Ist es eigentlich erlaubt (Google, W3C), Text genau so einzufärben wie der Hintergrund?

[sejuma]

Danke für den Link, hier bin ich nur skeptisch, weil ja quasi gar nichts an Text in der Liste steht, wenn ich das mit CSS löse, dann sollte auch Text in HTML vorhanden sein.

Ohne Linktext ist es in der Tat nicht behindertengerecht. Das gleiche gilt, wenn du für Text und Hintergrund die gleiche Farbe nimmst.
Zulässig ist beides.

Eine Möglichkeit wäre noch, dem a ein title mitzugeben:

<a title="Linktext"  href="#"></a>

So würde der Linktext zumindest beim Hovern sichtbar.

[wildmieze]

Ahso, Bilder sind "erlaubt"? .. ich dachte, auf die sollte verzichtet werden^^ ...
.. ich schiebe bei grafischen Menüs o.ä. den Linktext i.d.R. per text-indent aus dem sichtbaren Bereich. So bleibt er im HTML ganz normal erhalten ..

[Torsten]

Ahso, Bilder sind "erlaubt"? .. ich dachte, auf die sollte verzichtet werden^^ ...
.. ich schiebe bei grafischen Menüs o.ä. den Linktext i.d.R. per text-indent aus dem sichtbaren Bereich. So bleibt er im HTML ganz normal erhalten ..

Moooooment text-indent

Damit müsste ich doch zumindest den Text so wie bei den grafischen Buttons verschieben können, oder?

[wildmieze]

Hmmm ... spontan hab ich im Hinterkopf, daß text-indent nur nach links und rechts verschiebt.

Den verschobenen Text kriege ich testweise zB hiermit hin:

<div style="padding-top:15px; height:15px; width:100px; overflow:hidden; background:#DDDDDD;font-size:20px;">
Hallo Welt
</div>

.. ergibt dann nen 30px hohen, grauen Kasten mit angeschnittenem Text.

[Torsten]

Nee also ich bekomme das so nicht geregelt, denn die Navigation soll freilich in einer Liste organisiert werden...

[sejuma]

Dann mach das doch mit z.B.

text-indent: -3000px;

[wildmieze]

@sejuma: ich glaub, er wollte den Text jetzt doch sichtbar nach unten statt neben den Monitor verschieben

@Torsten: War ja nur ein Beispiel .. hmm .. ich kann mir eigentlich nicht vorstellen, daß <li> bzw. <a> da einen großen Unterschied zum <div> machen .. wenn ich heute nacht dazu komme, kann ich aber auch selbst nochmal rumprobieren ..

[wildmieze]

Soo .. gerade ein paar Minuten Zeit gehabt .. so in etwa? :

http://www.miezes-welt.de/buttons.htm

.. war aber jetzt nur auf die Schnelle, vermutlich kann man es noch optimieren ..

[Torsten]

Super das sieht schon mal gut aus, nur sollte der Balken rechts außen drangeklebt werden, nicht innen...
Ob das geht, ich weiß es nicht...

Und dann müsste eben jeder Button eine andere Farbe haben, diesbezüglich sollte das Hauptmenue erstmal im Hintergrund weiß sein bzw. transparent, da ja die Seite weiß ist.

[wildmieze]

Außen dran ist sogar noch einfacher - zumindest, wenn der Seitenhintergrund weiß ist.. dann kannst Du Dir sogar das a:hover sparen und den kleinen "Abstand" zum roten Balken generell einblenden - sieht man ja nicht ...
Die verschiedenen Farben habe ich hier über Klassen gelöst. Da kannst Du ja jede gewünschte Farbe hinschreiben. Evtl. musst Du noch entsprechend die Textfarbe anpassen.
Was Du mit "im Hintergrund erstmal weiß" meinst, weiß ich allerdings nicht ...

http://www.miezes-welt.de/buttons2.htm

[Torsten]

Super wildmieze

Das sieht sehr gut aus, nur eines haben wir ausser acht gelassen - sorry mir war es auch nicht bewusst

Die Schriftfarbe jedes Buttons ist jeweils ein Prozentwert der Buttonfarbe.
Es stellt ja kein Problem dar die Schrift über die Klassen zu färben, dadurch wird sie aber im Abstand zwischen den Buttons sichtbar

So weit mir bekannt, kann man Text leider keine Transparenz mitgeben...