nicht angemeldet
Problem mit float:
Hallo,
ich habe hier folgenden Test, bei dem einiges schief läuft. Im FF2 wird der grüne Kasten gar nicht dargestellt, im IE6 ist vor dem grünen Kasten eine 1 Pixel breite Spalte. Weiß jemand, warum?
<html>
<head>
<style type="text/css">
<!--
#gelb {
float:left;
padding:0px;
margin:0px;
border:0;
height:150px;
width:150px;
background-color:#FFFF00;
}
#rot {
float:left;
border:0px;
margin:0px;
padding:0px;
height:30px;
width:300px;
background-color:#FF0000;
}
#gruen {
padding:0px;
margin:0px;
border:0px;
height:30px;
width:200px;
background-color:#00FF00;
}
#blau {
float:left;
padding:0px;
margin:0px;
border:0px;
height:40px;
width:80px;
background-color:#0000FF;
}
-->
</style>
</head>
<body>
<div id="gelb"></div>
<div id="rot"></div>
<div id="gruen"></div>
<div id="blau"></div>
</body>
</html>
-
wie sollen sie denn floaten?
bei mir liegt grün hinter rot und gelb (FF2)-philipp
-
ich habe hier folgenden Test, bei dem einiges schief läuft. Im FF2 wird der grüne Kasten gar nicht dargestellt
#rot {
float:left;
height:30px;
width:300px;
}
#gruen {
height:30px;
width:200px;
}<div id="rot"></div>
<div id="gruen"></div>Der grüne Kasten wird vollständig vom roten überdeckt, dass er nicht zu sehen ist, ist also nur logisch.
im IE6 ist vor dem grünen Kasten eine 1 Pixel breite Spalte.
Angesichts der Tatsache, dass der grüne überhaupt nicht zu sehen sein dürfte, ist die Spalte davor das kleinere Übel.
Der IE 6 hat mit der float-Eigenschaft so seine Probleme. Solange nicht alles auseinanderfällt und die Seiten unbenutzbar werden: Nicht beachten und Nutzer aktiv auf den IE 7 und andere Alternativen hinweisen. Andernfalls mit der IE7-Bibliothek die Fehler umschiffen.
-
Hallo,
vielen Dank für die schnelle Antworten.
Dann habe ich den float-Befehl wohl nicht ganz verstanden. Ich dachte float:left bedeutet, dass nachfolgende Elemente dann rechts davon angeornet werden. float:left steht beim roten Kasten, der grüne ist der folgende.
Gruß
Melanie
-
wenn rot - grün - blau untereinander rechts neben gelb stehen sollen,
würde ich diese drei in einem neuen div nesten und diesen einfach auf float left stellen, muss man sehen, was IE dazu sagt, aber so umgehst du schonmal ein paar probleme.p.s. wenn danach noch inhalt darunter stehen soll, also wieder ganz links musst du den float wieder aufheben, z.b. mit einer clear: both bzw. right anweisung im letzten element des floats.
philipp
-
Ich dachte float:left bedeutet, dass nachfolgende Elemente dann rechts davon angeornet werden.
Nein, nicht ganz. Ein float-Element wird aus dem normalen Layoutprozess herausgenommen, alle nachfolgenden Blockelemente (grob: Elemente die einen eigenen Absatz bilden, <p>, <hn>, <div> und dergleichen) benehmen sich daher so, als wenn das float-Element nicht vorhanden wäre. Anders die in diesen Blockelementen vorhandenen Textzeilen, nur diese schmälern sich so, dass das float-Element Platz hat.
In http://www.w3.org/TR/REC-CSS2/visuren.html#floats ist das Verhalten genau beschrieben. Das zweite Bild dort verdeutlicht den Prozess recht gut: Die beiden rot umrandeten Absätze haben ganz normale Abmessungen, lediglich die Zeilen darin werden durch das float-<img> verschoben.
-
-
-
Hallo,
das waren jetzt ein paar wertvolle Hinweise, mit denen ich weiterforschen kann.
Vielen Dank!
Schönes Wochenende!
Gruß
Melanie