nicht angemeldet
floating <img> in <div> überragt den Rand
0 0 
Gunnar Bittersmann
0
0
floating <img> in <div> überragt den Rand
MudGuardHallo, vielleicht kann mir hier jemand helfen mein eingerostetes CSS Wissen aufzubessern. Ich habe eine Startseite, auf der mehrere Artikel stehen. Ein Artikel ist in ein <div> verpackt, um die einzelnen Artikel farblich vom Hintergrund zu trennen. Ein Artikel sieht ca. so aus:
<div>
<h1>Überschrift</h1>
<img style="float:right" />
<p>Etwas Text ...</p>
<p>Noch etwas Text ...</p>
</div>
Das funktioniert wunderbar, solange genug Text da steht, so dass der Text länger ist, als das Bild. Steht jedoch wenig Text neben einem hohen Bild, überragt das Bild den <div> Bereich.
Rein vom Code her betrachtet umschließt ja der <div> Bereich den gesamten Artikel, im Rendering jedoch nicht mehr.
Ich vermute, dass ich hier irgendwo einen groben Verständnisfehler habe. Wenn also jemand besser weiß, warum das <img> Objekt nicht ein Teil IM <div> Bereich ist, würd ich mich über eine Antwort freuen. Ebenso falls jemand weiß, wie ich den <div> Bereich entsprechend vergrößern kann, dass er sich an übergroße Bilder anpasst.
dankeschön,
Norbert
-
Hallo,
Du müßtest ein Element vor dem schleißenden Tag des Umgebenden Containers einfügen, daß den float wieder aufhebt (mit clear) etwa so:
...
<div style="clear:right;"></div>
</div>
Den inline style natürlich besser vermeiden ;)netten Tag
^da Powl-
Hello out there!
Du müßtest ein Element vor dem schleißenden Tag des Umgebenden Containers einfügen,
Nein, müsstest du nicht. Solltest du auch nicht. Das Markup verschandeln wegen gewünschter Darstellung? Ich bitte dich!
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo,
Nein, müsstest du nicht. Solltest du auch nicht. Das Markup verschandeln wegen gewünschter Darstellung? Ich bitte dich!
Könnte er aber und funktionieren würde es auch. Gesetzt den Fall, es wären Teaser - Boxen, die als letztes Element einen Link zum ganzen Artikel beinhalten, könnte das genauso laufen, ohne unnötiges Markup. Das Prinzip bliebe das gleiche. Wer sagt dies Methode würde das Markup verschandeln?
Eine andere Idee wäre, gesetzt den Fall die Bilder hätten immer gleiche Höhen, dem umgebenden div eine entsprechende min-height zu verpassen, und für den IE exklusiv eine entsprechende height Anweisung mitzugeben.
Vielleicht fiele mir noch etwas ein wenn ich länger darüber nachdächte.Ich habe hier _ausdrücklich_ von einem weiteren Element geredet, daß den Float aufheben muß. Weil ich keine weiteren Angaben über den Aufbau seiner Seite habe, habe ich als _Beispiel_ ein div gewählt. Voller Absicht und entgegen jeglicher Überzeugung sogar frevelhafter Weise mit style im Tag. Aber angemerkt!
Nächstes Mal werde ich einen beispielhaften, unsemantischen div-Tag extra für Dich auch nocheinmal anmerken.netten Tag
^da Powl-
Hello out there!
Eine andere Idee wäre, gesetzt den Fall die Bilder hätten immer gleiche Höhen, dem umgebenden div eine entsprechende min-height zu verpassen, und für den IE exklusiv eine entsprechende height Anweisung mitzugeben.
Gute[tm] Idee!!1 ;-)
Ich habe hier _ausdrücklich_ von einem weiteren Element geredet, daß den Float aufheben muß.
Du hast eins _eingefügt_, was nicht da war.
habe ich als _Beispiel_ ein div gewählt.
Du hättest 'hr' wählen können.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo,
Gute[tm] Idee!!1 ;-)
:) Habe ich aber ehrlich geschrieben bevor ich Deinen Post gelesen habe
Ich habe hier _ausdrücklich_ von einem weiteren Element geredet, daß den Float aufheben muß.
Du hast eins _eingefügt_, was nicht da war.
Wie sonst? Ein <hr> wäre genauso neu gewesen.
Du hättest 'hr' wählen können.
Ja gut, hätte ich. Danke für den Tipp.
netten Tag
^da Powl
-
-
-
-
-
Hello out there!
Das funktioniert wunderbar, solange genug Text da steht, so dass der Text länger ist, als das Bild.
Da nirgens eine Angabe für die 'height'-Eigenschaft der 'div'-Elemente gemacht ist, gilt der Defaultwert 'auto'.
Steht jedoch wenig Text neben einem hohen Bild, überragt das Bild den <div> Bereich. […] Wenn also jemand besser weiß, warum das <img> Objekt nicht ein Teil IM <div> Bereich ist, […]
Die CSS-Spezifikation weiß es im Abschnitt 10.6.3 Blockebene, nicht ersetzte Elemente im normalen Fluss, und Floating, nicht ersetzte Elemente: „Nur untergeordnete Elemente im normalen Fluss werden [bei der Berechnung der Höhe] berücksichtigt (das heißt, Floating-Boxen und absolut positionierte Boxen werden ignoriert […])“
Ebenso falls jemand weiß, wie ich den <div> Bereich entsprechend vergrößern kann, dass er sich an übergroße Bilder anpasst.
Du willst für jedes 'div'-Element also die Mindesthöhe ('min-height'-Eigenschaft) auf den Wert der Höhe des jeweiligen Bildes setzen (plus eventueller Rand).
Da IEs < 7 diese Eigenschaft nicht kennen, dafür aber fehlerhafterweise die 'height'-Eigenschaft so interpretieren, ist für IEs diese so anzuwenden – vor richtigen[tm] Browsern versteckt durch conditional comments oder star html hack.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hello out there!
Die CSS-Spezifikation weiß es im Abschnitt 10.6.3 Blockebene, nicht ersetzte Elemente im normalen Fluss, und Floating, nicht ersetzte Elemente: „Nur untergeordnete Elemente im normalen Fluss werden [bei der Berechnung der Höhe] berücksichtigt (das heißt, Floating-Boxen und absolut positionierte Boxen werden ignoriert […])“dankeschön. solltest du auch eine begründung für die ausnahme von floating elementen haben, würd ich die gern hören, ansonsten nehm ichs als gegeben hin und frag auch nciht weiter nach. ;-)
danke für die ganzen tipps,
Norbert-
Hello out there!
solltest du auch eine begründung für die ausnahme von floating elementen haben, würd ich die gern hören,
Weil’s so spezifiziert ist. ;-b
Warum’s so spezifiziert ist, müsstest du die CSS Working Group fragen.
Aber sinnvoll ist das schon, sonst wäre sowas wie in Abbildung 9.2 [CSS2 §9.5] ja nicht möglich.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hello out there!
solltest du auch eine begründung für die ausnahme von floating elementen haben, würd ich die gern hören,
Aber sinnvoll ist das schon, sonst wäre sowas wie in Abbildung 9.2 [CSS2 §9.5] ja nicht möglich.dafür gäbs ja z-level ... aber solange die sachen auf der gleichen ebene sind, verwunderts doch ein bisschen. nun gut, standard ist standard, man muss damit leben. ;-)
nochmal danke,
Norbert-
Hello out there!
dafür gäbs ja z-level ...
Damit könntest du das Float (bspw. das Bild) vor oder hinter den Text packen, aber nicht von diesem umfließen lassen.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hello out there!
dafür gäbs ja z-level ...
Damit könntest du das Float (bspw. das Bild) vor oder hinter den Text packen, aber nicht von diesem umfließen lassen.
See ya up the road,
Gunnarsorry, kleiner Denkfehler, du hast recht.
danke,
Norbert
-
-
Hi,
dafür gäbs ja z-level ...
Nö, sowas gibt's nicht ;-)
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
-
-
overflow:hidden für dein umgebendes Div hat auch den gewünschten Effekt.
Gruß Ben