Frage zu div Höhe

[freakXHTML]

Hallo,
ich habe ein div, in welchem sich ein <h1>, <p> und ein <img> - Tag befindet. Zuerst kommt die Überschrift, dann das Bild und zum Schluus der Absatz. Die Höhe des divs richtet sich aber nur nach der Länge des Textes, der sich im Absatz befindet.

Das bedeutet, dass wenn ich nur wenig Text in <p> habe, aber ein großes Bild, dann geht das Bild über die div Grenze und überschneidet so womöglich andere Elemente! Warum ist dies so? Kann ich dieses Phänomen nur verhindern, wenn ich dem Div eine Mindesthöhe zuweise??

So könnte der Quelltext aussehen:

<div style="border: 1px solid black;">
    <h1>Guten Tag</h1>
    <img class="left" src="pictures/Hallo.jpg" alt="Hallo" />
     <p>
        Hier steht ein kurzer Text. Das div richtet sein Höhe nach diesem 
        Text aus und nicht nach dem womöglich höherem Bild!
     </p>
</div>

Woran liegt das geschilderte Problem?

Vielen Dank für eure Hilfe
lg, freakXHTML

PS.: Ich habe leider keine Website, auf der das Beispiel zu sehen ist

 

[Efchen]

Es fehlt zwar der entscheidende CSS-Code, aber class="left" wird wohl floaten (schlecht gewählter Klassenname), nicht wahr?

Und wer "float" sagt, muss auch "clear" sagen.

Aus Sicht von HTML übrigens: Was ist <img>? Sollte das nicht eher mit ins <p>? Allerdings ist das alt-Attribut auch eher seltsam gefüllt.

 

[freakXHTML]

Hallo,
ja, mit der Klasse "left", schreibe ich einfach nur "style="float:left;"".
Warum ist der Name schlecht gewählt. Ich finde, er sagt mir genau, was die Klasse bewirkt...

Ich habe den Inhalt des alt tags geändert. In Wirklichkeit steht da was anderes.

Wo muss ich denn dann clearen. Ich habe folgende struktur:

<div>
    <h1></h1>
    <img />
     <p></p> //Hier brinkgt ein clearen nichts.
</div> 
 
<div>  //Hier ist ein clearen schon zu spät
    <h1></h1>
    <img />
     <p></p>
</div> 
 
<div>
    <h1></h1>
    <img />
     <p></p>
</div>

Ich fasse somit immer Artikel zusammen. Wenn es mit einem besseren Stil geht, dann freue ich micht über Verbesserungsvorschläge. Doch weiß ich nicht genau, wo ich hier mit clear arbeiten soll, denn das Bild soll links im Bild stehen und der Text des <p> Tag soll rechts daran vorbeilaufen.

Vielen dank für eure Bemühungen!
lg, freakXHTML

PS. Warum wäre es besser, wenn <img> ins <p> kommt?

 

[Efchen]

ja, mit der Klasse "left", schreibe ich einfach nur "style="float:left;"".
Warum ist der Name schlecht gewählt. Ich finde, er sagt mir genau, was die Klasse bewirkt.

Der Name ist schlecht gewählt, weil Du Inhalt und Layout mischst. Im HTML-Code sollte immer nur die Semantik stehen, inklusive der Namen für Klassen und IDs.
Wenn Du das Element mit der Klasse "left" irgendwann einfach auf die rechte Seite haben willst, ist das eine klitzekleine Änderung im Stylesheet.
Aber dann hast Du in allen HTML-Dateien eine Klasse namens "left", die rechts floatet. Das ist unsauberer Code, Du kannst natürlich jetzt auch hergehen und alle "left" in "right" ändern. Da hast Du dann aber wieder einen Haufen Arbeit.
Würdest Du den Klassen und IDs aber semantische Bezeichner geben ("Content", "Menu", ...), dann müsstest Du für eine Layoutänderung wirklich nur ins Stylesheet eingreifen, so wie es auch gedacht ist.

Wo muss ich denn dann clearen.

Du hast doch sicherlich nachgelesen, was clear bewirkt. Dann sollte es relativ einfach sein.

<p></p> //Hier brinkgt ein clearen nichts.

Halte ich für ein Gerücht. Aber es bringt vermutlich nicht das, was Du willst.

<div> //Hier ist ein clearen schon zu spät

Logisch. Ist ja schon nicht mehr im Element, das Du erweitern willst.

Doch weiß ich nicht genau, wo ich hier mit clear arbeiten soll, denn das Bild soll links im Bild stehen und der Text des <p> Tag soll rechts daran vorbeilaufen.

Dann bleibt ja nur noch eine Stelle.
Du musst dazu allerdings noch ein Tag einfügen!

Warum wäre es besser, wenn <img> ins <p> kommt?

Naja, im alt-Attribut steht "Hallo". Und was bedeutet "Hallo"? Wenn Du nur "Hallo" schreiben würdest, würdest Du es ja auch mit <p> auszeichnen (oder mit <hx> wenn es eine Überschrift sein soll). Also zeichne das Image zusätzlich noch richtig aus.

 

[freakXHTML]

Hallo,
vielen Dank für die zahlreichen Tipps, Efchen. Mmh...ein neuer Tag. Ich weiß zwar nicht, ob dies so schön ist, aber ich habe jetzt zum einen den <img> Tag in den <p> Tag integriert und habe nach den <p> Tag ein <span> eingefügt.

Dieses habe ich mit CSS formatiert: clear:left;

Ich habe mich nochmals ein bisschen umgeschaut, aber ich glaube, dass dies nicht gut ist. In phase 5 wird zwar die Seite richtig angezeigt, doch im IE besteht das Problem weiter!

Was mache ich falsch?

Vielen Dank für eure Tipps und das "Hinführen auf die Lösung". So lerne ich besser und das finde ich gut!

lg, freakXHTML

 

[Asterixus]

Ohne CSS und HTML-Code können wir dir nur sehr schlecht und langsam helfen.

 

[freakXHTML]

Hallo,
da gibt es nicht so viel Code. Den wichtigsten kennt ihr schon:

<div>
  <h1>Überschrift</h1>
    <p>
     <img class="left"  />
    <p>
  <span style="clear:left;"></span>
 </div>
 
<div>
  <h1>Überschrift</h1>.......

.left {float:left;}

Ich habe drei solcher divs mit einer Überschrift, einem Absatz und einenm Bild. Der Text in <p> soll das Bild recht umlaufen. Das Problem ist, dass der nächste Div in den oberen reinrutscht, da sich die Höhe des Divs nach der Länge des Textes des <p> Tag richtet. Dieses Problem versuche ich durch den <span> zu lösen, wobei dies nur in phase5 richtig angezeigt wird. (außerdem kann ich mir nicht vorstellen, dass die korrekt ist....sonst würde der IE es richtig anzeigen)

Wie schon gesagt...außer float gibt es hier kein CSS.

Ich hoffe, dass ihr mir helfen könnt!

Vielen Dank
lg, freakXHTML

 

[Efchen]

Du brauchst statt des Inline-Elements ein Block-Element zum clearen. Verwende also statt <span> einfach <div>, das "allgemeine Block-Element". Dann gehts.