Willkommen ~Gast!
Registrieren || Einloggen || Hilfe/FAQ || Staff
Probleme mit der Registrierung im Forum? Melde dich unter registerEin Bild.
Autor Beitrag
000
30.08.2010, 21:42
maurice

Ich habe einen Container mit einem Inhalt drin (#container), am ende sieses DIVs soll daran soll ein anderer Container angehängt werden (#container.child), also quasi wie ein Footer der sich relativ zum Ende des Content-DIVs verschiebt.

Hier ist mein Code:
Quellcode:<head>
<style type="text/css">
<!--
#content
    {
        position:absolute;
        top:200px;
        background:#E9372E;
    }

#content.child
    {
        position:relative;
        top:22px;
        background:#00FF40
    }
-->
</style>
</head>


<body>
    <div id="content">Das hier ist der Content div</div>
    <div id="content" class="child">Div was unterhalt dem Content angehängt werden soll</div>    
</body> Doch leider funktioniert das nicht so wie ich mir das gedacht habe. Ich bin der Meinung, dass sich der Child-div wegen des position:relative und top:22px eigentlich auch mit diesem Abstand relativ zum #content verhalten soll. Tut es aber nicht und ich steh' grad auf dem Schlauch. Was mache ich falsch?

lg maurus

--

Interstellar - visual love

I'm not random, i just have many thoug... Oh look, a Squirrel!
zum Seitenanfang zum Seitenende Profil || Suche
001
30.08.2010, 23:30
maurice

Hm, ich kriegs hin indem ich die Position weg lasse und das mit margin-top regel. oder ist das eine eher nicht elegante lösung?

--

Interstellar - visual love

I'm not random, i just have many thoug... Oh look, a Squirrel!
zum Seitenanfang zum Seitenende Profil || Suche
002
31.08.2010, 15:34
breath-of-death

Das Problem ist, dass du mit position:absolute das #content div auf dem Fluss der Seite heraus nimmst und damit für das #content.child div sozusagen nicht sichtbar ist. Deshalb wird dieses dann relativ zum body positioniert.

Wenn du margin-top verwendest, nimmst du das #content div nicht aus dem Fluss raus und damit macht es das, wie du es dir vorstellst. Da ists nichts falsch an der Lösung, solang der Aufbau der Seite so simpel bleibt. Solltest du aber vor dem #content div z.B. noch ein anderes block element (z.B. ein weiteres div) einfügen, verschiebt sich die position von #content natürlich um die höhe des anderen block elements nach unten...
Um das zu verhindern, einfach die beiden divs in ein drittes div packen, dieses dann absolut bei top:200px positionieren, margin-top beim #content löschen und bei #content.child behalten.

Aber eine Sache noch: IDs sollten einzigartig sein. Verwende einfach "content" und "contentChild" als IDs und lass das class weg. Das hier zu verwenden, macht keinen Sinn.

--
zum Seitenanfang zum Seitenende Profil || Suche