✔ DIV-Layer am Seitenfuss positionieren

Status
Nicht offen für weitere Antworten.
nagelhammer

nagelhammer

Grünschnabel
Hallo Leute,

ich möchte einen Footer erstellen, der immer ganz unten dargestellt wird.
(style="position: absolute; bottom: 0px;")

Das klappt auch wunderbar. Jedoch übermalt dieser Layer alle übergeordneten Elemente, sobald der übrige Inhalt größer wird, als wie die Seite ist. Also sollte dieser Layer zusätzlich die Eigenschaft besitzen sich unter die anderen Elemente zu positionieren, sobald der Seiteninhalt größer ist als die Seite.

Vielleicht aber ist auch einfach mein Ansatz falsch und der Layer sollte nicht absolut positoniert werden, sondern relativ vom letzten objekt. aber wie definiere ich das dann bis zum bottom

Wer kann mir weiterhelfen meine Denkblockaden zu lösen oder die Tomaten von den Augen entfernen?

Grüße
bas
 
probier es doch mal mit "z-index:1;", "z-index:2;", usw

Damit kannst du die Reihenfolge von überlappenden Elemente bestimmen.

gruss, markus
 
Hallo Markus,

danke für diesen Tip. Eigentlich wollte ich genau das in meinen Beitrag mit notieren, daß ich auch das bereits ausprobiert habe.
 
kannst du mal den code posten ... bei mir hängt es meist an irgendeinen div oder table, was ich vergessen habe, korrekt zu schliessen. z-index funktioniert eigentlich wunderbar.

eine frage: funktioniert das nur in einem bestimmten browser nicht oder in allen
 
Welchen Sinn macht der Footer, wenn er von einem Element überdeckt wird :suspekt:

Hier ein CSS-Modell, in dem der Footer mitwandert:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body
{
margin: 0;
padding: 0;
}

div#mainbox
{
margin: 20px auto;
width: 600px;
border: 1px solid #607b94;
}

div#top
{
height: 25px;
border-bottom: 1px solid #607b94;
background-color: #b0cbe4;
}

div#content
{
min-height: 500px; /* Für non-IE Browsers */
border: 1px solid #b0cbe4;
}

* html div#content /* Für IE */
{
height: 500px;
}

div#bottom
{
height: 25px;
border-top: 1px solid #607b94;
background-color: #b0cbe4;
}
-->
</style>

</head>
<body>

<div id="mainbox">

<div id="top">top</div>

<div id="content">content</div>

<div id="bottom">bottom</div>

</div><!-- end div#mainbox -->

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.01

Anmerkung: wenn der Inhalt im DIV#content länger / höher als die voreingestellte Höhe (500px) ist, dehnt sich das umschliessende DIV#mainbox nach unten aus und der Footer #bottom wird nach unten verschoben.
 
mstrauss hat gesagt.:
kannst du mal den code posten ... bei mir hängt es meist an irgendeinen div oder table, was ich vergessen habe, korrekt zu schliessen. z-index funktioniert eigentlich wunderbar.
Zum Vergrößern anklicken....
s.u.

eine frage: funktioniert das nur in einem bestimmten browser nicht oder in allen
Zum Vergrößern anklicken....
natürlich mehrfach getestet unter IE6.0 und FF1.0

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <style>
            body
            {
                margin: 0px;
                font-weight: bold;
                color: white;
                min-width: 800px;
                background-color: #ffffe6;
            }
            
            DIV#header
            {
                z-index: 1;
                background-color: #A2073F;
                text-align: center;
            }

            DIV#body_navigation
            {
                z-index: 2;
                padding-left: 5px;
                float: left;
                width: 150px;
                background-color: #053384;
            }

            DIV#body_content
            {
                z-index: 3;
                float: left;
                width: 80%;
                background-color: #3897DF;
            }

            DIV#footer
            {
                z-index: 4;
                clear: left;
                position: absolute;
                bottom: 0px;
                width: 100%;
                background-color: #A2073F;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="header">
            Logo - Username
        </div>
    
        <div id="body_navigation">
            Link 1<br />
            Link 2<br />
            Link 3<br />
            Link 4<br />
            Link 5<br />
            Link 6<br />
            Link 7<br />
            Link 8<br />
            Link 9<br />
        </div>
    
        <div id="body_content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque velit. Maecenas vehicula wisi vel nibh. Integer hendrerit pede non wisi. Nam adipiscing. Aliquam quis ligula. Ut erat dolor, facilisis vitae, consequat ac, blandit a, ligula. Nullam egestas mollis risus. Pellentesque consectetuer fringilla mi. Maecenas gravida. Praesent ornare elementum velit. Sed sem. Donec vel enim nec urna tincidunt pretium. Etiam at odio. Quisque adipiscing faucibus magna. Proin rhoncus risus sed libero. Morbi accumsan ullamcorper justo. Aliquam magna.<br /><br />
            Duis mauris. Nam rhoncus. Duis porta semper ligula. Curabitur nonummy augue a urna. Aliquam erat volutpat. Morbi a enim at dolor sodales consequat. Mauris metus neque, mollis eget, aliquet lacinia, auctor nec, mi. Morbi malesuada cursus sem. Phasellus luctus, mi ut dignissim pharetra, mi sapien volutpat felis, non sodales purus erat non urna. Aliquam erat volutpat. Vestibulum velit. Maecenas eleifend. Suspendisse non mi. Ut adipiscing dui sed nulla. Cras tincidunt massa eleifend pede.<br /><br />
            Sed egestas vestibulum sem. In tortor. Vivamus luctus, odio ut posuere interdum, elit urna commodo libero, eget sollicitudin libero ipsum eget tortor. Quisque condimentum rhoncus dui. Mauris vel lacus. Integer ultricies porta magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nulla. Donec ultrices. Pellentesque ut lacus in enim tristique ultricies. Sed in velit. Phasellus lacinia, massa sit amet commodo rutrum, eros ante laoreet eros, sit amet pretium arcu elit quis magna. Duis eget odio.<br /><br />
            Phasellus gravida, eros eu porttitor auctor, tortor mi dapibus diam, a semper metus eros in justo. Integer ut lacus et pede sagittis tempor. Etiam pretium magna id magna. Sed odio magna, nonummy sed, ultricies vitae, feugiat vel, quam. Donec sed eros. Nulla suscipit. Phasellus hendrerit sagittis augue. Aliquam interdum, velit non aliquam semper, lectus nunc ultrices mi, et cursus est urna ac nunc. Morbi fermentum. Suspendisse sed erat ac diam adipiscing interdum. Vestibulum quam enim, pretium pretium, ullamcorper vel, lobortis eu, quam. Phasellus ac ligula ut nunc dignissim faucibus. Etiam sit amet sapien id lectus lobortis ultricies. Praesent sit amet metus. Mauris facilisis leo vel ante.
        </div>
    
        <div id="footer">
            Footer - FAQ - Help - Duration - copyright
        </div>
    </body>

@Michael:
Mir geht es darum meinen Footer am Seitenende, nicht jedoch am Fusse des letzen Layers zu positionieren.

Schaut Euch mal den Sourcecode an - das hilft sicherlich viel besser meine Fragestellung zu untermauern.

grüße
bas
 
guten morgen,

als erstes:

je kleiner die zahl, desto weiter hinten in der reihenfolge ist die Ebene. In deinem Beispiel geht es nur, indem du dem Footer folgenden index gibst: z-index:-1

Einziger Nachteil: Negative Index Zahlen funktionieren im Mozilla Firefox nicht ;-(

Warum die normale Sortierung bei dir nicht funktionier, kann ich nur vermuten. Ich denke, es liegt daran, dass nur der Footer mit absoluter Position gesetzt ist.

Grüße,

Markus
 
mstrauss hat gesagt.:
je kleiner die zahl, desto weiter hinten in der reihenfolge ist die Ebene. In deinem Beispiel geht es nur, indem du dem Footer folgenden index gibst: z-index:-1
Zum Vergrößern anklicken....

:) Danke Markus! :)
Durch änderung der Reihenfolge, kombiniert mit position: fixed; wurde meine Problemstellung gelöst!

Viele Dank nochmal!
 
Packe ans Ende der Seite eine "Kopie" des footers, allerdings mit "visibility:hidden".... so ist immer genug Platz für den Footer, da er im Zweifelsfall nur seine unsichtbare Kopie überlagert.

Wenn du annähernd wüsstest, wie hoch der footer ist, würde es auch reichen, wenn du dem letzten Block in der Seite ein entsprechendes margin-bottom gibst.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück