nicht angemeldet
Grafik fällt aus der Box?
Sup!
Wenn ich nichts als diesen Code auf einer Seite habe (okay... HTML 4.01 transitional doctype), warum fällt dann die Grafik im Netscape 7.0 aus der Box, wenn align="left" gesetzt ist, aber bleibt drin, wenn es nicht gesetzt ist?
<div style="border: 10px solid black;">
<img src="bild.png" align="left">
</div>
Macht ein align-Attribut aus einem Inline-Element irgendwas anderes, oder vertragen sich CSS und align nicht, oder ist das ein Bug, oder gibt es einen guten Grund, der mir nur nicht einfallen will?
Gruesse,
Bio
-
Hallo,
Wenn ich nichts als diesen Code auf einer Seite habe (okay... HTML 4.01 transitional doctype), warum fällt dann die Grafik im Netscape 7.0 aus der Box, wenn align="left" gesetzt ist, aber bleibt drin, wenn es nicht gesetzt ist?
Weil align="left" wie style="float:left;" interpretiert wird und für Floating gilt:
http://www.w3.org/TR/CSS2/visuren.html#floats
...
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.
...Macht ein align-Attribut aus einem Inline-Element irgendwas anderes,
Ja, eine Box, die aus dem normalen Fluss herausgelöst ist.
Hier eine Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Floating</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div style="border: 10px solid black;">
<img src="STONES.JPG" alt="Steine" width="100" height="50" border="0" align="left">
</div>
<hr style="clear:left;">
<div style="border: 10px solid black;">
<img src="STONES.JPG" alt="Steine" style="width:100px; height:50px; border:0 none; float:left;">
</div>
<hr style="clear:left;">
<div style="border: 10px solid black;">
<p style="margin:0; padding:10px;">
<img src="STONES.JPG" alt="Steine" style="width:100px; height:50px; border:0 none; float:left;">
<img src="STONES.JPG" alt="Steine" style="width:100px; height:50px; border:0 none; float:right;">
Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. Dafür ist Floating eigentlich gedacht. </p>
</div>
<hr style="clear:left;">
<div style="border: 10px solid black; height:50px;">
<img src="STONES.JPG" alt="Steine" style="width:100px; height:50px; border:0 none; float:left;">
</div>
</html>viele Grüße
Axel
-
Hallo Axel
Wobei es in deinem dritten Beispiel eigentlich überflüssig ist, den Absatz noch zuätzlich in ein DIV zu packen. Der Border kann auch direkt im P definiert werden.
MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist Weg dahin!
-
-
Hallo Bio,
Macht ein align-Attribut aus einem Inline-Element irgendwas anderes, oder vertragen sich CSS und align nicht, oder ist das ein Bug, oder gibt es einen guten Grund, der mir nur nicht einfallen will?
An einem Bug glaube ich jetzt mal nicht, da sich Mozilla 1.21, Opera 7.2, Explorer 6.0 genauso verhalten. So wie es ausschaut wird das image mit einer expliziten align-Eigenschaft tatsächlich zu einem Block-Element.
AFAIK ist ja ein image erstmal standardmässig align="left", aber evt. vorhandener Text umfliesst das Bild nicht sondern wird einfach "rangehängt". Mit einem align wird das Bild dann vom Text umflossen und verhält sich IMHO wie ein Blockelement mit einem float. Vielleicht ist das die prä-CSS-förmige Art und Weise von Html ein solches Layout umzusetzen?Grüsse AndreD
-
Hello,
und das merkwürdige ist, wenn man dann dem DIV eine Höhe zuweist, geht es wieder.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>IMG im DIV</title>
</head>
<body><div style="border: 10px solid black; height:10px;">
<img src="scheisse.jpg" align="left">
</div>
</body>
</html>Dabei sit das Bild um einiges größer.
Auch wenn das Bild gar nicht gefunden werden kann, ist die Broken-Box dann wieder im Rahmen.Liebe Grüße aus http://www.braunschweig.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen-
Hello,
<div style="border: 10px solid black; height:10px;">
Das will aber leider der Netscape nicht haben.
Muss man eben für jedes IMG ein eigenes DIV spendieren:
<body>
<div style="border: 10px solid black;"><div align="center"><img src="scheisse.jpg"></div>
</div>
</body>So gehte es zumindest in NN7 und IE5.5 / 6.0x
Liebe Grüße aus http://www.braunschweig.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen -
Hi,
und das merkwürdige ist, wenn man dann dem DIV eine Höhe zuweist, geht es wieder.
wieso denn merkwürdig?
Da align wie float wirkt, was weiter unten ja schon gesagt wurde, beeinflußt das Bild die vertikale Höhe der Box nicht; und wenn du diese stattdessen explizit angibst, hat das mit dem Bild doch nichts zu tun...Die Höhe des divs über das Bild zu beeinflussen, geht analog zu float über ein nach <br clear="left"> folgendfes Element vor dem Ende des divs.
freundliche Grüße
Ingo-
Hello,
Hi,
und das merkwürdige ist, wenn man dann dem DIV eine Höhe zuweist, geht es wieder.
wieso denn merkwürdig?
Da align wie float wirkt, was weiter unten ja schon gesagt wurde, beeinflußt das Bild die vertikale Höhe der Box nicht; und wenn du diese stattdessen explizit angibst, hat das mit dem Bild doch nichts zu tun...Dann hast Du mich nicht richtig gelesen. Das merkwürdige ist, dass ich nur "height:1px" schreiben muss, und die Höhe der Box richtet sich wieder nach dem Bild. Allerdings ist das wieder nicht in allen Browsern so.
Es empfiehlt sich meiner Meinung danach, das Bild in ein zusätzliches DIV zu verpacken. Das hatte allerdings bei meiner Page bei einem alten MAC-Browser fatale Auswirkungen. Da klebten dann alle Bilder übereinander in der oberen linken Ecke. Die neueren MAC-Browser können es aber.
Liebe Grüße aus http://www.braunschweig.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen-
Hallo,
Dann hast Du mich nicht richtig gelesen. Das merkwürdige ist, dass ich nur "height:1px" schreiben muss, und die Höhe der Box richtet sich wieder nach dem Bild. Allerdings ist das wieder nicht in allen Browsern so.
Das ist ein IE Bug.
Es empfiehlt sich meiner Meinung danach, das Bild in ein zusätzliches DIV zu verpacken.
Nein, es empfiehlt sich float dafür zu verwenden, wofür es gedacht ist. HTML und CSS beschreiben Hyper-Text-Dokumente. Sie können nicht, wie AWTs, Componetns in GUIs mit Container und Layout-Manager anordnen. Speziell ist ein DIV kein Container, der floatende Elemente enthalten kann. Der einzige Container ist das Browserfenster.
viele Grüße
Axel
-
Hello,
Es empfiehlt sich meiner Meinung danach, das Bild in ein zusätzliches DIV zu verpacken.
Nein, es empfiehlt sich float dafür zu verwenden, wofür es gedacht ist. HTML und CSS beschreiben Hyper-Text-Dokumente. Sie können nicht, wie AWTs, Componetns in GUIs mit Container und Layout-Manager anordnen. Speziell ist ein DIV kein Container, der floatende Elemente enthalten kann. Der einzige Container ist das Browserfenster.Darf man das Image nun in ein eigenes DIV stecken, oder darf man nicht? Ob das die geschickteste Variante ist, ist mir im Moment egal.
Liebe Grüße aus http://www.braunschweig.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen-
Hallo,
Darf man das Image nun in ein eigenes DIV stecken, oder darf man nicht? Ob das die geschickteste Variante ist, ist mir im Moment egal.
Verboten ist es nicht ;-)) Aber was soll damit erreicht werden?
<body>
<div style="border: 10px solid black;">
<div align="left"><img src="bilder/home.gif" width="64" height="64" border="0" alt="Home"></div><p style="margin:0;">Hier ist dann das, was Herumfließen soll, kann aber nicht fließen ;-))</p>
</div>
<div style="border: 10px solid black;">
<div style="float:left"><img src="bilder/home.gif" width="64" height="64" border="0" alt="Home"></div><p style="margin:0;">Hier ist dann das, was Herumfließen soll, fließt zwar, aber mit dem bekannten Problem ;-))</p>
</div>
</body>viele Grüße
Axel
-
Hello,
lass mich mal fummeln, dann klappts *ggg*
<!-- diese Version funktioniert -->
<body>
<div style="border: 10px solid black; float:left; width:200px;">
<div style="align:left; float:left;"><img src="bilder/home.gif" width="64" height="64" border="0" alt="Home"></div>
<p style="margin:0;">Hier ist dann das, was Herumfließen soll,
kann aber doch fließen, wenn Tom daran gefummelt hat *ggg*</p>
</div><!-- diese Version funktioniert nicht -->
<div style="border: 10px solid black; clear:both;">
<div style="float:left;"><img src="bilder/home.gif" width="64" height="64" border="0" alt="Home"></div><p style="margin:0;">Hier ist dann das, was Herumfließen soll, fließt zwar, aber mit dem bekannten Problem ;-))</p>
</div>
</body>Sowohl der umfließende, als auch der umflossene Teil müssen ein float bekommen, dann geht es. Das ist sowohl in Gecko so, als auch in MSIE >=5.0
Könntet Ihr bitte nochmal checken, welche anderen Browser das auch fressen und was der WWWalli dazu sagt? Ich krieg ihn gerade nicht.
Liebe Grüße aus http://www.braunschweig.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen-
Hallo,
<!-- diese Version funktioniert -->
<body>
<div style="border: 10px solid black; float:left; width:200px;">^Ja, mit einer fixen Breite und aus dem normalen Fluss herausgelöst gehts, hat auch keiner was anderes behauptet ;-)). Nein, Du kannst die Breitenangabe nicht weglassen, dass es dann trotzdem geht, ist Fehlertoleranz der Browser. Man kann sich also nicht drauf verlassen. http://www.w3.org/TR/CSS2/visuren.html#floats:
A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).<div style="align:left; float:left;">
^wo ist align als CSS-Eigenschaft definiert?
»»<img src="bilder/home.gif" width="64" height="64" border="0" alt="Home"></div><p style="margin:0;">Hier ist dann das, was Herumfließen soll,
kann aber doch fließen, wenn Tom daran gefummelt hat *ggg*</p>
</div>Das DIV-Element um das Bild ist hiermit aber wieder überflüssig.
<div style="border:10px solid black; float:left; width:200px;">
<img style="float:left;" src="bilder/home.gif" width="64" height="64" border="0" alt="Home">
<p style="margin:0;">Hier ist dann das, was Herumfließen soll,
kann aber doch fließen, wenn Tom daran gefummelt hat *ggg*</p>
</div>viele Grüße
Axel
-
-
-
-
-
-
-