CSS - horizontale Listen zentrieren |
Herr_Zatacke
Otto-Normal-Poster Threadstarter
Beiträge: 90 |
Scheint so, als wäre ich nie fertig mit meiner Arbeit.
Versuche grade meine Navigation in eine horizontale Liste umzubauen.
Ich gebe den 's float:left, damit sind sie einzeilig.
Jetzt hapert's aber am zentreieren, denn die 's floaten ja jetzt nach links...
Wie kann ich jetzt also die Navigationszeile, die ja ein ist, zentrieren, ohne sie irgendwie wieder in einen 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: 540 |
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 Threadstarter
Beiträge: 90 |
Hmm. Das darumliegene Element ist ... hat auch ne feste Breite. oder geht das nicht mit ?
(ich will doch die -Suppe auslöffeln ;) )
---
wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät... |
 Profil
Editieren
Zitieren
|
nisita
Posting-Schinder
Beiträge: 540 |
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 Threadstarter
Beiträge: 90 |
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 ' '
Hier können statt den momentanen 4 's bis zu 15 stehen.
Die '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 |
 Profil
Editieren
Zitieren
|
nisita
Posting-Schinder
Beiträge: 540 |
das problem sind die floats, die nicht so schließen, wie man sich das eigentlich wünscht.. deswegen muss ein "clearendes" element vor das ... es gibt zwar schon lösungswege das per css zu lösen, die sind allerdings unter aller sinnhaftigkeit...
also, mach einfach ein 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 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 Threadstarter
Beiträge: 90 |
nisita schrieb am 20.05.2005 20:26
also, mach einfach ein 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 Threadstarter
Beiträge: 90 |
Geht doch nicht .... :(
Der IE macht da Mist mit dem zusätzlichen .
Jetzt mach ich's über ne zusätzliche Klasse die die Höhe definiert
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
|