nicht angemeldet
Menüeintrag-Text auf ganze Feldbreite ausdehnen - wie lösen?
Liebe Leser,
frohe Ostern! :-)
Ich suche nach einem CSS-Lösungsweg für folgende Aufgabenstellung:
Aktive (= aktuell geöffnete) Menüeinträge sollen bei a:active über die gesamte Breite des Menüfeldes "ausgedehnt" werden. Der Text soll sich also vom linken Rand bis zum rechten Rand erstrecken.
Der Zeichenabstand (letter-spacing) wird also so weit vergrößert werden, dass der Menütext die gesamte Feldbreite einnimmt.
Da der Grad der Vergrößerung jedoch davon abhängt, wie viele Zeichen der Menütext besitzt, muss der Zeichenabstand bei jedem Menüeintrag individuell sein und kann nicht einfach pauschal über z.B. "letter-spacing:x Pixel" vorgegeben werden.
Ich dachte, die Ausdehnung ließe sich doch einfach über "text-align:justify" (Blocksatz) lösen - leider nicht. :-)
Der Befehl "justify" funktioniert wohl nur bei Texten mit Textumbruch...
Habt Ihr eine Idee, wie ich so etwas machen könnte?
Herzlichen Dank für Eure Hilfe!
Viele Grüße
KloBoBBerLe
-
Ich dachte, die Ausdehnung ließe sich doch einfach über "text-align:justify" (Blocksatz) lösen - leider nicht. :-)
Der Befehl "justify" funktioniert wohl nur bei Texten mit Textumbruch...Genauer nur für alle Zeilen außer der letzten vor einem erzwungenem Umbruch oder vor dem Ende des Absatzes/des Listenelementes/der Tabellenzelle (text-align:justify wird meiner humpelnden Meinung nach eher nur auf Absätze oder Listenelemente oder Tabellenzellen angewendet.)
[***]
Freilich kannst Du versuchen, einen inline-block anzuhängen, der fast so breit ist wie Dein Menüfeld, ein erzwungenes Leerzeichen enthält und wegen der erzwungenen Höhe des umgebenden Elementes und dessen CSS-Eigenschaft overflow:hidden nicht angezeigt wird:<html> <ul> <li style="width:15em;height:1.3em; overflow:hidden; text-align:justify; border:1px solid red">Dein aktiver Menüeintrag<span style="display:inline-block; width:15em;">aa</span></li> </ul> </html>wenn das Deinen Anforderungen genügt...
Der Zeichenabstand (letter-spacing) wird also so weit vergrößert werden, dass der Menütext die gesamte Feldbreite einnimmt.
Mit CSS 3 kannst Du theoretisch auch das letter-spacing kalkulieren. Das dürfte aber so kompliziert werden, dass Du das letter-spacing gleich für jedes Element Deines Menüs durch Trial & Error ermitteln kannst - denn bei den "normalen Schriftarten" haben die Zeichen eine unterschiedliche Breite. Dann kann immer noch durch einen browserseitigen Eingriff die Schrift ersetzt werden... wodurch "alles platzt".
Auf deutsch: Ich sehe (soweit die geniale Lösung [***] nicht als solche angesehen wird) jetzt keinen ökonomisch vertretbaren und "sicheren" Weg. Das Ansinnen erscheint mir dem Medium nicht angemessen. Da kannst du auch gleich den Gimp nehmen und Deine Menü-Einträge als Grafik erzeugen.