Problem mit komplizierten Design

[Kalma]

Hi,

ich habe ein Problem und zwar habe ich ein Design entwickelt, wo es im Prinzip 3 Hintergrund Bilder gibt, und da drüber soll der Content.

So solles aussehen:
http://vs165143.vserver.de/css/images/design.jpg

Und so sieht es aus:
http://vs165143.vserver.de/css/index.html

Hier die CSS Datei
http://vs165143.vserver.de/css/style.css

Woran liegt das? Ich hab alles probiert, gesucht und so aber ich komm nicht weiter.

mfG
David

 

[Maik]

Hi,

installier dir Firebug und schau dir darin einfach mal an, wo die einzelnen Boxen im Viewport beginnen, und was der Grund hierfür ist.

Übrigens ist eine z-index-Deklaration ohne eine Angabe zur Positionsart position (absolute oder relative) absolut nutzlos, und die Schichtpositionierung der Boxen ergibt sich dann durch ihre Reihenfolge im Markup - frei nach dem Motto: "Wer zuletzt kommt, sitzt ganz oben"

Als Einstiegshilfe für deine Weiterentwicklung des Designs geb ich dir mal diese beiden Regelerweiterungen mit auf dem Weg:

.second_bg {
        margin:0px;
        padding:0px;
        z-index:1;
        position:relative;

}

.seismograph {
        background-image:url(images/seis.jpg);
        background-repeat:repeat-x;
        height:264px;
        margin:0px;
        padding:0px;
        z-index:1;
        position:absolute;
        top:0;
}

Den Rest darfst du eigenständig herleiten und umsetzen, das garantiert dir einen höheren Lerneffekt.

mfg Maik