Div Höhe an Inhalt automatisch anpassen die 1000.

3Tbles

Cadet 4th Year
Registriert
Jan. 2007
Beiträge
79
Hallo :)

Ich habe bereits nach der Lösung des Problems gegoogelt und auch wenn die Frage sicherlich schon nervt und tausend mal gestellt wurde die vorgeschlagenen Lösungen funktionieren bei mir nicht.

Folgendes Problem: ich möchte meinen Blog responsive gestalten und habe ein Problem mit dem Header, dass sich der Eltern div a nicht an der automatischen Höhe des Inhalts (img) anpasst. Dadurch verändert sich das gesamte Layout der Seite, da der div a nur eine Zeile darstellt und dieser Effekt ist nicht erwünscht.

CSS:

HTML:
#a {
	position:relative; 
        max-width:940px; 
        height:auto; 
}

#b {
	margin-bottom:7px; 
        max-width:940px; 
        height:auto;
}

#b img {
	position:absolute;
	max-width:100%;
	height:auto;
}

HTML:
HTML:
<div id="a">
	<div id="b">
		<img src="x" alt="Image01" />
		<img src="x" alt="Image02" />
	</div>
</div>

Würde ich dem div a eine fixe höhe angeben, dann sieht das Gesamtbild bei verkleinertem Fenster falsch aus, da sich dann die Höhe des Headers nicht proportional der Seitenbreite verändert, wie dies das img tut.

Ich habe bereits den Vorschlag mit Float und Clear versucht, hilft meinem Problem leider nicht weiter. Sieht jemand vielleicht einen Fehler in meinem Code und weiß, wie man das Problem lösen kann?

Danke!
 
Hast du es schon einmal mit overflow: hidden; für den Elterncontainer probiert? Ist die absolute Positionierung der Grafiken wirklich notwendig?
 
Zuletzt bearbeitet:
Ich habe gerade deinen Vorschlag eingebaut, die Images gehen nun nicht mehr über die Größe des Eltern-divs hinaus. Somit funktioniert zwar dieses Befehl, löst jedoch mein Problem nicht. Das Eltern-div ist nun nur ca. eine Zeile hoch.
 
Daher meine Frage nach der Notwendigkeit der absoluten Positionierung. Schmeißt du die absolute Positionierung der Bilder raus, erhältst du das gewünschte Ergebnis.
 
Zuletzt bearbeitet:
anders: schmeiß ALLE "position"-Befehle raus, außer du weißt genau, dass du sie unbedingt für etwas brauchst. Lies dich erst einmal ein, welche Effekte die Positioniersarten haben... und warum man immer erst einmal gucken sollte, wie weit man mit dem automatischen Wert (static) kommt.
 
Das geht nur andersherum, daher das die absolut positionierten Elemente so hoch wie das relativ positionierte Elternelement sind, indem du dem absolut positionierten Element left, right, bottom und top auf 0 setzt.
Wobei nicht ganz klar ist, warum du hier umbedingt auf absolute Positionierung setzt.
 
Sorry, ich hab jetzt keine CSS Datei verwendet, sondern alles direkt in style tags geschrieben. Weiß auch nicht, wieso es klappt, vielleicht hab ich dich auch falsch verstanden. Jedenfalls, hat der Header jetzt immer die Höhe, die man beim Bild angibt.

Ich werd aus CSS auch nicht so recht schlau, man sollte immer die Grundregeln verwenden:

1) Lieber ein div zu viel als zu wenig
2) In der Regel will man position:relative für fast alle divs
3) Manchmal kann man Fehler abstellen, indem man width und height definiert, wie auch immer
4) Manchmal hilft auch ein &nbsp;

HTML:
<html>
<head>
</head>
<body>
<div style="width:1200px;height:auto;margin:0 auto; background-color:#999">
	<div style="position:relative;width:900px;height:auto;background-color:#bbb;margin: 0 auto;">
		<div style="position:relative;width:900px;height:auto;margin:0 auto;">
			<div style="height:auto;position:relative;width:500px;margin: 0 auto;">
				<img style="height:200px;position:relative;width:500px;margin: 0 auto;" src="http://upload.wikimedia.org/wikipedia/commons/2/2d/Duck.jpg" alt="Image01" />
			</div>
		</div>
	</div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Alle Achtung, ganze vier DIV-Container und viele entbehrliche Formatierungen für das simple Vorhaben, das auch mit einem einzigen Container + dem Bild realisiert werden könnte ... ;)
 
Ich habe einfach mal ein bisschen Code in den Raum geworfen. Der Eingangspost ist viel zu unspezifisch, um optimalen Code anzugeben.

Bei dem Bild muss man wohl eine explizite Höhe+Breite angeben: http://jsfiddle.net/qc3HC/
 
Die Höhe der Grafik kann man angeben, zwingend ist es hier aber nicht, wie du auch an meinem Link in Beitrag #4 siehst. Der etwas größere Abstand der Grafik zum unteren Containerrand ensteht übrigens durch die im Ausgangscode enthaltene Formatierung margin-bottom: 7px. Ansonsten gleichen sich die Ergebnisse rein optisch.

Mit vertical-align: bottom; wird man auch diesen unliebsamen Rand los: voilà.
 
Zuletzt bearbeitet:
F_GXdx schrieb:
1) Lieber ein div zu viel als zu wenig
2) In der Regel will man position:relative für fast alle divs
3) Manchmal kann man Fehler abstellen, indem man width und height definiert, wie auch immer
4) Manchmal hilft auch ein &nbsp;
Allesamt Mumpitz. Weniger Markup ist immer mehr. Position:static (also der automatische Wert) reicht in 99% der Fälle. Man setzt Elemente nur auf einen anderen Wert, wenn man genau weiß, warum man es macht. Ich hab schon echt merkwürdiges & unerwünschtes Verhalten erlebt, weil ich ein "relative" zu viel gesetzt hab. Das zerballert z.B. gern mal eine Suckerfish-Navi.
Und Width/Height definiert man nur, wenn man muss. Alles andere macht Responsive Design unnötig schwer. Die Sache mit dem &nbsp;.... auf keinen Fall.

F_GXdx schrieb:
Ich habe einfach mal ein bisschen Code in den Raum geworfen. Der Eingangspost ist viel zu unspezifisch, um optimalen Code anzugeben.
Der Eingangspost ist spezifisch genug: Er hat den <img> eine absolute Höhe gegeben. Das war grundsätzlich falsch.

Bei dem Bild muss man wohl eine explizite Höhe+Breite angeben: http://jsfiddle.net/qc3HC/
Nö... Es macht nur hinsichtlich der Ladezeiten Sinn, Bildern die guten alten HTML-Attribute width&height mitzugeben. Es ist aber alles andere notwendig.

Also nochmal: Finger weg von "position", außer man hat keine anderen Lösungswege.
 
Zurück
Oben