Grundverständnis float
0 
Detlef G.
0
Grundverständnis float
Hallo
Ich habe folgenden einfachen XHTML Code:
....
<body>
<div id="div_center">
<div id="div_background"><img src="images/bg_1.gif" alt="" width="971" height="19" /><img src="images/bg_2.jpg" alt="" / width="971" height="621" /><img src="images/bg_3.gif" alt="" width="971" height="19" /></div>
</div>
</body>
....
Dazu dieses CSS:
* {
margin: 0px;
padding: 0px;
}
#div_background {
width: 971px;
z-index: 1;
}
#div_center {
margin: 0 auto;
width: 971px;
}
Während der IE die 3 Bilder nahtlos untereinander darstellt, machen Firefox und Opera einen Abstand zwischen den Bildern. Zwar habe ich schon rausgefunden, dass wenn ich den Bildern die Eigenschaft float:left gebe, es auch im Firefox und Opera funktioniert.
Nur ist mir absolut nicht klar, weshalb die beiden Browser diese Angabe benötigen? Ein img Tag ist doch ein Inline Element und sollte keinen Umbruch erzeugen?
Was hab ich denn Grundsätzliches nicht kappiert?
Danke
-
Hallo Marc
Während der IE die 3 Bilder nahtlos untereinander darstellt, machen Firefox und Opera einen Abstand zwischen den Bildern.
Die Bilder sind Inlineelemente. Sie werden genauso, wie Buchstaben auf der Grundlinie angezeigt. Dabei wird der Platz für die Unterlängen mancher Buchstaben (g, j, p, q, y) mit berücksichtigt.
Zwar habe ich schon rausgefunden, dass wenn ich den Bildern die Eigenschaft float:left gebe, es auch im Firefox und Opera funktioniert.
Durch float:left bekommt das Bild Blockstatus, genauso wie durch display:block, es befindet sich dann nicht mehr in einer Textzeile.
Du kannst ihnen auch einen passenden Wert zur vertikale Ausrichtung geben.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef
Vielen Dank für die klare und leicht verständliche Antwort. Ich hab's kapiert und nun ist mir dieses Thema schon mal klarer...
Gruss
Marc
-
-
Dazu dieses CSS:
* {
margin: 0px;
padding: 0px;
}hei, schreib doch ohne px, also - margin:0; padding:0
Gruss