✔ Bild überlagert umgebenes div

Status
Nicht offen für weitere Antworten.
1

123arne

Mitglied
Hallo,

bräuchte mal einen Denkanstoss bei folgendem Problem. Ich habe ein div tag mit einen Rahmen und darin ein bild mit float left und daneben text. Wenn der Text nun nicht so hoch ist wie das Bild daneben, überlagert das bild den unteren Rand des div-tags.
Wie kann ich es erreichen, dass der Rahmen des div immer unterhalb des bildes ist, egal wie groß das bild ist.

PHP: 
<div class="meindiv" style="border:#999999 thin>  
<img src="meinbild.gif" style="float:left /> jetzt noch der text
</div>
 
Hi,

die "Fließumgebung" in der Box meindiv muss mit Hilfe der clear-Eigenschaft wieder aufgehoben werden:

Code: 
<div class="meindiv" style="border:#999999 solid thin">
     <img src="meinbild.gif" style="float:left" /> jetzt noch der text
     <div style="clear:left;"></div>
</div>
Zudem fehlen in deinem gezeigten Quellcode die abschliessenden Anführungszeichen der style-Attributswerte.
 
geht noch nicht, ich werde mal doch weiter ausholen und den ganzen Teil reinstellen.

Code: 
<div id="content">
      <div class="referenz">
          <h3>Flughafen Rostock-Laage </h3>
          <p> <img src="img/ref_rola_kl.JPG" alt="Biodieselwerk Sternberg" width="300" height="145" /><strong>Rauch- und W&auml;rmeabzugsanlage:</strong><br />
        In der Halle sind umlaufend Fensterb&auml;nder mit RWA Motoren ausger&uuml;stet,  die bei einer Ausl&ouml;sung der Anlage als Nachstr&ouml;m&ouml;ffnungen fungieren. Im Geb&auml;ude  sind mehrere gro&szlig;e Zentralen montiert, die &uuml;ber die Brandmeldeanlage  angesteuert werden. Die RWA Zentralen sind untereinander verbunden und steuern  die gesamte Entrauchung, sowie die Nachstr&ouml;m&ouml;ffnungen.</p>
     <div style="clear:both;"></div>
      </div>
      <div class="referenz">
          <h3>Yachthafenresidenz Rostock Hohe D&uuml;ne </h3>
          <p> <img src="img/ref_hohdn_kl.jpg" alt="Biodieselwerk Sternberg" width="300" height="148" /><strong>Antennenanlage:</strong><br />
          Die Fernseh- und Rundfunk-versorgung wird mit einer Zentrale Kopfstation  der Firma Kathrein realisiert. Es werden 30 digitale Programme und 4  Rundfunk-programme &uuml;bertragen. Weiterhin sind 2 hauseigene Kan&auml;le eingerichtet,  die zuk&uuml;nftig Informationen f&uuml;r die G&auml;ste des Hauses liefern sollen.&nbsp; </p>
     <div style="clear:both;"></div>
      </div>

</div>

die dazugehörigen klassen in der css-datei:
Code: 
#content{
  float:right;
	width: 660px;
}

.referenz{
	padding: 10px 10px 10px 10px;
	font-size: 80%;
	text-align: justify;
	border: 1px solid #cccccc;
        margin-bottom: 10px;
}

.referenz img{
	padding: 0px 10px 10px 0px;
	float:left;
	overflow: visible;
}

hoffe jetzt wirds deutlich.

Vielen Dank schon mal
 
Zuletzt bearbeitet:
Sorry, nu hab ich es
erst speichern....dann aktualisieren ! *anKopfKlatsch

mit dem clear:left funktioniert es.

Danke noch mal
 
Hallo,
nun wärme ich das Ding hier doch noch einmal auf. Bin gerade über ein ominöses Verhalten des IE gestolpert in diesem Zusammenhang.
Also erstmal hatten meine Rahmen der div's ja die Höhe und das gewünschte Aussehen. zumindest im Firefox.
Im IE haben die Rahmen jedoch Lücken vom unterem Ende des Textes bis Ende des Bildes. Jedoch nur im nicht sichtbarem Bereich des Browserfenster. Umständlich erläutert so:
Die Rahmen des Bereichs der beim Seitenaufruf zu sehen ist, sind in Ordnung. Scrolle ich die Seite nach unten haben die Rahmen links und rechts jedoch Lücken. Drücke ich jetzt F5 (Aktualisieren) sind diese Rahmen in Ordnung, jedoch die oberen Rahmen haben Lücken.
Zur Veranschaulichung http://wst.sunrisepc.de/referenzen.php mal mit F5 und scrollen spielen.

Gruß Arne
 
Hi,

vielleicht hilft es weiter, wenn du diese META-Angabe im Dokument-Header notierst, da sie ansonsten die Browser in den Quirksmodus versetzt:

Code: 
<meta name="keywords" content="Brand Brandmelder Brandmeldeanlagen Rauch Rauchabzug Wärmeabzug Einbruch Einbruchmeldeanlagen Sicherheit Fluchtweg Videoanlagen Rettungsweg Sicherheitstechnik " />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
öhhmm ja Danke für den Hinweis, nicht drauf geachtet *schäm
also im IE7 konnte ich das Problem jetzt beseitigen, indem ich die Absatz-Tags <p> vom umfliessenden Text entfernt habe. Im IE6 besteht das Problem weiterhin.
 
Erweiter mal das Stylesheet mit der folgenden Regel:

Code: 
* html .referenz { height: 1%; }
 
Allerbesten Dank, hat funktioniert. Bekomme ich(und Mitleser) zum Schlau werden noch eine Erklärung warum es funktioniert? Als * html ist klar, ist eine Anweisung nur für den IE. Aber warum braucht dieser eine zusätzliche Höhenangabe?

Gruß
Arne
 
Der IE6 benötigt hier eine geringe Mindesthöhe, um den Rahmen sauber um die Box mit der eingeschlossenen Float-Umgebung zu ziehen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück