Footer unter dem Main Verschieben

[Maggo1982]

Einen schönen guten Abend...

ich benutze momentan Contao 3.1.5 und hab ein externe Stylesheet am start.

Ich werde noch wahnsinnig, bekomme den "footer" nicht bsp "100px" unter den "main .inside"

/* Layout
--------------------------------------------------------------*/
#top {
    background-color: #FDFDFD;
    }
#wrapper {
    width: 100%;
    }
#header {
    width: 100%;
    background-image: url("../../Template/IMG/background.jpg");
    background-repeat: repeat-x;
    padding-top:80px;
    height:150px;
    }
#header .inside {
    width:960px;
    background-color: #ffffff;
    padding: 50px 50px 0 50px;
    height: 330px;
    border-style: solid;
    border-width:0 0 10px 0;
    border-color:#FFFFFF;
    margin-left:auto;
    margin-right:auto;
    }
#main .inside {
    background-color: #ffffff;
    padding: 0 50px 50px 50px;
    width:960px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:50px;

    }
#footer {
    position:relative;
    margin-top:150px;
    width:100%;
    background-color: #FBF7EA;
    border-style: solid;
    border-width:10px 0 0 0;
    border-color:#F6EEDB;
    height:430px;
    }
#footer .inside {
    width: 960px;
    margin-left:auto;
    margin-right:auto;
    height:400px;
    padding-bottom: 50px;
    padding: 0 50px 0 50px;
    background-color: #FBF7EA;
    }
#footerbgsh {
    height: 100px;
    width: 1100px;
    background-image: url("../../Template/IMG/shadow.png");
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
    }
#shadowleft {
    height: 1075px;
    width: 33px;
    background-image: url("../../Template/IMG/left.png");
    background-repeat: no-repeat;
    position: absolute;
    z-index: -2;
    top: -130px;
    left: -85px;
    }
#shadowright {
    height: 1069px;
    width: 32px;
    background-image: url("../../Template/IMG/right.png");
    background-repeat: no-repeat;
    position: absolute;
    z-index: 111;
    top: -130px;
    right: -430px;
    }

Die Webseite dazu ist unter : http://kosmetikiknam.slm-media.de/

Will nur das der Footer (rein fürs Optische) etwas unter dem Main sich verschiebt...

Hat jemand vlt. eine Idee?

Danke im Voraus

Viele Grüße
Marco Scacciotti

 

[Dominic28]

Hallo,
Du hast dem Footer margin-top: -100px zugewiesen.
Wenn du den 100px vom Content entfernt haben möchtest, musst du nur das Minus entfernen ;)

 

[Maggo1982]

Hi,

hab da schon wieder einiges geändert.. Es soll im endeffekt so aussehen wie im Anhang ...

 

[Tronjer]

Lösche die position aus dem CSS. Das ist die Grundlage allen Übels.

 

[Maggo1982]

...Wenn ich in der Entwickler Umgebung / Chrome.. Dann passiert leider auch nichts...

 

[Tronjer]

Wenn die positions weg sind, solltest du den Footer aber mit margin verschieben können.

 

[Dominic28]

Naja er möchte ja den Footer unter den Main-Bereich schieben.

Wenn du den footer absolut positionierst und <div class="inside"> einen höheren z-index gibst klappt das auf jeden Fall.

 

[Maggo1982]

Einen schönen guten Morgen,

also ich hatte die Nacht noch eine Idee was ich eben probierte und es funktioniert.. Ich habe einfach ein Image im "#container" bottom gesetzt und siehe da, ich habe den gewünschten Effekt..

Danke viel mals noch mal

Viele Grüße

 

[threadi]

Bilder sollte man nicht als Abstandshalter verwenden. Dafür ist heutzutage CSS gedacht.

 

[Maggo1982]

Richtig.. Normal wäre das auch kein Problem...Bin aber zufrieden das es jetzt funktioniert.. :)