Bild-Text Abstand ändern

[DeBing]

Hallo,
habe folgenden Code:

CSS-Datei:
.imgr {
 float:left;
 margin-right:20px;
 margin-bottom:10px;
 width:300px;
 height:300px;
}

XHTML-Datei:
<p>
   <a href="../bilder/bild.jpg" target="_blank">
      <img class="imgr" src="../bilder/bild.jpg" alt="..." />     </a>
   Text
</p>
//Bisher hab ich hier immer <br /> benutzt
<h2>
   Nächste Überschrift
</h2>

und dabei besteht folgendes Problem:
Das Bild schneidet in die Überschrift hinein. Von daher sollte der Abstand irgendwie reguliert werden. Bisher hab ich das immer mit recht vielen <br /> Tags gemacht aber es muss doch auch einen anderen Weg geben um den Abstand da zu regulieren und weniger Tags zu benutzen. Das Bild sollte aber schon so groß bleiben.

MfG
DeBing

[Rafael]

Dein Bild floatet und du stellst den Status Quo an keiner stelle per clear: left; wieder her.

Tipp. Definiere eine clearer-Klasse im Sinne von:

.clearer {
display: block;
clear: both;
line-height: 0;
height: 0;
}

Nun musst du nur noch ein <span class="clearer"></span> unter dein Bild setzen und alles müsste funktionieren.

Grüße.

[OhneName]

Hallo,

sinnvoller wäre es wohl einfach der Überschrift clear:left zu verpassen, dann spart man sich das leere <span>-Element und erzielt den selben Effekt.

Gruss,
OhneName

[rfb]

Moin

Nun musst du nur noch ein <span class="clearer"></span> unter dein Bild setzen und alles müsste funktionieren.

Und das nennst du vereinfachen?

Gib dem h2 die CSS-Eigenschaft clear.

Ein weiteres Element ist dafür völlig überflüssig

Gruß
rfb

[Rafael]

Nur für den Fall, dass auf ein floatendes Bild in jedem Fall eine h2-Überschrift folgt. Andernfalls ist man mit einem immer wieder einsetzbaren, leeren Element besser beraten. Mit Sicherheit aber auch eine Frage des persönlichen Stils.

[rfb]

Moin

Nur für den Fall, dass auf ein floatendes Bild in jedem Fall eine h2-Überschrift folgt. Andernfalls ist man mit einem immer wieder einsetzbaren, leeren Element besser beraten.

Ein leeres Element berät dich mangels Inhalt nie besser.

Im Fall, dass kein h2 sondern irgendeinandereselement folgen kann empfiehlt sich dann eben auch diesem die Eigenschaft zuzuweisen oder eine gemeinsame Klasse einzusetzen.

Gruß
rfb

[DeBing]

Also ich hab das nun mal ausprobiert mit der allgemeinen Classeigenschaft.
Nun ist ein neues Problem entstanden, nach dem ersten:
  <span class="clearer" />
Wird jeder nachfolgender Text in fast einer Zeile angezeigt, ist also unleserlich. Auch die Überschrift kann nicht mehr gelesen werden.

[rfb]

Moin

dann folge den anderen Ratschlägen hier und gib die Eigenschaft der Überschrift und nicht einem nutzlosen leeren Element.

Gruß
rfb

[DeBing]

Ok ich habe die height Angaben weggelassen und nun funktioniert alles.