kay c.: footer immer bündig unten, außer ich habe eine lange seite?

SELF-Forum

footer immer bündig unten, außer ich habe eine lange seite?

kay c.
– Informationen zu den Bewertungsregeln

Guten Abend
wie bekomme ich es mit CSS hin, dass ein definierter Footer-Bereich immer bündig am Seitenende hängt (mit mind. xx Pixeln Abstand zum Content), außer der Content-Bereich ist so lang, dass gescrollt werden muss. Dann soll der Footer-Bereich eben xx Pixel nach dem Content kommen.

Wie kriegt man das hin?

danke schonmal, kay

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. footer immer bündig unten, außer ich habe eine lange seite?

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    wie bekomme ich es mit CSS hin, dass ein definierter Footer-Bereich immer bündig am Seitenende hängt (mit mind. xx Pixeln Abstand zum Content), außer der Content-Bereich ist so lang, dass gescrollt werden muss. Dann soll der Footer-Bereich eben xx Pixel nach dem Content kommen.

    Wie kriegt man das hin?

    Ganz einfach - man *sucht* mal, weil das Thema alles andere als neu ist.

    </archiv/2007/1/t145177/#m942061>

    MfG ChrisB

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. footer immer bündig unten, außer ich habe eine lange seite?

      kay c
      – Informationen zu den Bewertungsregeln

      Hi,

      wie bekomme ich es mit CSS hin, dass ein definierter Footer-Bereich immer bündig am Seitenende hängt (mit mind. xx Pixeln Abstand zum Content), außer der Content-Bereich ist so lang, dass gescrollt werden muss. Dann soll der Footer-Bereich eben xx Pixel nach dem Content kommen.

      Wie kriegt man das hin?

      Ganz einfach - man *sucht* mal, weil das Thema alles andere als neu ist.

      </archiv/2007/1/t145177/#m942061>

      MfG ChrisB

      Hallo und danke,
      leider habe ich keine Lösung gefunden. Der Footer soll, auch wenn nur 50% der Bildschirmseite gefüllt sind, GANZ unten am Bildschirmrand hängen. In den Beispielen "wandert" der footer mit nach oben, wenn wenig Text da ist.

      Noch jemand einen Tipp?
      danke

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. footer immer bündig unten, außer ich habe eine lange seite?

        Emanuel
        – Informationen zu den Bewertungsregeln

        Hallo!

        Noch jemand einen Tipp?

        Jop, ein paar postings weiter unten habe ich ein Problem gepostet, dass zwar nicht unbedingt was mit deiner Frage zu tun hat aber das Layout der Seite entspricht dem was du suchst. Ich werde mal den Code posten (mach copy-paste und schaus dir an bzw. stell ich einen Link zu eineml Bild rein wo du siehst wie es aussieht):

          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<style type="text/css">  
*  
{  
 margin:0;  
}  
  
html, body  
{  
 font-size: 100.1%;  
 height:100%;  
 margin:0em;  
 padding:0em;  
 width:100%;  
 min-width:60em;  
}  
  
.outer  
{  
 min-height:100%;  
 margin-bottom:-3em;  
 height:auto;  
}  
  
* html .outer  
{  
 height:100%;  
}  
  
/* commented backslash hack \*/  
html, body{height:100%;}  
/* end hack */  
  
/* Header */  
div.header  
{  
 background:red;  
 height:4em;  
 text-align:center;  
}  
  
/* MAIN */  
  
.main{  
 padding-left:9em;  
 padding-right:9em;  
}  
  
.left{  
 position:relative;  
 background:green;  
 float:left;  
 width:9em;  
 margin-left:-9em;  
 text-align:center;  
}  
  
/*** IE6 Fix ***/  
* html .left{  
 left:9em;  
}  
  
.content{  
 position:relative;  
 background:yellow;;  
 float:left;  
 width:100%;  
 text-align:center;  
}  
  
.right{  
 position:relative;  
 background:brown;  
 float:left;  
 width:9em;  
 margin-right:-9em;  
 text-align:center;  
}  
  
/* FOOTER */  
  
.footer{  
 background:blue;  
 clear:both;  
 height:3em;  
 text-align:center;  
}  
</style>  
</head>  
<body>  
<div class="outer">  
 <div class="header">  
  Header  
 </div>  
 <div class="main">  
  <div class="left">  
   left  
  </div>  
  <div class="content">  
   content  
  </div>  
  <div class="right">  
   right  
  </div>  
 </div>  
</div>  
<div class="footer">  
 footer  
</div>  
</body>  
</html>

        Bilder:
        1.) http://mypic.in.phpwww.de/090222/1S2gxMGv.png (content füllt Seite nicht aus)
        2.) http://mypic.in.phpwww.de/090222/QgYh1G2.png; http://mypic.in.phpwww.de/090222/5haaTMup.png (content füllt viel aus)

        Den Code habe ich aus zwei Ideen die ich im Netz gefunden habe zusammengestückelt. Falls es dich interessiert wie und warum es funktioniert, hier die 2 Seiten.
        1.) (war zwar nicht die Seite von der ichs hab, aber das gleiche Prinzip)
        http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3 (=damit Footer immer unten bleibt)
        2.) http://www.alistapart.com/articles/holygrail (=für ein 3-spaltiges Layout)

        Ich hoffe, du kannst das für deine Seite einsetzen!
        Sollten Probleme (Verschiebung des Layouts beim IE7 und Safari) auftreten, weil du in den mittigen 3 Spalten paddings setzen willst, schau dir mein anderes Posting an: http://forum.de.selfhtml.org/?t=167213&m=1090488

        danke

        Bitte ;)

        MfG Emanuel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. footer immer bündig unten, außer ich habe eine lange seite?

          kay
          – Informationen zu den Bewertungsregeln

          danke

          Bitte ;)

          perfekt! vielen dank :-)

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. footer immer bündig unten, außer ich habe eine lange seite?

        Adda
        – Informationen zu den Bewertungsregeln

        In den Beispielen "wandert" der footer mit nach oben, wenn wenig Text da ist.

        Tut er das wirklich?!?
        MfG,
        Adda

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln