Footer lässt sich nicht unten fixieren :(...

T

tobm_knows_best

Erfahrenes Mitglied
Hey zusammen...

kann mir einer vielleicht sagen warum sich mein footer - trotz
HTML: 
position: absolute; 
bottom: 0px
nicht am Ende der html-Datei fixieren lässt? (Bis jetzt hatte ich noch das Glück dass sich der footer diesbezüglich vom Abstand des vorhergehenden Divs relativ weit unten ansetzen lässt... )

Bin hier am verzweifeln :( ... aber sowas von :(((

Hier der link zur Seite: http://www.mediengrafik-online.de/Test/cstm/index.html
 
Bei mir (Safari 5.0.5, Mac OS X 10.6.7) wird er unten angezeigt, allerdings mit nervender horizontaler Rollleiste. Ansonsten solltest du vielleicht noch einen Wert für die horizontale Ausrichtung angeben.
 
Ah, das alte Problem mit dem Footer. Versuch mal folgendes:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>webpage</title>
  <style type="text/css">
    /* siehe unten */
  </style>
</head>
<body>
  <div id="header"></div>
  <div id="wrapper" class="clearfix">
    <div id="center">
      <h2>center</h2>
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      ende der seite
    </div>
    <div id="blank"></div>
    <div id="footer">
      <h2>footer</h2>
    </div>
  </div>
</body>
</html>
CSS: 
* {
  margin:0;
  padding:0;
  font:bold 1em verdana,sans-serif;
}
body {
  text-align:center;
}
div {
  text-align: left;
}
html, body {
  height: 100%;
}
div#wrapper {
  position:relative;
  margin:0 auto;
  width:1000px;
  min-height:100%;
  height:auto !important;
  height:100%;
  border-left:1px solid #b8b8b8;
  border-right:1px solid #b8b8b8;
  z-index:1;
}
div#header {
  height:55px;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  width:auto !important;
  min-width:100%;
  background:#339966;
  z-index:2;
}
div#blank {
  height:55px;
  background:#fff;
  border-bottom:1px solid #b8b8b8;
}
div#center {
  width:800px;
}
div#footer {
  clear:both;
  position:absolute;
  bottom:0;
  width:1000px;
  height:55px;
  background:#fff;
  border-top:1px solid #b8b8b8;
}
.clearfix:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  font-size:0;
  visibility:hidden;
}
.clearfix {
  display:inline-block;
}
* html .clearfix {
  height: 1%;
}
.clearfix {
   display:block;
}
 
Zuletzt bearbeitet:
Also entweder ich bin zu blöd - oder es funktoniert immer noch nicht... wo zum G**** bau ich das denn ein.. ? Kannst du mir vielleicht weiterhelfen?

VLG
Tobi...

hier mal der code :/

HTML: 
<div class="div_footer_pic" id="div_footer_pic"></div></div>
<div class="div_footer_navi" id="div_footer_navi">
<ul id="navlist">
<li>© 2012 by Klaus Taugs</li>
<li>|</li>
<li>Darstellung optimiert für Mozilla Firefox</li>
<li>|</li>
<li>Bidschirmauflösung 1280 x 1024</li>
<li>|</li>
<li><a href="mailto:info@pts-agency.eu">info@pts-agency.eu</a></li>
<li>|</li>
<li><a href="http://mediengrafik-online.de/Test/cstm/www.pts-agency.eu">www.pts-agency.eu</a></li>
</ul>
</div>
 
Hmm.... könnte mir vielleicht jemand diesbezüglich *unter die Arme* greifen - bzw. mir anhand MEINES Quelltextes zeigen wo - was - genau positioniert wird? Nicht dass ich mir nicht die Mühe machen würde es dann selbst zu versuchen - aber es würde mir um einiges plausibler erscheinen als anhand div. anderer Beispiele....

Wäre ein wirklich feiner Zug :/

Gruß,
Tobm
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück