position:absolute und height

[bambi]

Hallo! Ich möchte mit einem div-Element eine Hintergrundgrafik anzeigen. Die Höhe dieser Grafik soll durch die darin enthaltenen Elemente bestimmt werden. Alle Elemente werden mit position:absolute positioniert. Offenbar spielen die absolut positionierten Elemente aber für die Höhe des obersten Elements keine Rolle:

Code: Alles auswählen

<div id="verlauf">
hallo
<h1>Überschrift</h1>
</div>


Code: Alles auswählen

#verlauf {display: block; position: absolute; left: 0px; top: 0px; width: 950px; height: auto; background-image:url(graf/hinter.jpg); background-repeat:repeat-y;}

h1 {position: absolute; left: 21px; top: 10px;}


Die Hintergrundgrafik wird nur beim Wort "hallo" eingeblendet, nicht aber beim <h1> Text (und bei allen weiteren mit absolute positionierten Elementen). Wie mache ich das richtig?

[Juewel]

Hallo bambi,

CSS

Code: Alles auswählen

/* Hier ist die Div-Box Namens #verlauf */

#verlauf {
position:absolute;
left:0;
top:0;
width:950px;
background:url(mainlogo.png) left top #fff repeat-y;
}

/* In dieser Div-Box #verlauf soll h1 positioniert werden. */

#verlauf h1 {
position:relative;
left:21px;
top:10px;
}

/* Und in #verlauf soll der Inhalt(content) ebenfalls positioniert werden */

#verlauf .content {
position:relative;
left:21px;
top:10px;
}

/* Würde aber auch mit Innen- und Aussenabständen gehen */

HTML

Code: Alles auswählen

<div id="verlauf">
<span class="content">hallo</span>
<h1>Überschrift</h1>
</div>


Die Box wächst nun in der Höhe mit ihrem Inhalt und die Grafik ist auch da.

Gruß Juewel

[sejuma]

Code: Alles auswählen

position: absolute; left: 0px; top: 0px;

macht keinen Sinn, denn das ist die Standard-Einstellung.
Verzichte auf die absoluten Positionierungen und positioniere mit margin und/oder float.

[Juewel]

Da hast du recht sejuma.
Das schrieb ich auch als Kommentar in den Css-Code.

Ich ließ top und left aus dem Code von bambi so stehen
weil das div #verlauf ja absolut positioniert werden sollte!
(Wer weiß wohin)

Alles andere darin mit Abständen regeln...