"float:left" zerstört meine Zentrierungsmanöver!

von **apologet** » 05.08.2006, 23:52

Hallo liebe Forum-Leute!

Bei mir happert's mit dem Boxen-System...offenbar gilt da nämlich die Regel, dass sobald einmal (und sei es zu unterst in der Hyrarchie) "float:left" verwendet wurde, alle Versuche, Boxen zu zentrieren, ignoriert werden.

Das zeigt folgende HTML/CSS-Kombination:

Code: Alles auswählen: <html> <head> <style> #test { position: relative; width: 200px; height: 300px; background:red; } </style> </head> <div id="test"> <div style="margin: auto auto auto auto; width:100px; background:blue; float:left"><a href="#">hallo</a></div> </div> <body> </body> </html>

Die blaue Box ist im Browser linksbündig in der roten verschachtelt. Sobald man nun die Eigenschaft "float:left" wegnimmt, erscheint die blaue Box jedoch zentriert (meinem eigentlichen Wunsch entsprechend). Offenbar ist float eine starke Eigenschaft – ist diese Priorität dennoch irgendwie anzufechten?? Bzw. wie bekomme ich die blaue Box trotz "float:left" zentriert?

Bin froh um jeden Ansatz!
Gruss, Balz

von **Laus** » 06.08.2006, 08:48

Hallo

Die blaue Box ist im Browser linksbündig in der roten verschachtelt. Sobald man nun die Eigenschaft "float:left" wegnimmt, erscheint die blaue Box jedoch zentriert (meinem eigentlichen Wunsch entsprechend).

Warum und für was benötigst du den "float:left". Seine Eigenschaft wird eigentlich aus dem Namen her schon deutlich, eben dieses Floaten links vom anderen Inhalt. Float und Zentrieren ist normalerweise nicht miteinander vereinbar.

offenbar gilt da nämlich die Regel, dass sobald einmal (und sei es zu unterst in der Hyrarchie) "float:left" verwendet wurde, alle Versuche, Boxen zu zentrieren, ignoriert werden.

Mache dich Bitte mit den Grundlagen von CSS vertraut. In CSS gibt es eigentlich keine Hierarchieen.

von **apologet** » 06.08.2006, 13:09

Okay da habe ich mich vielleicht etwas vage ausgedrückt...

Beim HTML/CSS-Code ist einfach mal davon auszugehen, dass ich dieses "float:left" brauche. Eigentlich wollte ich die blaue Box zentrieren und deren Inhalt links floaten, aber offenbar geht das nur, wenn ich ein weiteres DIV verwende – etwa so:

Code: Alles auswählen: <div id="test"> <div style="margin: auto auto auto auto; width:100px; background:blue"><div style="float:left; background: green;"><a href="#">hallo</a></div></div> </div>

Okay es ist mir nun eigentlich alles klar, sorry fürs komplizierte Ausdrücken! Danke trotzdem ;-)

Gruss, Balz

von **Laus** » 06.08.2006, 14:08

Hallo

Du brauchst eigentlich kein weiteres div um den Inhalt zu floaten. Float kann man auf alle Inline Elemente anwenden, wie zB.: <hx> <p> <ul> <ol> <img> usw. Du kannst also dein div Zentrieren und den Inhalt dann deinen Vorstellungen entsprechend floaten lassen, dabei aber das clearen nicht vergessen.

Xaver

von **apologet** » 06.08.2006, 15:35

Danke für deine Antwort!
Ich post dir gleich mal einen konkreten Code – es geht darum eine UL-Liste zu zentrieren, wobei aber zu beachten ist, dass sie LI's links gefloatet sind. Ist sowas möglich?? die Breite der Liste scheint standardmässig 100% anzunehmen, da hilft selbst width:auto nix!
Ich hab für dieses Problem bereits Stunden vergeudet...

Code: Alles auswählen: <html> <head> <style> #test { position: relative; width: 400px; height: 300px; background:red; } #test ul{ list-style: none; border: 1px solid blue; height: 20px; padding: 0px; margin: 0 auto; width:400px; clear:left; } #test li{ float:left; width: 40px; background: yellow; padding: 0px; } </style> </head> <body> <div id="test"> <ul id="testul"> <li>eins</li> <li>zwei</li> <li>drei</li> </ul> </div> </body> </html>

Bin froh um nen Tip! Thanx a lot!
Gruss, Balz

von **Laus** » 06.08.2006, 17:15

Hallo

Dazu brauchst du kein float, das geht mit display:inline; das die Ausgabe in einer Zeile erzwingt.

Code: Alles auswählen: #test { width: 400px; height: 300px; background:red; } ul{ list-style: none; border: 1px solid blue; height: 20px; padding: 0 0; margin:0; text-align: center; } li{ display: inline; background: yellow; margin:1px; padding: 0 10px 0 10px; }

Xaver

von **apologet** » 06.08.2006, 17:37

Ja, das stimmt. aber ich brauch dieses float:left im LI! Ich habe so ein Buttonmenü erstellt nach der Façon "Sliding doors" -> http://www.alistapart.com/articles/slidingdoors/ Würde ich den float weglasse, dann fielen die von mir verwendeten Hintergründe auseinander.
Gibt es villeicht doch noch eine Möglichkeit, dieses float zu überlisten?!?

von **Laus** » 06.08.2006, 19:09

Warum sagst du nicht gleich genau was du möchtest und wozu du es brauchst. :wink:

Ersetze das display inline durch float left. Das clear ist aber in ul so wie du es gesetzt hast wenig sinnvoll. Es gehört an das Ende des floats, entweder in ein zusätzliches <tag> oder als after clearing. In deinem Fall kannst du entweder das ul mit margin-left in die Mitte verschieben, was aber nur sinnvoll ist wenn dein umschließender Container eine Feste Breite hat. Oder wie du schon selbst herausgefunden hast einen weiteren Container einfügen den du dann zentrierst. Weitere Maßnahmen hängen immer auch vom verwendeten css und Quellcode ab.

Xaver

von **apologet** » 07.08.2006, 16:15

Danke für deine Antwort!
Ich wusste halt nicht, dass das Problem so tief sitzt :-)

Aber es besteht immer noch: Sobald ein LI links gefloatet wird, scheint das UL eine Breite von 100% zu bekommen (sieht man anhand des blauen Borders). Ich denke, das macht die Sache zum Problem, denn es ist ja logisch, dass man ein 100%-width-Objekt nicht zentrieren kann – es ist ja schon zentriert! Nur der Inhalt ist leider immer noch links ausgerichtet... gibt es keine Möglichkeit das UL auf seine reale Breite "zurückzubrechen", width:0% funkzt nicht und width:auto – wie gesagt – auch nicht.
ich bin ratlos! Ich glaube nicht, dass es funktioniert mit einem weiteren DIV...
was meinst du also?

von **Laus** » 07.08.2006, 17:31

Hallo
Versuchs mal so

Code: Alles auswählen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>CSS-DIV Feldversuch</title> <style type="text/css"> #test { width: 400px; height: 300px; background:red; } * html #testul ul{ height: 25px; } #test ul{ list-style: none; text-align: center; } #test li{ float:left; background: yellow; margin:1px; padding: 0 10px 0 10px; } #center { height: 25px; margin:0 auto; width:220px; background: green; } </style> </head> <body> <div id="test"> <div id="center"> <ul class="testul"> <li>eins</li> <li>zwei</li> <li>drei</li> </ul> </div> </div> </body> </html>

Das ganze ist noch ohne clear aber ein Ansatz zu deinem Problem.

Xaver

von **apologet** » 07.08.2006, 23:17

Ja, das sieht schon besser aus ... aber wenn ich die Breite von #center verändere – ich hätte sie gerne auf 100% bzw. auto – dann ist's auch nicht mehr zentriert (aber auch nicht ganz linksbündig, was immer da noch dazwischen ist...).
Ich geb dir mal meinen Originalcode an:

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Unbenanntes Dokument</title> <style> #menu1_level1 { float: left; width: 640px; height: 45px; font-size: 9pt; line-height:normal; padding:0px 0px 0px 0px; border:1px solid red; } #menu1_level1-cont1 { height: 45px; width: 640px; margin: 0px auto; } #menu1_level1 ul { padding:0px 0px 0px 0px; list-style:none; height: 45px; border: 1px solid blue; text-align: center; margin: 0px; } #menu1_level1 li { float:left; padding:0px 0px 0px 7px; height: 45px; margin:0px; background: yellow; } #menu1_level1 a { display:block; padding:15px 12px 0px 5px; text-decoration:none; font-weight:bold; color:#000; height: 45px; } </style> </head> <body> <div id="menu1_level1"> <div id="menu1_level1-cont1"> <ul> <li id="active"><a href="#">AKTUELLES</a></li> <li><a href="#">LAGER</a></li> <li><a href="#">INHABER</a></li> <li><a href="#">KONTAKT</a></li> </ul> </div> </div> </body> </html>

Vielleicht ging's am einfachsten das Ganze absolut zu positionieren? Aber es scheint mir noch immer der UL zu sein, der nicht tut wie er soll...
Hast du mir noch einen Tipp?? :-)

Dank dir & gruss

von **Laus** » 09.08.2006, 16:23

Versuchs mal so

Code: Alles auswählen: #menu1_level1 ul { padding:0 25%; list-style:none; height: 45px; border: 1px solid blue; text-align: center; margin: 0px; }

Dabei verstehe ich aber immer noch nicht so richtig wozu das float in der Liste brauchst? :coffey:

von **apologet** » 09.08.2006, 23:29

Das klappt nur, wenn du davon ausgehst dass die Breite der "Buttons" nur immer die Hälfte des zu Verfügung stehenden Platzes beanspruchen. Wenn mein übergeordnetes DIV z.B. eine Breite von 640px hat, dann fallen die Buttons in die zweite Reihe sobald die Buttonreihe breiter als 320px ist. In diesem Sinne ist dies keine "nachhaltige" Lösung...

ich brauche das "float:left" in der Liste, weil andernfalls die Hintergründe auseinanderfallen würden ... ich versuche das
Sliding Doors Prinzip zentriert anzuwenden (in allen Beispielen ist die Buttonreihe immer linksbündig und nicht zentriert ausgerichtet). Das Problem wurde übrigens schon mal diskutiert, jedoch ohne Antworten...
http://xhtmlforum.de/36876-sliding-doors-css.html

Ich glaube es hat sich noch keiner vor mir darüber so sehr den Kopf zerbrochen (siehst du, ich bleibe ein Optimist!!

)

von **Laus** » 10.08.2006, 13:43

Hallo

Hast du schon mal Probiert was passiert wenn du deinem übergeordnetem div genau die Breite zuweist die das Menü braucht, dabei im Übergeordneten div das float wieder clearst, und du dieses dann Zentrierst? Ist jetzt zwar etwas schräg ausgedrückt aber ich hoffe du hast das verstanden, also deinen #menu1_level1-cont1.

Xaver

von **apologet** » 11.08.2006, 00:15

nee geht nicht...das Problem bleibt das UL-Element, das nicht heruntergestaucht werden kann. Wenn das nicht geschieht, sind alle weiteren Zentrierungsversuche umsonst.
gruss, Balz

von **apologet** » 15.08.2006, 22:46

Praise the Lord – Ich hab die Antwort!
Folgender Thread hat mich weitergebracht: http://www.flashforum.de/forum/showthread.php?t=180708
Der letzte Beitrag erwähnt die Seite http://www.webreference.com/programming ... yle10.html
Mit den dort im CSS Code verwendeten Workarounds hab ich's hinbekommen!!
So hab ich's umgesetzt

Code: Alles auswählen: #menu1_level1 { } #menu1_level1-sub1 { height: 45px; width: 640px; text-align: center; } #menu1_level1 ul { display:table; padding:0; margin:0 auto; font-family: arial, helvetica, sans-serif; white-space:nowrap; list-style-type:none; } * html #menu1_level1 ul { display:inline-block; width:1px; padding:0 2px; } #menu1_level1 ul li { display:table-cell; padding:0px 0px 0px 7px; height: 45px; margin:0px; } * html #menu1_level1 ul li { display:inline; } #menu1_level1 a { display:block; padding:15px 12px 0px 5px; color:#000; text-decoration:none; font-weight:bold; height: 45px; min-width: 80px; } * html #menu1_level1 a { display:inline-block; margin:0 -2px; } #menu1_level1 a:hover { color:#263D91; }

Und der HTML-Code (Doppelbox nicht nötig):

Code: Alles auswählen: <div id="menu1_level1"> <div id="menu1_level1-sub1"> <ul> <li><a href="#">AKTUELLES</a></li> <li id="active"><a href="#">LAGER</a></li> <li><a href="#">INHABER</a></li> <li><a href="#">KONTAKT</a></li> </ul> </div> </div>

Sogar im Mac IE funktioniert's!! Yeah!! Sliding Doors Menu kann man zentrieren – über CSS-Logik wollen wir hier mal nicht sprechen ;-)

"float:left" zerstört meine Zentrierungsmanöver!

"float:left" zerstört meine Zentrierungsmanöver!

Ähnliche Beiträge zu ""float:left" zerstört meine Zentrierungsmanöver!"

Wer ist online?