nicht angemeldet
Verschachtelte Floats im IE - Priorität änderbar?
0 0 0 0 
Gernot Back
Verschachtelte Floats im IE - Priorität änderbar?
Hallo zusammen,
ich hab da mal ein sehr konkretes Problem. Auf meiner Seite habe ich Container-Divs die mehrere Inhalt-DIVs beinhalten sollen.
Es sollen sowohl die Container, als auch die Inhalte mit float:left "floaten". Das funktioniert auch wunderbar. Ich habe keine (und darf auch nicht) festen Größenangaben für die Elemente. Es gilt lediglich, dass die Inhalt-DIVs alle gleich groß sind.
In meinem Beispiel habe ich 2 Container-DIVs mit jeweils 2 Inhalts-DIVs. Nun verändere ich die Fenstergröße. Die Containerelemente springen entsprechend des vorhandenen Platzes um. Wird das Fenster sehr schmal, brechen auch innerhalb eines Containers die Inhalts-DIVs jeweils um. So weit so gut.
Wenn ich nun allerdings das Fenster bis zu der Größe bringe, dass 3 Inhalts-DIVs in eine zeile passen, passieren in den Brwosern unterschiedliche Dinge.
Im IE (7 und 8) habe ich nun folgendes Verhalten:
|--------------| |--------|
| | | |
| |--| |--| | | |--| |
| |I1| |I2| | | |I1| |
| |--| |--| | | |--| |
| | | |
|--------------| | |--| |
| |I2| |
| |--| |
| |
|--------|
Mozilla, Chrome & Safari blenden den 2. Container erst in die obere Zeile um, wenn beide Inhaltselemente dort Platz finden. Sieht also wie folgt aus:
|--------------|
| |
| |--| |--| |
| |I1| |I2| |
| |--| |--| |
|--------------|
| |
| |--| |--| |
| |I1| |I2| |
| |--| |--| |
Fenster wird größer (bis alle 4 Inhalts-DIVs in eine Zeile passen):
|--------------| |--------------|
| | | |
| |--| |--| | | |--| |--| |
| |I1| |I2| | | |I1| |I2| |
| |--| |--| | | |--| |--| |
| | | |
|--------------| |--------------|
Wie bekomme ich nun im IE eben dieses zuletzt beschriebene Verhalten hin? Kann man irgendwie die Priorität des "äußeren Floats" heraufsetzen, á la !important ? Mir gehen langsam die Ideen aus, und ich möchte ungern zu einen Tabellenlayout zurückkehren.
Vereinfachter Quellcode zum nachvollziehen:
<html>
<head>
<title>display</title>
<style type="text/css">
.containerDiv { float: left;
border: solid 1px gray;}
.inhaltsDiv { float: left; }
</style>
</head>
<body>
<div class="containerDiv">
<div class="inhaltsDiv">
<span> I1 - Für ein bisschen mehr Breite </span>
</div>
<div class="inhaltsDiv">
<span> I2 - Für ein bisschen mehr Breite </span>
</div>
</div>
<div class="containerDiv">
<div class="inhaltsDiv">
<span> I1 - Für ein bisschen mehr Breite </span>
</div>
<div class="inhaltsDiv">
<span> I2 - Für ein bisschen mehr Breite </span>
</div>
</div>
</body>
</html>
Dank im voraus.
-
Hallo Nils!
Hast du es schon mal mit einer min. Größe versucht? Wäre so das erste was mir einfällt.
Gruß
Haruzept
-
Hallo Nils!
Hast du es schon mal mit einer min. Größe versucht? Wäre so das erste was mir einfällt.
Gruß
Haruzept
Hallo Haruzept,
danke erstmal für die Antwort. Es gibt da leider 2 Probleme:
1. Ich möchte bewusst keine Breitenangaben treffen, da diese variabel sein können. Die Anzahl der Inhaltselemente ist ebenso variabel. In meinem konkreten Problem handelt es sich nämlich eigentlich um die Darstellung von gerenderten Thumbnails und nicht um einfachen text wie im obigen beispiel. Die Bilder können dabei vergrößert und verkleinert werden. Und weil der Inhalt dynamisch ist, muss es die Breite auch sein. Und diese bei dem onresize Event dauerhaft zu berechnen kann auch nicht das Ziel sein.
2. Min-width und der IE sind meines Wissens nach nicht die besten Freunde ;)
Es muss doch irgend eine Möglichkeit geben, den inneren DIVs zu sagen, dass sie "zusammen" gehören...
Ich bin echt ratlos!
-
Habe das ganze auch mal in einer Tabelle integriert ausprobiert.
Mir scheint, dass Microsoft "float" in einer komplett anderen Weise interpretiert.
Hier der Code zum Nachspielen der lustigen Effekte(das Bild einfach erstzen - Originalgröße war 140x140):
<html> <head> <title>display</title> <style type="text/css"> .containerDiv { float: left; border: solid 3px gray; margin: 5px;} .inhaltsDiv { float: left; margin: 5px;} </style> </head> <body> <div class="containerDiv"> <table> <tr> <td> <div class="inhaltsDiv"> <div>1 - 1</div> <img id="viewImg_0_3" name="viewImg" src="thumbs/DSC00001.JPG.png" align="middle" /> </div> <div class="inhaltsDiv"> <div>1 - 2</div> <img id="viewImg_0_3" name="viewImg" src="thumbs/DSC00001.JPG.png" align="middle" /> </div> <div class="inhaltsDiv"> <div>1 - 3</div> <img id="viewImg_0_3" name="viewImg" src="thumbs/DSC00001.JPG.png" align="middle" /> </div> <div class="inhaltsDiv"> <div>1 - 4</div> <img id="viewImg_0_3" name="viewImg" src="thumbs/DSC00001.JPG.png" align="middle" /> </div> </td> </tr> </table> </div> <div class="containerDiv"> <table> <tr> <td> <div class="inhaltsDiv"> <div>2 - 1</div> <img id="viewImg_0_3" name="viewImg" src="thumbs/DSC00001.JPG.png" align="middle" /> </div> <div class="inhaltsDiv"> <div>2 - 2</div> <img id="viewImg_0_3" name="viewImg" src="thumbs/DSC00001.JPG.png" align="middle" /> </div> <div class="inhaltsDiv"> <div>2 - 3</div> <img id="viewImg_0_3" name="viewImg" src="thumbs/DSC00001.JPG.png" align="middle" /> </div> <div class="inhaltsDiv"> <div>2 - 4</div> <img id="viewImg_0_3" name="viewImg" src="thumbs/DSC00001.JPG.png" align="middle" /> </div> </td> </tr> </table> </div> </body> </html>-
Ok, die letztendliche Lösung sieht wie folgt aus:
Ich berechne mit dem onresize Event im IE für jeden Container die Breite und setze diese dann. Somit baue ich mir das Floatverhalten innerhalb eines Containers selbst. Da ich zu jeder Zeit weiss, wie breit ein einzelnes Element ist (sind ja alle gleich groß), kann ich die benötigte Gesamtbreite errechnen. Diese prüfe ich dann gegen die verfügbare Fensterbreite. Ist das Fenster kleiner, ziehe ich so lange Elementbreiten ab, bis die berechnete Breite in das Fenster passt.
War letztendlich doch einfacher als gedacht, aber manchmal sieht man den Wald vor lauter Bäumen nicht.
Danke trotzdem an alle Zuhörer!
-
-
Hallo DerNils,
Die Bilder können dabei vergrößert und verkleinert werden. Und weil der Inhalt dynamisch ist, muss es die Breite auch sein. Und diese bei dem onresize Event dauerhaft zu berechnen kann auch nicht das Ziel sein.
- Min-width und der IE sind meines Wissens nach nicht die besten Freunde ;)
Warum arbeitest du sowohl beim Vergrößern der Bilder als auch beim Skalieren ihrer Container nicht einfach mit den relativen Größen "em" und/oder "%"?
Die biene-preisgekrönte Webseite der Barmer Ersatzkasse macht das ja auch!
Gruß Gernot
--
super me-
Warum arbeitest du sowohl beim Vergrößern der Bilder als auch beim Skalieren ihrer Container nicht einfach mit den relativen Größen "em" und/oder "%"?
Gruß GernotHallo Gernot,
das Problem liegt ja nicht beim Vergrößern. Es geht vielmehr darum, dass scheinbar der IE verschachtelte Floats komplett anders behandelt/interpretiert als andere gängige Browser. Ob falsch oder richtig mag ich gar nicht beurteilen. Oder habe ich dich einfach nur nicht verstanden?
Im obigen vereinfachten Beispiel erkennt man beim Verkleinern des Fensters ganz schnell was ich meine.
Gruß, Nils
-
Hallo Nils,
das Problem liegt ja nicht beim Vergrößern. Es geht vielmehr darum, dass scheinbar der IE verschachtelte Floats komplett anders behandelt/interpretiert als andere gängige Browser. Ob falsch oder richtig mag ich gar nicht beurteilen. Oder habe ich dich einfach nur nicht verstanden?
Du hast zwar Recht, dass der IE hier offensichtlich eine andere Priorität bei ineinander verschachtelten Floats ansetzt, aber du hättest ja auch kein Problem mehr, wenn du der äußeren floatenden Box expolizit eine Weite verpassen würdest, die ausreicht, immer zwei nebeneinander floatende innere Boxen aufzunehmen.
Dazu müsstest du nur beides, innere und äußere Boxen jeweils in relativen Größen zueinander skalieren, dann würde sich der IE -wenn auch aus einem anderen Grund als der Firefox- entsprechend diesem verhalten.
Gruß Gernot
--
super me
-
-
Die biene-preisgekrönte Webseite der Barmer Ersatzkasse macht das ja auch!
Aber der Autor der Barmer-Seite könnte dennoch mal "Using character entities and NCRs" lesen, denn
Redakteure können üblicherweise kein HTML. :)SCNR
-
Hi,
Die biene-preisgekrönte Webseite der Barmer Ersatzkasse macht das ja auch!
hm, aber wozu ich einen Button für die Schriftgrösse brauche, der zudem noch semantisch fragwürdig mit einem dummy-a-tag erzeugt wird... na wenns denn dem Frohsinn dienlich ist.
Gruesse, Joachim
--
Am Ende wird alles gut.
-
-