DIVS Float:left zentriert ausrichten
1 
Der Martin
0 0 
Matthias Apsel
0 0 0 Der Martin
0 
molily
DIVS Float:left zentriert ausrichten
Hallo zusammen!
Ich quäle mich schon heute den ganzen Vormittag mit dem Zentrierten Ausrichten von Left gefloateten DIV´s rum. Viel gelesen und doch blick ich es nicht. Kurze Beschreibung zu meinem Problem:
ich habe mehrere Divs, mit Float:left. Es sollen immer die maximale Anzahl an DIVS nebeneinander stehen, aber immer zentriert in der Bildschirmmitte.
Zum veranschaulichen hier ein Link (Fenstergröße dann verändern bitte):
momentan steh ich hier:
<html>
<body text=#001c66 style="text-align:center;">
<div style="width:auto; text-align:center;margin-left:10px; margin-right:10px; position:relative; overflow: hidden; background-Color:black;">
<div style="display: table-cell; overflow: hidden; background-Color:orange; margin-left:auto; margin-right:auto;">
<div style='float:left; position:relative; margin-top:10px; margin-left: 2px; width:200px; height:80px; background-Color:red;'></div>
<div style='float:left; position:relative; margin-top:10px; margin-left: 2px; width:200px; height:80px; background-Color:red'></div>
<div style='float:left; position:relative; margin-top:10px; margin-left: 2px; width:200px; height:80px; background-Color:red'></div>
<div style='float:left; position:relative; margin-top:10px; margin-left: 2px; width:200px; height:80px; background-Color:red'></div>
<div style='float:left; position:relative; margin-top:10px; margin-left: 2px; width:200px; height:80px; background-Color:red'></div>
<div style='float:left; position:relative; margin-top:10px; margin-left: 2px; width:200px; height:80px; background-Color:red'></div>
<div style='float:left; position:relative; margin-top:10px; margin-left: 2px; width:200px; height:80px; background-Color:red'></div>
<div style='float:left; position:relative; margin-top:10px; margin-left: 2px; width:200px; height:80px; background-Color:red'></div>
<div style='float:left; position:relative; margin-top:10px; margin-left: 2px; width:200px; height:80px; background-Color:red'></div>
</div>
</div>
</body>
</html>
Vielen Dank für eure hilfe...
-
Hallo,
ich habe mehrere Divs, mit Float:left. Es sollen immer die maximale Anzahl an DIVS nebeneinander stehen, aber immer zentriert in der Bildschirmmitte.
dann ist float vielleicht gar nicht so günstig. Ich würde die einzelnen div-Elemente eher mit display:inline-block versehen und dem umgebenden Container ein text-align:center geben.
<div style="display: table-cell; overflow: hidden; background-Color:orange; margin-left:auto; margin-right:auto;">
Wieso background-color mit großem 'C'? Aber immerhin konsequent. ;-)
Und was versprichst du dir von display:table-cell?Und inline-CSS (also in einem style-Attribut möchte man normalerweise tunlichst vermeiden. Gerade hier, wo mehrere gleichartige Elemente mit gleichen CSS-Eigenschaften aufeinanderfolgen, ist der Vorteil eines zentralen Stylesheets unübersehbar.
Ciao,
Martin--
Zwei Dinge sind unendlich: Das Universum und die menschliche Dummheit. Beim Universum bin ich mir aber nicht ganz sicher.
(Albert Einstein, deutscher Physiker)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo,
ich habe mehrere Divs, mit Float:left. Es sollen immer die maximale Anzahl an DIVS nebeneinander stehen, aber immer zentriert in der Bildschirmmitte.
dann ist float vielleicht gar nicht so günstig. Ich würde die einzelnen div-Elemente eher mit display:inline-block versehen und dem umgebenden Container ein text-align:center geben.
Float deswegen, weil es eine unterschiedliche Anzahl an Elementen nebeneinander ermöglicht, die durch die Fenstergröße bestimmt wird. Wenn die DIV Elemente mit Display:inline-block versehen werden, verhalten sie sich gleich wie geloatete Elemente?
<div style="display: table-cell; overflow: hidden; background-Color:orange; margin-left:auto; margin-right:auto;">
Wieso background-color mit großem 'C'? Aber immerhin konsequent. ;-)
Ich bin heute ganz konfus von dem was ich alles gelesen und getestet habe :)
Und was versprichst du dir von display:table-cell?
Auch das mit dem Tabel-Cell habe ich irgendwo in einem Beitrag gelesen, was aber auch nicht geholfen hat.. *rolleyes*
Und inline-CSS (also in einem style-Attribut möchte man normalerweise tunlichst vermeiden. Gerade hier, wo mehrere gleichartige Elemente mit gleichen CSS-Eigenschaften aufeinanderfolgen, ist der Vorteil eines zentralen Stylesheets unübersehbar.
Seh ich auch so, doch habe ich auf die schnelle das ganze kurz gehalten und copy-paste gemacht, wenn ich es geblickt habe, mach es auch in hübsch! ;)
Merci schon mal :) Yoko
Ciao,
Martin-
Om nah hoo pez nyeetz, Yoko!
Float deswegen, weil es eine unterschiedliche Anzahl an Elementen nebeneinander ermöglicht, die durch die Fenstergröße bestimmt wird. Wenn die DIV Elemente mit Display:inline-block versehen werden, verhalten sie sich gleich wie geloatete Elemente?
http://bittersmann.de/articles/inline-block/
Matthias
-
Om nah hoo pez nyeetz, Yoko!
Float deswegen, weil es eine unterschiedliche Anzahl an Elementen nebeneinander ermöglicht, die durch die Fenstergröße bestimmt wird. Wenn die DIV Elemente mit Display:inline-block versehen werden, verhalten sie sich gleich wie geloatete Elemente?
http://bittersmann.de/articles/inline-block/
Matthias
YEP! Geht, warum nicht gleich so.. zu erst mit der Kirche ums Dorf fahren.. lol.. irgendwie war ich zu sehr vom dem Float angetan ;) Wir sind jetzt geschieden, ich gehe lieber mit inline um den block :D :D
Merci maximal, Gruß Yoko
PS: gleich kommt das Ergebnis zum anschauen
-
Om nah hoo pez nyeetz, Yoko!
Float deswegen, weil es eine unterschiedliche Anzahl an Elementen nebeneinander ermöglicht, die durch die Fenstergröße bestimmt wird. Wenn die DIV Elemente mit Display:inline-block versehen werden, verhalten sie sich gleich wie geloatete Elemente?
http://bittersmann.de/articles/inline-block/
Matthias
DIV´s ohne Float mit Inline.Block
THX!
-
Hi,
das ist aber noch die Variante mit float (und dem hier wirkungsosen position:relative).
Ciao,
Martin--
F: Wer ist der Herrscher über Wasser, Wind und Wellen?
A: Der Friseur.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi,
das ist aber noch die Variante mit float (und dem hier wirkungsosen position:relative).
Ciao,
Martin<html> <style> div.elem { display:inline-block; margin-top:10px; margin-left: 2px; width:200px; height:80px; background:red; } </style> <body text=#001c66 style="text-align:center;"> <div class="elem"></div> <div class="elem"></div> <div class="elem"></div> <div class="elem"></div> <div class="elem"></div> <div class="elem"></div> <div class="elem"></div> <div class="elem"></div> <div class="elem"></div> </body> </html> ~~~> vielleicht warst du schneller als ich die Datei auf den Server gespielt habe, doch so sieht´s aus-
Hallo,
DIV´s ohne Float mit Inline.Block
das ist aber noch die Variante mit float (und dem hier wirkungsosen position:relative).vielleicht warst du schneller als ich die Datei auf den Server gespielt habe, doch so sieht´s aus
wo immer du das auf deinem Webspace liegen hast - unter der oben zitierten URL erreiche ich immer noch die ursprüngliche Fassung mit den floats und den vielen inline-Styles.
Nein, kein Irrtum durch Browser-Cache, denn wget sieht dasselbe.Solltest du die neue Fassung auch unter neuem namen abgelegt haben, ist das gut - so kann man vorher/nachher direkt vergleichen. Dann solltest du aber auch die neue URL zusätzlich angeben. :-)
Ciao,
Martin--
Ich liebe Politiker auf Wahlplakaten.
Sie sind tragbar, geräuschlos, und leicht wieder zu entfernen.
(Loriot, deutscher Humorist, †2011)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
-
-
-
Hallo,
ich habe mehrere Divs, mit Float:left. Es sollen immer die maximale Anzahl an DIVS nebeneinander stehen, aber immer zentriert in der Bildschirmmitte.
Dann musst du beim Container-Element eine feste Breite setzen, sonst nimmt es den gesamten Platz ein, wodurch sich auch die Floats über die gesamte Breite verteilen.
Mathias
-
Hallo,
ich habe mehrere Divs, mit Float:left. Es sollen immer die maximale Anzahl an DIVS nebeneinander stehen, aber immer zentriert in der Bildschirmmitte.
Dann musst du beim Container-Element eine feste Breite setzen, sonst nimmt es den gesamten Platz ein, wodurch sich auch die Floats über die gesamte Breite verteilen.
Mathias
Hallo,
ich kann (oder möchte) keine feste Breite angeben, da die DIVS immer über die komplette Fensterbreite gehen sollen. wenn das Fenster so in der Breite verkleinert wird, das ein DIV in die nächste Zeile rutscht, ist gewollt. Leider bleibt eben so ein unschöner breiter Rand rechts, weshalb ich auch das ganze dann eben Zentriert haben möchte, damit die Rand links und Rechts gleichmäßig aufgeteilt ist..
Gruß, Yoko-
Hi,
Leider bleibt eben so ein unschöner breiter Rand rechts, weshalb ich auch das ganze dann eben Zentriert haben möchte, damit die Rand links und Rechts gleichmäßig aufgeteilt ist..
Achso, jetzt verstehe ich. Ja, in dem Fall ist display: inline-block und text-align: center angebracht.
Mathias
-
Hi,
Leider bleibt eben so ein unschöner breiter Rand rechts, weshalb ich auch das ganze dann eben Zentriert haben möchte, damit die Rand links und Rechts gleichmäßig aufgeteilt ist..
Achso, jetzt verstehe ich. Ja, in dem Fall ist display: inline-block und text-align: center angebracht.
Mathias
YEP! Geht, warum nicht gleich so.. zu erst mit der Kirche ums Dorf fahren.. lol.. irgendwie war ich zu sehr vom dem Float angetan ;) Wir sind jetzt geschieden, ich gehe lieber mit inline um den block :D :D
Merci maximal, Gruß Yoko
PS: gleich kommt das Ergebnis zum anschauen
-
Om nah hoo pez nyeetz, yoko!
Wir sind jetzt geschieden, ich gehe lieber mit inline um den block :D :D
... und lässt künftig diese überflüssigen Vollzitate.
Matthias
-
Hallo,
Wir sind jetzt geschieden, ich gehe lieber mit inline um den block :D :D
... und lässt künftig diese überflüssigen Vollzitate.und erst recht die doppelten.
Ja, das wäre sehr nett.Ciao,
Martin--
... und der FDP-Wähler gibt seine Stimme der FDP.
(Faszinierende Erkenntnis meines Gemeinschaftskunde-Lehrers, 9. Schuljahr)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
-
