✔ Footer positionieren

Status
Nicht offen für weitere Antworten.
T

truckdriver

Mitglied
Hallo zusammen,

ich möchte eine Website per CSS gestalten. Klappt auch eigentlich ganz gut nur die Positionierung des Footers macht mir noch Ärger.

Der Footer soll immer am Ende der Seite angezeigt werden (sprich über der Statuszeile des Browsers). Wenn der Inhalt des #content oder #leftside länger ist, soll sich der Footer entsprechend nach unten verschieben. Ich möchte also keinen fixen Footer realisieren.

Ich habe mir schon diverse Beispiele angesehen, aber bekomme es einfach nicht hin. Freue mich deshalb über jeden hilfreichen Hinweis. Das Ganze sollte möglichst mit allen gängigen Browsern funktionieren.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
</head>
<body>
<div id="wrap">
<div id="header">
</div>
<div id="leftside">
<div class="announce">
</div>
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>

Code: 
html, body {
margin:0px;
padding:0px;
background:#f4f4f4 url('images/bg.gif') repeat-y top center;
color:#000000; 
font-style:normal; 
font-variant:normal; 
font-weight:normal; 
font-size:13px; 
font-family: Arial, sans-serif;
height: 100%;
}

#wrap {
color:#000000;
margin:0 auto;
width:900px;
position:relative;
min-height:100%;
height:auto;
height:100%;
}

#header {
margin:0 0;
padding:0;
background:url('images/topbg.gif') repeat-x;
height:84px;
}

#leftside {
clear:left;
float:left;
width:140px;
margin:0 0 5px;
padding:0;
}

#leftside div.announce {
clear:left;
margin:10px 0 15px;
padding:7px 5px;
width:126px;
font-size:0.9em;
background-color:;
color:#505050;
border-left:7px #E0D2B7;
line-height:1.5em;
}

#content {
position:relative;
margin:0 0 40px 170px;
border-left:0;
padding:0 0 10px 0;
line-height:1.5em;
}

#footer {
padding:5px 0px 0px 0px;
position:absolute;
bottom: 0;
margin:0 auto;
border-top:1px solid #000000;
width:900px;
text-align:center;
color:#808080;
background:#E0D2B7;
}
 
Hi,

so sollte es in den Browsern mit der Footer-Positionierung funktionieren:

Code: 
#wrap {
color:#000000;
margin:0 auto;
width:900px;
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}

#footer {
/*padding:5px 0px 0px 0px;*/ /* auskommentiert = deaktiviert */
position:absolute;
bottom: 0;
margin:0 auto;
border-top:1px solid #000000;
width:900px;
text-align:center;
color:#808080;
background:#E0D2B7;
}

#footer p {
margin:0;
padding:5px 0px 0px 0px;
}
Zudem wird der Footer innerhalb des DIV wrap notiert:

Code: 
<div id="wrap">
     <div id="header"></div>
     <div id="leftside">
          <div class="announce"></div>
     </div>
     <div id="content"></div>
     <div id="footer">
          <p>footer</p>
     </div>
</div>
 
Hi,

vielen Dank für die schnelle Antwort!

Leider funktioniert es aber noch nicht so, wie es soll. Rufe ich die Seite im Browser auf, dann wird der Footer zwar direkt über der Statuszeile angezeigt "liegt" aber über dem #content div.

Rolle ich die Seite ab, bleibt der Footer auch in dieser Position stehen. Er befindet sich also nicht am Seitenende.
 
Den Darstellungsfehler kann ich nicht nachvollziehen und ebenso wenig bei mir reproduzieren, will sagen, der Footer wandert bei zunehmenden Inhalt nach unten und verharrt beim Seitenscrollen nicht in seiner Ausgangsposition.

Hast du denn auch die !important-Regel angewendet und den Footer im DIV wrap eingebettet?
 
Und auch hier sitzt der Footer an der gewünschten Position, wie der angehängte Firefox-Screenshot belegt.

Ansonsten solltest du es mal ohne die rotmarkierten Sternchen versuchen, denn die haben da nichts verloren, und könnten bei dir der Grund für das vermeintliche Problem sein:

Code: 
#wrap {
color:#000000;
margin:0 auto;
width:900px;
position:relative;
min-height:100%;
height:auto *!important;*
height:100%;
}
 

Anhänge

  • demo_truckdriver.jpg
    demo_truckdriver.jpg
    153,1 KB · Aufrufe: 42
Vielen Dank für deine Hilfe

Ich habe die Sternchen entfernt und nun wird die Seite auch im Internet Explorer korrekt dargestellt.

Danke!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück