Unerwünschter Rand in eingebetteter <ul>-Liste

[Riensen78]

Hallo zusammen,

ich brüte mittlerweile schon den dritten Tag über einem Problem, das ich mit meinem CSS-Layout habe. Ein <li>-Element in einer <ul>-Liste, die ich als Navigationsleiste benutzen möchte und an den linken Seitenrand gefloatet habe, lässt sich (im Firefox 2.0 und Opera 9.21, im IE nicht) nicht 'ordentlich' zentrieren. Firefox und Opera lassen sich nicht beirren und stellen die <li>-Elemente innerhalb der <ul>-Liste (gefloatet, Breite: 11em) linksbündig dar, der IE macht es - meiner Meinung nach -  korrekt und führt das Zentrieren problemlos aus.

Weder über den - meines Wissens nach nicht standardkonformen - Befehl text-align:center im Elternelement (also <ul>) noch über die auf der Seite

http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/index.htm

empfohlene Methode mit margin-left: auto und margin-right: auto im <li>-Element selbst. Kann sein, das ich seit zwei Tagen ein meterdickes Brett vor meinem Kopf mit mir herumtrage, aber ich kriegs leider nicht vernünftig geregelt bzw. zentriert. Mit einer Hilfskonstruktion, in diesem Fall margin-left und margin-right gleich 1.5em im <li>-Element funktioniert es zwar, aber irgendwie hakt es auch dort manchmal und kommt zu Ungereimtheiten.

Könnte mir vielleicht jemand weiterhelfen und mir sagen, was ich falsch mache bzw. ob es sich um einen Darstellungsfehler in Firefox und Opera (eigentlich doch kaum vorstellbar?!) handelt? Über eine Antwort würde ich mich sehr freuen.

Torben

Hier der relevante Code:

ul#linke_seite {
     width: 11em;
     float: left;
     margin: 0;
     text-align: center;
     background-color: yellow;
     }

ul#linke_seite li {
     margin-top: 1em;
     margin-bottom:1em;
     margin-left: 1.5em;
     margin-right: 1.5em;    /*Hilfskonstruktion, weil Zentrierung des li-Elements in Firefox und
              Opera nicht funktioniert*/

list-style: none;
     font-weight: bold;
     }

ul#linke_seite a{
     width: 8em;
     display:block;
     padding-top: 0.2em;
     padding-bottom: 0.2em;
     border: 1px groove black;
     text-decoration: none;
     font-weight: bold;
     }

[Riensen78]

Ich habe mittlerweile bemerkt, dass ein grundsätzliches Problem die Breitenvergabe für das <ul>-Element war. Lässt man diese weg, kann man durch margin-left und margin-right: 1.5 em jetzt auch ohne Ungereimtheiten die <li>-Elemente optisch zentrieren.

Dennoch ist mir an einer Klärung der Frage gelegen, wie man <li> innerhalb von <ul> (mit fester Breitenvergabe) zentrieren kann.
Wie gesagt hat es auf den 'herkömmlichen Wegen bei mir nicht geklappt.

Vielen Dank,

Torben

[wahsaga]

hi,

Dennoch ist mir an einer Klärung der Frage gelegen, wie man <li> innerhalb von <ul> (mit fester Breitenvergabe) zentrieren kann.

</hilfe/faq.htm#css-zentrieren>

Wie gesagt hat es auf den 'herkömmlichen Wegen bei mir nicht geklappt.

Natürlich nicht, text-align ist nicht zum zentrieren von Listelementen da.

gruß,
wahsaga

[Riensen78]

Hallo wahsaga,

erst einmal danke für Deine Antwort. Ich glaube aber, Du hast meinen Post nicht komplett bzw. richtig gelesen. Ich habe mich schon eingehender mit dem Problem beschäftigt und weiß auch, dass text-align eigentlich nicht für Listenelemente gedacht ist. Die andere Lösung (margin-left: auto; margin-right:auto), die auf der von Dir angegebenen Seite aufgeführt ist, funktioniert aber auch nicht. Diese Seite verweist übrigens auf

http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/index.htm,

die ich, wie in meinem ersten Post beschrieben, bereits kosultiert habe.

Funktionieren tut es trotzdem nicht. Kann mir jemand einen weiteren Tipp geben, wie man ein <li>-Element innerhalb einer <ul>-Liste sauber mit CSS zentrieren kann? Gibt es vielleicht irgendetwas, was man bei margin-...:auto falsch machen kann bzw. beachten muss?

Gruß

Torben

hi,

Dennoch ist mir an einer Klärung der Frage gelegen, wie man <li> innerhalb von <ul> (mit fester Breitenvergabe) zentrieren kann.

</hilfe/faq.htm#css-zentrieren>

Wie gesagt hat es auf den 'herkömmlichen Wegen bei mir nicht geklappt.

Natürlich nicht, text-align ist nicht zum zentrieren von Listelementen da.

gruß,
wahsaga

[wahsaga]

hi,

Ich glaube aber, Du hast meinen Post nicht komplett bzw. richtig gelesen.

Ich glaube, du hast dir noch keine Gedanken über sinnvolles Zitieren gemacht - sonst würdest du ja nicht mein Posting komplett zitieren.
TOFU schmeckt keinem Foren-Nutzer - also vermeide es bitte künftig.

Ich habe mich schon eingehender mit dem Problem beschäftigt und weiß auch, dass text-align eigentlich nicht für Listenelemente gedacht ist. Die andere Lösung (margin-left: auto; margin-right:auto), die auf der von Dir angegebenen Seite aufgeführt ist, funktioniert aber auch nicht.

"Funktioniert nicht" ist immer noch keine brauchbare Problembeschreibung, und wird auch nie eine werden.

Gibt es vielleicht irgendetwas, was man bei margin-...:auto falsch machen kann bzw. beachten muss?

Beachten sollte man die Tipps für Fragende - ohne dass du zeigst, _was_ _genau_ du versucht hast (und von einem Versuch mit margin:auto hast du bisher noch nichts gezeigt), kann dir kein Mensch sagen, welche der Möglichkeiten, etwas falsch zu machen, du vielleicht erfolgreich genutzt hast.

gruß,
wahsaga

[Riensen78]

@wahsaga

Ich bleibe dabei: Du hast meinen Post nicht vernünftig gelesen.
Und versuche bitte, Deinen pädagogischen Eifer etwas zu zügeln.

Belehrung Nummer eins:

Ich glaube, du hast dir noch keine Gedanken über sinnvolles Zitieren gemacht - sonst würdest du ja nicht mein Posting komplett zitieren.
TOFU schmeckt keinem Foren-Nutzer - also vermeide es bitte künftig.

Den Hinweis auf die Zitierweise sehe ich ja noch ein, okay.

Belehrung Nummer zwei:

"Funktioniert nicht" ist immer noch keine brauchbare Problembeschreibung, und wird auch nie eine werden.

Lies Dir meinen ersten Post bitte (nur ein einziges mal) genau durch, und, siehe da, Du wirst eine genaue Problembeschreibung finden.

Belehrung Nummer drei:

Beachten sollte man die Tipps für Fragende - ohne dass du zeigst, _was_ _genau_ du versucht hast (und von einem Versuch mit margin:auto hast du bisher noch nichts gezeigt), kann dir kein Mensch sagen, welche der Möglichkeiten, etwas falsch zu machen, du vielleicht erfolgreich genutzt hast.

Ich wiederhole mich, aber: Lies Dir den ersten Post einmal genau durch, und Du wirst auch den Hinweis finden, dass ich es bereits mit margin:auto versucht habe.

»»Natürlich nicht, text-align ist nicht zum zentrieren von Listelementen da.

Auch dass text-align nicht standardkonform bei der Zentrierung von Elementen ist, habe ich im ersten Post bereits angemerkt, und Du antwortest mir, dass es nicht dafür gedacht ist. Danke auch dafür.
Alles in allem habe ich nun zwei Antworten auf eine Frage von Dir bekommen, die mir - abgesehen von pädagogisch wertvollen Anmerkungen - leider null weitergeholfen haben. Auf weitere derartige Hilfestellungen lege ich nach reiflicher Überlegung keinen Wert.
Mit freundlichen Grüßen,

Torben

[wahsaga]

hi,

Ich wiederhole mich, aber: Lies Dir den ersten Post einmal genau durch, und Du wirst auch den Hinweis finden, dass ich es bereits mit margin:auto versucht habe.

Ich wiederhole mich auch, wenn auch nur wesentlich ungerner als du offensichtlich:

[O]hne dass du zeigst, _was_ _genau_ du versucht hast (und von einem Versuch mit margin:auto hast du bisher noch nichts gezeigt), kann dir kein Mensch sagen, welche der Möglichkeiten, etwas falsch zu machen, du vielleicht erfolgreich genutzt hast.

Alles in allem habe ich nun zwei Antworten auf eine Frage von Dir bekommen, die mir - abgesehen von pädagogisch wertvollen Anmerkungen - leider null weitergeholfen haben.

Weil du leider immer noch Null _brauchbare_ Information geliefert hast.

Auch wenn ich mich noch mal wiederholen muss: "Ich habe es nicht hinbekommen" sagt uns leider nichts, ausser dass du es nicht hinbekommen hast.

Auf weitere derartige Hilfestellungen lege ich nach reiflicher Überlegung keinen Wert.

Wenn du schon derart "reiflich" überlegst, dann überleg doch mal, warum Jonathan ebenfalls nach einem vollständigen Beispiel fragt, damit dein Problem nachvollziehbar wird.

gruß,
wahsaga

[Jonathan]

Hallo,

Kannst du vielleicht ne komplette Testseite mit nötigem HTML liefern, damit man das mal nachvollziehen kann?

Ansonsten: Schuss ins blaue: Die solltest dem li vielleicht testweise display:block geben, ich weiß nicht, ob die Zentrierung von Elementen mit display:list-item so problemlos funktioniert.

Jonathan