inline-Liste horizontal zentrieren

[cssneuling]

Hi
Ich möchte eine Liste, deren li's horizontal angeordnet sind, horizontal zentrieren.
Google hat ausgespuckt, dass margin: 0 auto; nur funktioniert, wenn der Liste eine Breite zugewiesen wurde. Trotzdem klappt das noch nicht.
Hier mal mein jetziger Code ohne Zentrierungsversuche:

ul#navi_list                     {
                                    list-style-type: none;            
                                    }
                                    
ul#navi_list li                   {
                                    display: inline;
                                    font-family: Cambria, Verdana, Arial, sans-serif; 
                                    font-size: 1.1em;
                                    font-weight: bold;
                                    font-style: oblique;
                                    color: #000000;
                                    margin-left: 10px; 
                                    margin-right: 10px;
                                    }

 

[prm]

Versuch's mal so:

ul #navi_list {
width: 500px;
margin: 0 auto;
list-style-type: none;            
}

Am besten ermittelst du die Gesamtbreite, indem du den einzelnen li's eine Breite zuweist und margins- und paddings noch berücksichtigst.

 

[cssneuling]

Gibt es denn eine Möglichkeit ohne absolute Längenangaben?
Meine Navigation ist recht lang und sollte auch ordenlich aussehen, wenn noch ein Listenpunkt dazukommt (der dann die xy px sprengt und ne neue Zeile anfängt)
Es klappt zumindest mit einer Breite von 700px in mehreren Auflösungen, aber das Geleb vom Ei ist das trotzdem nicht. Wie gesagt, es soll die Möglichkeit bestehen einen Listenpunkt hinzuzufügen ohne was am CSS Code zu ändern.

 

[neuroleptika]

Gibt es denn eine Möglichkeit ohne absolute Längenangaben?
Meine Navigation ist recht lang und sollte auch ordenlich aussehen, wenn noch ein Listenpunkt dazukommt (der dann die xy px sprengt und ne neue Zeile anfängt)
Es klappt zumindest mit einer Breite von 700px in mehreren Auflösungen, aber das Geleb vom Ei ist das trotzdem nicht. Wie gesagt, es soll die Möglichkeit bestehen einen Listenpunkt hinzuzufügen ohne was am CSS Code zu ändern.

margin: 0 auto; kann nur mit Breitenangabe auf Blockelemente funktionieren, da der margin nur gleichmäßig auf die Horrizontale aufgeteilt wird.
Ohne width gibt es aber kein automatisches margin.
Mit display: inline; für <li> kannst du die Listeneinträge per text-align: center; zentrieren. Den Zeilenumbruch verhinderst du mit white-space:nowrap;

  #navi_list {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
white-space:nowrap;
}

  #navi_list li {
display: inline;
}

Sollten die Listeneinträge nicht nebeneinander passen wird ein scrollbalken erzeugt.



Element#id führt in css-Beispielcode öfter zu Mißverständnissen.
Du hast ul#navi_list geschrieben.
prm hat aber ul #navi_list gelesen (hab ich zuerst auch so gelesen).
#navi_list darf es nur einmal im Dokument geben. Deshalb ist ul#navi_list, meiner Meinung nach, unsinnig.

 

[cssneuling]

#navi_list darf es nur einmal im Dokument geben. Deshalb ist ul#navi_list, meiner Meinung nach, unsinnig.

Das ist halt mein Stil *g*
Ich schreibe vor jede ID das Element, dem diese zugewiesen wurde. Da weiß ich sofort, um was es geht. (Nicht alle sind auf den ersten Blick so eindeutig wie #navi_list)

Danke, mit text-align: center; klappt's.

 

[Efchen]

#navi_list darf es nur einmal im Dokument geben. Deshalb ist ul#navi_list, meiner Meinung nach, unsinnig.

Ist es natürlich nicht. Denn eine ID darf es auf einer Website natürlich mehrmals geben. Und man benutzt ja in der Regel ein Stylesheet für alle Seiten.

Also kann es durchaus ein ul#navi_list und ein dd#navi_list geben. Ich halte diese Schreibweise sogar für eher saubereren Stil, weil man dann nicht versehentlich ein falsches Element formatiert. Ich gebe sowas auch gerne so genau wie möglich an.
"div#test ul#foo li#bar span" würde ich eher schreiben, als "li span".

 

[neuroleptika]

Mh,
darüber müßte ich mal nachdenken.
Wenn ich eine id nur für bestimmte Seiten mit css ansprechen will, benutze ich die id von body.

#body_kontakt #foo #bar span {..}