Wie nach Bilder (align left) mit Text wieder unter dem Bild anfangen

[tuto1812]

Huhu,

ich verzweifle an dem Versuch, einen neuen Textabsatz wieder ganz links unter einem Bild anfangen zu lassen. Das Bild steht links, rechts daneben ist Text. Nun kommt ein neuer Absatz, der soll aber wieder unabhängig von der Textlänge darüber ganz links unter dem Bild anfangen.

Beispiel siehe: http://www.antarcon.de Die Überschrift "Wandern und Mountainbikefahren ..." nach der Google Landkarte.

ICh könnte wohl einfach leere Absätze einbauen, aber das kann ja je nach Browser unterschiedlich sein. Ich dachte das würde mit einem DIV bzw. float gehen. Aber ich schaffe es einfach nicht. Hat mir wer einen Tipp?

 

[tuto1812]

Hier ein Screenshot mit dem Beispiel. Die H3 Überschrift "Wichtige ..." soll trotz des kurzen Textes darüber wieder links unter dem Bilde anfangen.

 

[Spelmann]

Die H3 Überschrift "Wichtige ..." soll ... links unter dem Bilde anfangen.

Im Quelltext steht die Überschrift noch vor dem Bild. Beides erst mal tauschen.
Wenn die Überschrift dann immer noch rechts vom Bild steht weil weil gefloatet wird, könnte Dir mit clear:left geholfen werden.

 

[SpiceLab]

Wenn die Überschrift dann immer noch rechts vom Bild steht weil weil gefloatet wird, könnte Dir mit clear:left geholfen werden.

Nicht könnte, sondern wird.

#content h3 {
	color: ##663300;
	font-size: 15px;
	font-family: Helvetica, Arial, Verdana, Sans-Serif;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 120%;
	border-bottom: 1px solid #cccccc;
	clear: left; /* bricht den Umfluß ab */
	}

Siehe hierzu auch clear (Fortsetzung bei Textumfluss).

 

[tsbmusic]

Oder du machst nach dem Bild einfach ein br mit clear="both" rein.

<br clear="both" />

Gruss
tsbmusic

 

[tuto1812]

Vielen Dank. Nun bin ich einen Schritt weiter. Besonders die Idee, mit dem

<br clear="both" />

ist klasse. Das funktioniert für das gesamte Dokument einwandfrei. Ok, dabei muss ich dann jedesmal beim Text schreiben daran denken, es im Bedarfsfall einzufügen.

Also denke ich, ich gehe lieber den Weg und hänge das 'clear' an den H3 Tag.

#content h3 {
	clear: both;
	color: ##663300;
    ...

Wenn ich das mache kommt das seltsame Phänomen, dass plötzlich ein Riesenabstand vor der H3 Überschrift vom Absatz davor auftaucht. Keine Ahnung wie das zusammenhängt?

=> hier im Original
oder
ein Screenshot

 

[SpiceLab]

Wenn du für die beiden äußeren Spaltenblöcke eine Hintergrundfarbe oder einen Rahmen definierst, erkennst du deutlich den Zusammenhang, dass der Block unterhalb ihres unteren Boxenrandes ausgerichtet wird, so wie es die clear-Eigenschaft gebietet ;-)

Du wendest diese Eigenschaft innerhalb eines umfliessenden Blocks an, der sich nicht in seinem normalen Textfluß befindet, und die Browser orientieren sich folglich an den beiden benachbarten Blöcken #l_sidebar und #r_sidebar, die jeweils mit float:left u. float:right formatiert sind.

Lösung: #content anstelle der margin-Regeln ebenso mit einer float-Regel aus dem normalen Textfluß nehmen.

 

[Spelmann]

Ich vermute mal die feste Höhe von #r_sidebar verschiebt den Absatz "Ausdehnung / Lage" nach unten

Ah. Zu langsam. Siehe spicelab

 

[SpiceLab]

Dieses Bild sagt mehr als tausend Worte ;-)



Die quietschbunten Farben in der linken Spalte stammen nicht von mir, sondern von Firebug, wenn im Markup ein Element markiert o. überfahren wird.

 

[tuto1812]

Super es klappt. Das 'Firebug' Addon ist echt klasse. Es hat mir sehr geholfen, das ganze visuell zu verstehen und ist klasse um die Einstellungen und Auswirkungen genauer zu analysieren.

Nachdem ich die Antwort gestern Abend las, dachte ich "das verstehe ich nie". Da musste ich erst einmal drüber schlafen. Ich habe mir dann nochmal eine kleine Testseite mit drei Farbblöcken und ein wenig Inhalt gebastelt um die Tipps nachzuvollziehen und denke nun, ich habe die Float Geschichte ein wenig mehr verstanden.

Als Ergebnis habe ich wie vorgeschlagen:

Beim mittleren Content Bereich den 'margin-left' gelöscht und dafür an den Content Bereich ein 'float left' drangemacht.

#content { 
        float: left;
/*	margin-left: 233px;  */
	width: 440px; 
        ...

Nun kann ich an den H3 Tag den 'clear' dran hängen und dieser setzt den Text richtig nach links an den Rand vom Content:

#content h3 {
	clear: both;
        ...

Es lag also quasi an der (fehlenden) Verschachtelung der Floats? Der Text um das Bild herum ist quasi auch ein Float, aber damit das 'clear' klappt, muss auch irgendwie definiert sein, wohin er zurück gehen soll. Ich meine es einigermaßen kapiert zu haben ... aber tue mir wohl noch schwer, es jemandem zu erklären.

@spicelab: Danke für die anschauliche Erklärung