✔ Bild Problem

[hmmNaGut]

Hi erstmal alles gute im Neuen Jahr.

Kaum hat das neue Jahr angefangen schon die ersten Probleme

Kleiner Ausschnitt aus meiner CSS DATEi

#centerCol .contentWidthBorder{
	background-color:rgb(248, 236, 236);
	border-bottom:1px dashed #aa9b9b;
	font-family:verdana, sans-serif;
	font-size:10pt;
	color:black;
	padding:5px 5px 5px 5px;
}

Nun habe ich folgendes Problem so siehts aus auf meiner Seite
(Quellcode)

		<div class="contentWidthBorder"><img style="float:left; margin: 2px 2px 2px 2px" src="images/logo1.jpg">
			ist das Freizeitmagazin von Jung bis Alt ...<br>
		</div>

Nun ist das Bild Grösser als der Text sprich
es steht über den Rand drüber.

ich hoffe ich konnte mein Problem gut beschreiben
Danke schon mal.

Tja die Silvester Kopfschmerzen

 

[Maik]

Hi,

für das Neue Jahr empfehle ich dir unsere Webmaster FAQ, und darin meinen Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?, denn du hast es versäumt, die Floatumgebung zum Schluß zu "clearen", damit die Box das Grafikelement in seiner vollen Höhe umschliesst.

mfg Maik

 

[hmmNaGut]

upps... ich gestehe aber der Silvester
naja... hoffe hilfst mir trotzdem noch :-(

Danke jedenfalls

 

[Maik]

upps... ich gestehe aber der Silvester
naja... hoffe hilfst mir trotzdem noch :-(

Danke jedenfalls

Selbstverfreilich - auf tutorials.de gilt doch schliesslich keine Promillegrenze :suspekt:

Gern geschehen, und immer wieder gerne

lg Maik

 

[hmmNaGut]

Leider konnte ich noch keinen Erfolg erziehlen.

	<div id="centerCol" class="clearfix">
		<p class="compartments_orange">Herzlich Willkommen auf Alles-Wien.at</p>
		<div class="contentWidthBorder"><img style="float:left; margin: 2px 2px 2px 2px" src="images/logo1.jpg">
			ist das Freizeitmagazin von Jung bis Alt.<br>
			Bei uns erfahren sie was sich in Wien's Kinos,<br>
			Locations tut.<br>

		</div>
		<div class="compartments_red">
			Kino
		</div>
	</div>

Nochmal ein bisschen mehr CSS

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

#centerCol {
margin-left:160px;
margin-top:4px;
width:720px;

#centerCol .contentWidthBorder{
	background-color:rgb(248, 236, 236);
	border-bottom:1px dashed #aa9b9b;
	font-family:verdana, sans-serif;
	font-size:10pt;
	color:black;
	padding:5px 5px 5px 5px;
}

Ich bin leider kein CSS Profi ...
}

 

[Maik]

Du rufst die Klasse im falschen Element auf:

	<div id="centerCol">
		<p class="compartments_orange">Herzlich Willkommen auf Alles-Wien.at</p>
		<div class="contentWidthBorder clearfix"><img style="float:left; margin: 2px 2px 2px 2px" src="http://www.tutorials.de/forum/images/logo1.jpg">
			ist das Freizeitmagazin von Jung bis Alt.<br>
			Bei uns erfahren sie was sich in Wien's Kinos,<br>
			Locations tut.<br>

		</div>
		<div class="compartments_red">
			Kino
		</div>
	</div>

mfg Maik

 

[hmmNaGut]

Ich denke ich werde das heute nicht mehr zusammen bringen
es funktioniert der Inhalt wird angepasst leider sind es mehr wie 2px Abstand.

Ich stell mal ein Bild hinein.

Wünsche dir halt noch eine Gute Nacht und Danke.

//EDIT

Der Zweite Inhalt Passt auch vom Abstand habe den oberen nochmal eingebunden
und jetzt Passts unten.

Da der Erste Eintrag sowieso von mir getätigt wird werde ich halt einen längeren TEXT schreiben und fertig.

Danke für deine Gedult und Hilfe.

 

[Maik]

es funktioniert der Inhalt wird angepasst leider sind es mehr wie 2px Abstand.

Wo genau beträgt der Abstand mehr als 2px?

mfg Maik

 

[hmmNaGut]

Mir ist aufgefallen das die Erste Box immer eine Fixe Grösse hat

Siehe Bild

hingegen die Zweite Box passt.

Dabei sind das die selben Klassen.

 

[Maik]

Danke für die Antwort auf meine Rückfrage

Ist die Seite irgendwo erreichbar? In deinen Screenshots kann ich die Ursache nicht entdecken, geschweige denn herauslesen

lg Maik