HTML/CSS UL/DIV Element dynamischer Breite zentrieren?

[Exit]

Ich habe auf einer ASP.NET Seite eine horizontale Navigation (ul - Liste) welche ich zentrieren möchte.

Hier die Seite: Carisma - Misubishi Carisma

Gemeint ist die Navigation: 2001 | 2002 | 2003 usw.

Diese ist per CSS erstellt und wird dynamisch aus einer Datenbank aufgebaut.

Ich möchte nun, dass diese eben zentriert und nicht wie aktuell linksbündig erscheint, weiß aber beim besten nicht wie ich das anstellen soll, da die Breite der Liste eben unbekannt ist und sich erst durch die Anzahl der Listeneinträge ergibt.

Bisher gefundene Beispiele gehen leider immer davon aus, dass die Breite fest vorgegeben ist - was bei mir eben leider nicht der Fall ist.

Kann mir da vielleicht jemand auf die Sprünge helfen?

PS: Das ganze soll natürlich W3C konform sein. Aktuell verwende ich: XHTML 1.0 Transitional

MfG Exit

[[EID]-Mr.GiZMO]

Hi,
normalerweise würde ich die Seite und die div's mal analysieren, aber da du Ahnung hast geb' ich mal nur den Hinweis, dass ein div mit

margin: auto auto;

zentriert werden kann (das erste auto für vertikal, das zweite horizontal). Daher könnte es bei dir style="margin: 0 auto;" heißen.

Sag mal bescheid, obs geklappt hat.
Gruß

[Exit]

Habe es noch nicht probiert - aber das funktioniert meines Wissens eben nur, wenn man die Breite des DIV (UL) Containers vorher weiß und fest definiert.

Aber ich werde es heute abend mal probieren.

PS: Grad noch gesehen - mit dem IE6 zeigt er auch noch Müll bei der Navigation an - das muss ich ihm auch noch abgewöhnen.

[Exit]

Wie schon befürchtet - das ganze funktioniert leider nur, wenn der Container selbst auch eine vordefinierte Breite hat - entspricht also nicht dem reinen "text-align" - welches ja leider nur auf text und nicht auch div & co wirkt.

Habe es erstmal mit ner festen Breite versehen - damit es brauchbar aussieht.

Falls trotzdem noch einer mal ne Idee hat - dann nur her damit.

Vielen Dank trotzdem

[Lookover]

Ich habe genau das gleiche Problem.
Und ich finde diese Frage sehr oft in verschiedenen Foren und nirgends gibts eine tatsächliche Antwort.

Ist denn dieses Problem nicht lösbar ?
Wie kann man die beschriebene Anforderung umsetzen ??
Weiß das keiner ?
geht das nicht ?
können das die viel gepriesenen Divs nicht?

zu Table-zeiten war diese Frage überhaupt kein Thema !!

lg aus Wien
www.lookover.at

[mondrian]

Zitat von Lookover

können das die viel gepriesenen Divs nicht?

zu Table-zeiten war diese Frage überhaupt kein Thema !!

Eigentlich sollte es mit Divs klappen, jedoch wird manchmal noch ein zusätzlicher Container mit Eigenschaften benötigt. Die Situation bessert sich aber sowieso schon etwas mit der Zeit, da der Explorer 6 zunehmend weniger genutzt wird und nicht unbedingt optimal bedient werden muß.

Neuere Browser bieten umfangreichere CSS-Möglichkeiten wie z.B. display:inline-block; oder display:table;.

Mehr zum Thema Zentrieren: http://pernox.de/2009/04/zentrieren-per-css.html

[sofl]

Für die horizontale Zentrierung mit CSS, kam mir des öfteren dieses simple "Template" zur Hilfe -> http://bluerobot.com/web/css/center1.html.

display:inline-block wird meines Wissens im IE nicht erkannt und CSS expressions funktionieren auch nur dann wenn sich der IE im Quirks-Modus befindet.

Optional könnte man die Elemente beim Laden mit JS nachträglich zentrieren obwohl das wohl eher die russiche Variante ist.

lg

[Lookover]

Hallo,...

Also ich habe nun alle für mich relevanten Anforderungen dieses Thema betreffend relativ cool gelöst und auf dieser Seite zusammengefasst:

dynamische Divs horizontal zentrieren

Da ist wie ich meine recht übersichtlich inklusive kompakten Beispielen die Thematik aus meiner Sicht erklärt.

Ich hoffe es bringt jemanden was.

lg aus Wien
www.lookover.at

[magr]

wtf iss ja von 2008

aber ich bin ja nicht der einzigste der der 3 jahre später antwortet^^

<center>
<ul>
<li>2001</li>
<li>2002</li>
</ul>
</center>

[sofl]

Fehlt da nicht noch die inline definition für die li's? Außerdem sind center tags ja mittlerweile sowas von veraltet (html4 standard). Grade wenn man die Seite mal auf html5 "upgraden" will..

The <center> Tag. Not Supported in HTML5.
Definition and Usage

The <center> tag is not supported in HTML5. Use CSS instead.

The <center> tag was used to center align text and content.

[magr]

aber es funktioniert und ist nicht so aufwendig, jeder wie er will...

[DonSchado]

Zitat von magr

aber es funktioniert

nope, je nach DocType und Browser eben nicht
und <center> ist wirklich eher 90er

Positionierung lässt sich leicht per CSS bewerkstelligen.
Folgendes Tutorial sollte eigentlich alle Fragen klären:

Horizontal Centering - CSS Tutorials - hasLayout.net by Zoffix Znet

Lg

[apfelfan]

Mit CSS lässt sich doch alles leicht zentrieren.
Die gute alte Anweisung die auch in allen Browsern läuft ist margin: 0 auto;

[Exit]

Hm - nimms mir nicht übel, aber der Thread ist so kurz, da kann man den wirklich noch überfliegen.

"margin: 0 auto; " funktioniert leider nur mit festen Breiten! Des bedeutet, man muss vorher definieren (wissen), wie breit das zu zentrierende Element ist.

Das wollte ich ja damals vermeiden, da eben Jahr um Jahr dazu kommen. Aber da man das auch nur einmal im Jahr macht, kann man den optimalen Wert ja auch festlegen. Wenn es dynamisch aus ner DB gekommen wäre, hätte ich wohl (Jahre * Elementbreite) zur Berechnung verwendet.