Hallo,

ich muss ein horizontales Menü bauen, bei dem die Listenpunkte eine feste (bzw. maximale) Breite haben und Menüpunkte mit mehreren Wörtern umbrechen.


(hier mit Javascript gelöst)

Ich möchte, dass die Listenpunkte immer vertikal mittig sind UND der Link nicht auch den gesamten Hintergrund ausfüllt. (normalerweise mache ich das mit einem padding oder der entsprechenden line-height, was an dieser Stelle aber auf Grund von Mehrzeiligkeit nicht funktioniert).

Wie kann ich das lösen?

Ersetze das Komma durch ein <br> ein.

__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

hey,

ich glaube nicht, dass das die Lösung meines Problems ist. Ob da nun ein <br> steht oder nicht ist egal, wenn ich die Buttonweite beschränke und so den Text zu einem Umbruch zwinge. Und gerade dieser Umbruch ist ja schuld daran, dass line-height und padding mir den Text nicht mehr mittig platzieren werden, wie es in dem Beispielbild zu sehen ist.

Ich verstehe nur nicht, warum es scheinbar keine sinnvolle Lösung mit reinem CSS gibt...

Wo ist das Problem. 5 Sek mit Google beschäftigt und erstes Ergebnis angeklickt -> CSS: horizontale und vertikale Zentrierung

schon das Schreiben hier dauert länger.

__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

Bevor hier wieder eine Diskussion anfängt, die dazu führen würde, dass man alle Foren eigentlich abschaffen müsste, da man im Grunde fast alle Antworten mit den richtigen Schlagworten ergoogeln kann, möchte ich das einfach mal so stehen lassen.

Mein Problem geht ein wenig weiter, als dass ich mit dieser Lösung zufrieden gestellt würde und damit bringt mir auch 5 sek Google nichts und ich bemühe ein Forum...

Den Text mittig zu zentrieren funktioniert wunderbar, immerhin ist das ja nichts neues. Problem an der Sache ist jedoch, dass bei diesem Menü keine Höhe für den Link vergeben werden kann (oder)... Ich möchte aber, dass der Link die Navigation in der Höhe voll ausfüllt...


(graue Hinterlegung = :hover )

PS: Ich sehe meinen Formulierungsfehler.. ich habe in meinem Einleitungstext den Text wohl nochmal umgeschrieben und nicht mehr durchgelesen... da ist ein "nicht" zu viel.

muss heißen:

UND der Link auch den gesamten Hintergrund ausfüllt.

Gib dem Link die display Eigenschaft block und setze die Breite und Höhe des a-Elementes entweder auf einen festen Wert, oder einen dynamischen, wie em, dann vergrössert es sich mit der Schrift.

__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

Vertically Centered Text

Wie komme ich drauf?
- Ich habe Google gefragt.

Nach was habe ich Google gefragt?
- multi lined vertical align

Wie lange habe ich gebraucht?
- 15 Sekunden Suche ... Und nochmal eine Minute bis ich mir deinen Text aus dem Zitat oben durchgelesen habe und mir dachte "nope" und 15 Sekunden lang den Kopf geschüttelt habe.

Worauf ich hinaus will: Seltenst hat jemand in diesem Forum hier ein Problem, das so "speziell", "einzigartig" oder "merkwürdig" ist, als das man nicht mit 20 Minuten Google die Lösung finden kann.

__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?

geht nicht

geht

mein Ergebnis:

Vielen Dank

In den FAQ Punkt 14 steht noch eine Lösung, die ich vor einigen Jahren mal geschrieben hatte. (das dort stehende span plus den CC für IE7- kann man inzwischen natürlich auch weglassen, denn ab IE8 laufen display: table & Co. ja.)

Das Problem ist halt die Höhe - sollen die Texte vertikal zentriert sein, müssen alle Elemente, in denen zentriert werden soll, dieselbe Höhe haben. Die bekommen sie zwar durch display: table-cell; automatisch, aber das reicht eben nur bis zu li, nicht a.
(würde man die Navi nicht als ul darstellen, sondern als lauter a nebeneinander, ginge es auch mit a, aber sowas ist natürlich indiskutabel.)

Und der Punkt bei der einheitlichen Höhe ist halt die anklickbare Fläche, die möglichst überall gleich sein soll, und dafür muss eben für alle a dieselbe Höhe deklariert werden, denn anders erfahren sie nicht, wie hoch die a-Elemente in den benachbarten li sind.

Letztlich ist das aber auch kein Problem, denn height wirkt bei td (sowie als solchen dargestellten Elementen) eh wie min-height, und da man height hier sinnvollerweise in em deklariert, dürfte der min-height-Aspekt eh nie zum Tragen kommen.

Solltest Du trotz allem keine Höhe vergeben wollen und die gleich hohe anklickbare Fläche ist nicht so wichtig, kannst Du height auch weglassen (dann ergibt sich die Höhe der Navi automatisch aus der des höchsten a), und dann ist sogar auch noch eine Alternative möglich:

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Hallo heiko_rs,

danke für deine ausführliche Erläuterung. Nach deiner Möglichkeit würde ich standardmäßig Navigtionen erstellen, bei denen die anklickbare Fläche keine Rolle spielt.

Im Rahmen der User Experience und Usability würde ich im Zweifelsfall jedoch immer dazu tendieren in einer Navigation (vor allem wenn diese als horizontales Menüband dargestellt wird) gleichmäßige Schaltflächen erstellen zu wollen. Auch im Hinblick auf mobile Devices macht es mehr Sinn, gleichmäßige mind. 1cm hohe Navigationselemente zu erstellen.

Daher werde ich die von mir zuletzt dargestellte Version verwenden.