Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Footer in Z-Richtung unter Content legen?“

zer02288

ZeroEnna

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?

HTML:
<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

undefined

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

Mod | Web

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
Code:
#container{
  position: relative;
  z-index: 1;
}
#footer{
  position: relative;
  z-index: 0;
}
notieren, um den footer unter den content zu stapeln
 

cebito

undefined

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 :rolleyes: 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

Mod | Web

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.
 

zer02288

ZeroEnna

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

undefined

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

display:schwarzgelb;

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
Code:
#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

ZeroEnna

AW: Footer in Z-Richtung unter Content legen?

CSS:
PHP:
#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.
 
Zuletzt bearbeitet:

zer02288

ZeroEnna

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. :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben