CSS - horizontale Listen zentrieren :: webwork-community.net

Forum » Auszeichnungssprachen » CSS - horizontale Listen zentrieren

Antworten

CSS - horizontale Listen zentrieren

Herr_Zatacke

Otto-Normal-Poster

Beiträge: 90

Erstellt am: 19.05.2005 21:13

Scheint so, als wäre ich nie fertig mit meiner Arbeit.

Versuche grade meine Navigation in eine horizontale Liste umzubauen.

Ich gebe den <li>'s float:left, damit sind sie einzeilig.
Jetzt hapert's aber am zentreieren, denn die <li>'s floaten ja jetzt nach links...
Wie kann ich jetzt also die Navigationszeile, die ja ein <ul> ist, zentrieren, ohne sie irgendwie wieder in einen <div> zu packen ???

width:auto; margin:auto; funktionieren nicht ... :(

Dazu zu sagen ist auch noch, dass die Navigationselemente in ihrer Anzahl variieren (wenn der Admin eingeloggt ist, sind's 2 mehr)

---
wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät...

Profil Editieren Zitieren

nisita

Posting-Schinder

Beiträge: 553

Erstellt am: 19.05.2005 21:41

zentriere doch das ul ... einfach mit margin: 0 auto;
das darumliegende div bzw. block element, muss natürlich eine feste breite haben, ansonsten geht es natürlich nicht...

mfg
nisita

---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

Profil Editieren Zitieren

Herr_Zatacke

Otto-Normal-Poster

Beiträge: 90

Erstellt am: 20.05.2005 04:08

Hmm. Das darumliegene Element ist <body> ... hat auch ne feste Breite. oder geht das nicht mit <body>?
(ich will doch die <div>-Suppe auslöffeln ;) )

---
wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät...

Profil Editieren Zitieren

nisita

Posting-Schinder

Beiträge: 553

Erstellt am: 20.05.2005 09:52

das mit dem darumliegenden blockelemt und der festen größe war quatsch.. es muss nur das ul element eine feste breite haben, und dann geht das schon...
für body kann man auch eine feste breite angeben, aber brauchst du ja nicht..

viel spass noch mit der div-suppe

---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

Profil Editieren Zitieren

Herr_Zatacke

Otto-Normal-Poster

Beiträge: 90

Erstellt am: 20.05.2005 16:41

Das funktioniert aber leider nur wenn ich der Liste eine feste Grösse gebe. - Hab ich jetzt auch gemacht und die variablen (Admin-)Elemente in eine eigene Liste gesteckt.

Allerdings hab ich jetzt das gleiche Problem mit variabler Höhe

hier mal das Beispiel:
http://test.furx.de/muster.php

Es geht um die Liste unter der Überschrift '<h2 class="middle">'
Hier können statt den momentanen 4 <li>'s bis zu 15 stehen.
Die <li>'s floaten links und springen perfekt in die nächste Zeile.
Allerdings muss bei einer nicht durch 5 teilbaren Anzahl die Linie rechts gezogen werden, welche die border-right: der <ul> ist. Leider passt sich das <ul> in der höhe nicht an. height:auto; macht das ganze 0 Pixel hoch.

Meine Lösungsansätze:
1) Ein umschliessendes <div> um jede einzelne Zeile (=definierte Höhe) welches die Linie macht. (bzw eine liste die jeweils nur aus maximal 5 <li>-Elementen besteht.
2) Auffüllen der Zeile mit "leeren" <li></li> bis zum ende jeder Zeile.
3) Die Höhenangabe für <ul> per PHP einfügen (class="$zeilenzahl")

Leider gefallen mir die Ansätze alle nicht so wirklich, drum hoffe ich jemand von euch hat da ne bessere Idee.

---
wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät...

Diese Nachricht wurde geändert von: Herr_Zatacke

Profil Editieren Zitieren

nisita

Posting-Schinder

Beiträge: 553

Erstellt am: 20.05.2005 20:26

das problem sind die floats, die nicht so schließen, wie man sich das eigentlich wünscht.. deswegen muss ein "clearendes" element vor das </ul>... es gibt zwar schon lösungswege das per css zu lösen, die sind allerdings unter aller sinnhaftigkeit...

also, mach einfach ein <li class="clear"></li> nach dem letzten richtigen listen eintrag, und gib der class clear die eigenschaft clear:both;

ich weiß, das ist alles nicht so das, was man wirklich haben will, aber das geht nicht anders... blödes float...

dann nimm die höhe für das ul element komplett raus, und das ul element wird sich an die <li>s anpassen..

hier noch ein link um das nur per css zu lösen:
http://www.orderedlist.com/articles/clearing_floats_fne
http://www.positioniseverything.net/easyclearing.html

mich würde gerne efchens meinung dazu interesieren, wie man die gesamte sache besser lösen könnte.. da efchen eher der markup-typ ist, und für ihm das auch wichtiger ist, als wie es letzendlich aussieht (denke ich mal, und ist ja auch nicht schlimm.. ;) )

mfg
nisita

---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

Profil Editieren Zitieren

Herr_Zatacke

Otto-Normal-Poster

Beiträge: 90

Erstellt am: 21.05.2005 14:30

nisita schrieb am 20.05.2005 20:26
also, mach einfach ein <li class="clear"></li> nach dem letzten richtigen listen eintrag, und gib der class clear die eigenschaft clear:both;

So hab ich's jetzt mal gemacht. Mal schauen ob ich noh ne andere Lösung finde...

---
wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät...

Profil Editieren Zitieren

Herr_Zatacke

Otto-Normal-Poster

Beiträge: 90

Erstellt am: 21.05.2005 15:17

Geht doch nicht .... :(
Der IE macht da Mist mit dem zusätzlichen <li>.

Jetzt mach ich's über ne zusätzliche Klasse die die Höhe definiert

1:	"<ul class=\"bilder z" . ceil((mysql_num_rows($result)/$bilder_pro_zeile)) . "\">\n"

und

1: 
2: 
3: 
4:

ul.z1 { height:130px; }
ul.z2 { height:260px; }
ul.z3 { height:390px; }
ul.z4 { height:520px; }

---
wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät...

Profil Editieren Zitieren

	Antworten