Hallo.
Ich habe eine DIV-Box, die auf Grund meiner Ecken-abrundungs-Technik nochmal in drei einzelne Boxen (die erste und dritte beinhaltet nur die entsprechende Background-Grafik, die in der Mitte ist der Content-Bereich) aufgeteilt ist.
Damit Bilder, die höher sind als der nebenstehende Text, korrekt innerhalb der zweiten Box dargestellt werden, gab ich der dritten einen clear:both . Jedoch reicht die Hintergrundfarbe der zweiten nicht bis nach unten, sondern hinterlegt nur die Zeilen, wo auch Text steht. Wie umgehe ich das mit wenig Code?

HTML-Code:
Quellcode:<div class='content'>
<div class='content1'></div>
<div class='content2'>
<h1>Anmeldung für das Lager 2007</h1>
<img src='images/informationen_anmeldung.gif' style='float: right; margin-left: 8px; margin-bottom: 8px' alt='Anmeldung'>
Das Zeltlager 2006 ist leider schon vorbei und weil es so schön war freut ihr euch jetzt schon auf das nächste Jahr?! So schnell sind wir leider auch nicht - darum kann man sich für 2007 erst irgendwann im Februar anmelden. Bis dann :-) !
</div>
<div class='content3'></div>
</div>
CSS-Code:
Quellcode:div.content {width: 524px; float: right; margin-right: 4px; margin-bottom: 32px}
div.content1 {background-image: url(images/huba_content1.gif); width: 524px; height: 8px; font-size: 1px}
div.content2 {background-color: #ffffff; padding: 0px 8px; text-align: justify}
div.content3 {background-image: url(images/huba_content2.gif); width: 524px; height: 8px; font-size: 1px; clear: both}


ich gehe mal davon aus, dass deine Bilder mit den runden Ecken keine GIFs mit Transparenz sind, sondern die Ecken-Gegenstücke die hellblaue Hintergrundfarbe haben, richtig? Kann auch an der Kompression hier liegen, aber die Ecken sehen doch recht rund und wenig verpixelt aus. Wenn dem der Fall ist (also dass du keine Transparenz nutzt), dann kannst du doch dem div mit class='content' einfach ne weiße Hintergrundfarbe verpassen o_O

-LeJean-

nein, dem ist nicht so. die längliche gif-grafik hat schon transparente ecken, weil es keine hintergrundfarbe, sondern ein hintergrundbild ist. folglich geht das mit der von dir vorgeschlagenen methode nicht...

der link zu der webseite: http://www.superzeltlager.de/

Durch das float:right umfließt dein block das bild.
Mir dallen spontan 2 Lösungen ein:

1: die schreibst unter das Bild noch ein Zeichen und formatierst es mit der gleichen Farbe wie den BG (damit es nicht sichtbar ist).
Aber da könnte google Probleme machen, ich habe irgendwo mal gelesen das Schrift mit selber Farbe wie der BG ein Grund für Google ist die Sites zu ignorieren!

2: Mach ein spacer.gif!
Ein Transparentes Gif Bild das einfahc unter deinem right gefloatetes Bild kommt. Dadurch wird auch der content erweitert!

Auch dir Danke für die Antwort. Jedoch würde das bedeuten, dass ich das manuell machen müsste. Da ich dieses Problem jedoch auch in einem Newsbereich habe, ist mir das irgendwie immernoch nicht optimal gelöst...

Zuerst würde ich die Boxen schachteln - du kannst einfach
Quellcode:<div class="couter"><div class="cmid"><div class="cinner">TEEEXT</div></div></div> benutzen - und dann das äusere div für den Rand oben nehmen, das nächste für den unteren und das innerste für den content. dein CSS würde dann so aussehen:
Quellcode:div.couter {
width: 524px;
float: right;
margin-right: 4px;
margin-bottom: 32px;
background-image: url(images/huba_content1.gif);
padding-top: 8px
}
div.cmid {
background-image: url(images/huba_content2.gif);
background-attachment: left bottom;
padding-bottom: 8px;
}
div.cinner {
background-color: #ffffff;
padding: 0px 8px;
text-align: justify
} kann sein, dass du noch etwas die Hintergrundausrichtung korrigieren musst. Hab grad kein Bock, die CSS specs rauszukramen ;).

Damit sparst du schonmal einen div :). Wenn das dein Problem noch nicht löst, musst du einfach noch ein <br style="clear: both"> ans ende von <div class="cinner"> machen.
Also: Quellcode:<div class="couter"><div class="cmid"><div class="cinner">TEEEXT<br style="clear: both"></div></div></div>

"tsuji-giri" (japanisch) - ein neues Schwert an einem Passanten ausprobieren