CSS mit Linebreak: Horinzontalmenü zentrieren

[ScoutX]

Auf dieser Webseite (Drupal 7) bin ich gerade am werkeln.
http://www.finestartbyamelia.de/
Wie jeder sehen kann, ist das Horizontale Menü leider nicht zentriert.
Ich habe schon einiges ausprobiert und prinzipiell schaffe ich die Zentrierung nur, wenn kein Linebreak erfolgt.
Ich weiss, wie ich dies mache, das soll nicht die Frage sein.

Man findet an die hundert Erklärungen , wie man mit CSS3 solche Menüs zentriert, aber alle scheitern anscheinend an einem Linebreak, da CSS3 anscheinend nicht in der Lage ist, eine Berechnung der Position nach "Schriftsetzung" oder Inhaltssetzung zu verfeinern.
Ich weiss zumindest nicht wie.

Die Frage ist also: Wie ein Menü mit allen Linien zentrieren, wenn ein Linebreak unumgänglich ist.

 

[Kausalat]

Schon einmal mit margin: 0 auto; versucht? Dies wäre m. E. die einfachste Lösung, etwas zu zentrieren. Der Zeilenumbruch wird durch ein zu kleines Mutterelement erzwungen. Dieses könnte entweder breiter gemacht werden — oder die recht große Schriftgrad des Menüs könnte herabgesetzt werden.

 

[marcol1979]

Mal mit Firebug analysiert ?

 

[ScoutX]

Ich weiss zig Möglichkeiten, diesen Zeilenumbruch zu verhindern.
Es geht mir darum, dass ich eine Lösung mit Zeilenumbruch haben will.

Margin auto funktioniert nicht bei Zeilenumbrüchen. Margin, wie viele andere Positionselemente, selbst bei fester DIV Weite kann keine Listenelemente mit automatischen Zeilenumbruch zentrieren, da immer vor der Schriftsetzung das Margin abgearbeitet wird bzw. Margin nur auf ein höher geordnetes Element greift, nämlich die gesamte Liste und leider keine Teilbereiche von Listen.
Automatische Zeilenumbrüche werden von Browsern nämlich recht spät als Anzeigeelement erzeugt, nachdem die eigentliche vorgegebene Positionierung der gesamten Listen abgeschlossen ist.

Analysiert u.a auch mit Firebug.
Das ist nicht das erste Mal, dass ich genau vor diesem Problem stehe und immer bin ich Kompromisse eingegangen.
Die Webseiten, die ich für eine Bekannte erstelle, sind ausdrücklich auch für Sehschwächere ausgelegt. Die Navigationslemente sollten gut lesbar und groß sein.

Meine ganz persönliche Meinung: Horizontale Listen sind bis heute sehr stiefmütterlich von den Webentwicklern und Konsortien mit CSS3 und HTML5 platzierbar.

 

[Kausalat]

Ich sehe ehrlich gesagt nicht, wo das Problem liegt.

Zur Illustration habe ich fix etwas gebastelt. Wenn du die Seitenbreite änderst, wird sowohl das Mutterelement als auch der ganze Inhalt in sich zentriert. Die von mir gewählte Menübreite von 80 % ist optional und kann auch weggelassen werden.

Wenn das Browserfenster hinreichend klein ist, kann man sich das Zentrieren auch sparen, da der Inhalt an die äußeren Anzeigeränder gedrückt wird.

P. S.: Wenn man seine Websites für Sehbehinderte optimiert, sollte man auch dafür sorgen, dass keine Augenkrebsgefahr durch die Wahl von Schrift- und Hintergrundfarbe ausgeht. Außerdem nützt ein riesiges Menü nicht viel, wenn der sonstige Schriftgrad um ein Dutzend Abstufungen kleiner ausfällt (meine ganz persönliche Meinung ).

 

[ScoutX]

Danke
Das Theme ist nicht perfekt, wie nichts perfekt ist, aber es ist ihre Webseite und eine "Kunstwebseite" dazu. Das Wichtigste ist, dass man weiss, wo man klicken soll und sie ist auch noch nicht fertig.
Kaum eine Webseite hat den Tiresias Font für Glaukomerkrankungen und ausserdem sollte der erhöhte Kontrast gerade Alterssehschwachen helfen. Sogar an Farbfehlsichtigkeit wurde gedacht.
Ganz zufälliger Weise habe ich die 1.8 em der Menüschrift genommen, um einen absichtlichen Linebreak zu erzeugen.
Vorgesehen hatte ich eher 1.5em.

Dein Hilfestellung gibt mir Anhaltspunkte, dass man mit display: inline und textalign: center in diesser Kombination noch was machen könnte, nur zerstört dein Ansatz das CSS des Menüs bei vielen Browsern. Ich werde mal schauen.

 

[Kausalat]

Ich habe meine Lösung kurz in sämtlichen relevanten Browsern getestet und konnte selbst beim Internet Explorer 6 keine "Zerstörung" beobachten. Schuld ist also deine HTML- und/oder CSS-Struktur. Bei zig verschiedenen eingebundenen CMS-Stylesheets und einer wirren Containerverschachtelung passiert das leider sehr schnell.

 

[ScoutX]

Du kannst dir gerne ansehen, was ich meine.
So hatte ich es auch schon allein hinbekommen gehabt.

Ich lasse die besagte Seite, so wie sie ist bis Mittwoch.

Bin für Reparaturvorschläge dankbar. Vergesst nicht, dass vordergründig ein Drupal 7 Theme modifiziert wurde.
Zudem ist der ganze "Farbbereich" der einzelnen Listenfelder betroffen. Bedeutet statt des Umbruchs nach Über kann je nach Weite in Prozent nur die ersten 5 Pixel des Farbbereichs auf der ersten Reihe sein und die komplette Schriftzug in der zweiten.

Meine Vermutung ist, dass dort irgendein php Skript nicht so arbeitet wie man denkt und das CSS verrückt spielt.
Von alternierenden verschieden hohen und breiten Listenfeldern bis kompletter CSS Verlust.

 

[Kausalat]

Das Einfachste wäre, den ganzen CSS-Mist temporär auszukommentieren und nach und nach jedes einzelne Stylesheet wieder einzubinden. Damit merkst du auch, was wirklich für die Anzeige benötigt wird und was einen unnötigen Ballast darstellt.

Einen optisch unschönen Umbruch eines <a> kannst du mit der Anweisung white-space: nowrap deaktivieren.

 

[ScoutX]

Hmmpf, ja wir haben das falsche CSS Command genommen. (HTML Befehl genommen). Zu wenig geschlafen. Trotzdem wirklich seltsamste Resultate, wenn man auf Krampf alle Parameter abklappert.

Culprit: display: inline-block
Für die Googlefreudigen unter uns; Kausalats Ansatz richtig

ul {
    width: 80%;
   text-align: center;
    background: yellow;
    margin: 0 auto;
}
ul li {
    list-style: none;
    display: inline-block; 
    font-size: 1.2em;
    padding: 0;
    margin: 0;
    font-family: Arial;
}
ul li a {
    padding: 3px 7px;
    background: gray;
    color: white;
}

TY Kausalat, dass Du mich noch mal wachgerüttelt hast.

 

[Kausalat]

Gern geschehen .