Footer in Z-Richtung unter Content legen?

[zer02288]

Ich habe eine Website mit Background-Image und nun wollte ich den Footer wie gedacht anordnen.
Der Footer verdeckt als PNG ein par Buttons vom Content mit Transparenz.
Somit kann ich diese Button nicht anwählen.
Ich kann aber den Footer ja auch schlecht über den Content anordnen mit <div>
Per CSS hab ich auch schon alles probiert aber ich hab mich irgentwie selbst eingebaut!
Hat jemand noch ne schlaue Idee?

<div id="container">
        <div id="oben">
            <div id="topmenu">
                <jdoc:include type="modules" name="top" style="xhtml" />
            </div>
            <div id="search">
                <jdoc:include type="modules" name="search" style="xhtml" />
            </div>
        </div>
        <div id="mitte">
            <?php if($this->countModules('left')) : ?>
                <div id="linksmenu">
                    <jdoc:include type="modules" name="left" style="vfb" headerLevel="3" />
                </div>
            <?php endif; ?>
            <?php if($this->countModules('right')) : ?>
                <div id="rechtsmenu">
                    <jdoc:include type="modules" name="right" style="xhtml" />
                </div>
            <?php endif; ?>
            <div id="content<?php echo $contentwidth; ?>">
                <div id="breadcrumb">
                    <jdoc:include type="modules" name="breadcrumb" style="xhtlm" />
                </div>
                <jdoc:include type="component" />
            </div>
        </div>
    </div>
    <div id="footer">
        <jdoc:include type="modules" name="footer" style="xhtml" />
        <div id="end">
            <jdoc:include type="modules" name="impressum" style="xhtml" />
        </div>
    </div>

 

[cebito]

AW: Footer in Z-Richtung unter Content legen?

Und? Was sollen wir jetzt damit anfangen? Ist doch wunderbar angeordnet, Wirst wohl in der css was vermurkst haben. Ohne die ist dir nicht zu helfen.

 

[sokie]

AW: Footer in Z-Richtung unter Content legen?

wenn ich das so auf die schnelle richtig gesehen habe, sind #container und #footer geschwister, oder?
dann kannst du einfach

#container{
  position: relative;
  z-index: 1;
}
#footer{
  position: relative;
  z-index: 0;
}

notieren, um den footer unter den content zu stapeln

 

[cebito]

AW: Footer in Z-Richtung unter Content legen?

...um den footer unter den content zu stapeln

So hab ich das gar nicht verstanden, danke Sokie. Hatte gedacht sein footer rutscht ihm irgendwie zu hoch Jetzt schnall ich das erstmal was er will, wobei sich mir dabei nicht erschließt, wozu der footer den BG vom contentbereich bilden soll. Ist mir ehrlich zu hoch... das ließe sich sicherlich anders lösen.

 

[sokie]

AW: Footer in Z-Richtung unter Content legen?

Ist mir ehrlich zu hoch

mir eigentlich auch, aber ich hab die Frage eben so verstanden.
vielleicht bekommen wir ja noch was zu sehen was uns verstehen lässt, wieso elemente des footers den Content überlagern könnten... (negatives Margin?)
zer02288, wir brauchen schon auch das css.

 

[cebito]

AW: Footer in Z-Richtung unter Content legen?

(negatives Margin?)

Genau an sowas hab ich gedacht. Und ja, die css brauchen wir, es sei denn, es hat sich mit deinem anderen Post erledigt.

 

[zer02288]

AW: Footer in Z-Richtung unter Content legen?

sorry kann euch erst morgen die CSS schicken. Hab nen fertiges Layout bekommen und da is als footer ein volleyball-netz drauf das an den beiden enden stangen hat die sehr weit nach oben ragen...und diese reichen bis in den content
so wie die weis rot gestrichelte Stange.
Ich bring mal morgen das Layout hier rein...dann versteht man glaub ich alles.
und danke schon mal für die Antworten....werd das was Sokie gesagt hat mal testen.

 

[cebito]

AW: Footer in Z-Richtung unter Content legen?

Naja, warten wir mal auf morgen und aufs Layout und die css. Nur soviel, wenn in deinem contentbereich kein Hintergrundbild ist, kannst du die Stangen auch "abschneiden" und dem contentbereich oder dem div mitte als background mitgeben. background-position:bottom;

 

[hubspe]

AW: Footer in Z-Richtung unter Content legen?

wenn ich das so auf die schnelle richtig gesehen habe, sind #container und #footer geschwister, oder?
dann kannst du einfach

#container{
  position: relative;
  z-index: 1;
}
#footer{
  position: relative;
  z-index: 0;
}

notieren, um den footer unter den content zu stapeln

um die Stapelreihenfolge umzukehren reicht position:relative für den Content, der footer kann ruhig position:static behalten.

Aber ohne Link zum Problem kann man eh nur rumraten.

 

[zer02288]

AW: Footer in Z-Richtung unter Content legen?

CSS:

#mitte{
    background: #ffffff;
    width: 100%;
    margin:0pt;
    padding-top: 0px;
    float:left;
}
#linksmenu{
    width: 15em;
    /*height: 500px;*/
    background: #666633 url(../images/left.png) repeat-y;
    margin: 0px;
    float:left;
}
#content60{
    width: 60%;
    margin: 0px;
    float:left;
    background: #ffffff;
    padding:10px;
}
#content80{
    width: 80%;
    margin: 0px;
    float:left;
    background: #ffffff;
    padding:10px;
}
#content100{
    width: 95%;
    margin: 0px;
    float:left;
    background: #ffffff;
    padding:10px;
}
#rechtsmenu{
    float:right;
    width: 15em;
    /*height: 500px;*/
    background: #666633 url(../images/right.png) repeat-y;
    margin: 0px;
}
.contentheading{
    color: #0033FF;
    font-size:16px;
    font-weight:bold;
}
#footer{ 
    background:    url(../images/footer.png) no-repeat center bottom;
    height:512px;
    width:100%;
    float:left;
    margin-top:-350px;
    margin-bottom:0px;
    margin-left:0px;
}
#end{
    background:#000000 repeat-x bottom;
    height:100px;
    margin-top:510px;
}

Ich denke mal das, dass negativ Margin nicht gerade die feine eng. Art ist.
Und hier das Template:

Uploaded with

Werd jetzt erstmal Sokies Vorschlag testen und dann Feedback geben.
Achso, im Container steht nur padding und margin drin.

 

[zer02288]

AW: Footer in Z-Richtung unter Content legen?

Und Sokie hat natürlich Recht gehabt! Danke schön!!! auch allen anderen!
Die div's sind Geschwister...wusste nur nicht das ich das mit z-index: anorden kann.
Das erspart mir jetzt ne Menge Arbeit.