Hilfe bei Layout mit Sticky Footer

  • Hallo zusammen,


    seit Stunden versuche ich ein Layout zu erstellen mit einer horiziontalen Navigationsleiste (margin-top 300 px), danach 30 px Platz, dann der Inhalt, wieder etwas Platz und immer unten der Footer.


    Solange der Inhalt nicht die ganze Seite einnimmt, funktioniert das auch, wird der Inhalt länger, rutscht er unter dem Footer durch, so dass sich der Footer über dem Inhalt befindet. Hat jemand einen Tip, wo der Fehler liegt????


    Grüsse, Jürgen



    Hier der "Live-Link": http://www.shen.de/test/


    Hier der html-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">


    <head>
    <title>Fußleiste immer unten</title>
    <meta charset="UTF-8"/>
    <link href="style.css"
    type="text/css" rel="stylesheet"/>
    </head>


    <body>





    <div id="seite">


    <div id="navigation">
    Navigation


    </div>


    <div id="space">
    <br />
    <br />


    </div>



    <div id="inhalt">




    <div id="content">


    Inhalt
    <br />
    Inhalt <br />
    nhalt <br />
    In<br />
    Inhalt nhalt <br />
    Inhalt nhalt <br />
    Inhalt nhalt <br />
    Inhalt nhalt <br />
    Inhalt nhalt <br />


    Inhalt <br />
    Letzte Zeile<br />



    </div>




    </div>


    <div id="fussbereich">
    www.html-seminar.de
    </div>
    </div>


    </body>
    </html>



    Hier der CSS code:


    * {
    margin: 0;
    padding: 0;
    }


    html, body {
    height: 100%;
    }


    body {
    background-image: url(images/header_bg.jpg);
    background-repeat:no-repeat;
    background-position:top;
    margin:0; /* added */
    padding:0; /* added */
    background-color:#fbdfb7;
    }


    #seite {
    position: relative;
    min-height: 100%;
    width: 100%;
    margin: 0 auto;
    }


    #navigation {
    padding-top: 300px;
    text-align: center;
    }


    #content {
    position: absolute;
    left: 50%;
    margin-left: -450px;
    background-color: white;
    padding-bottom: 2em;
    padding-top: 1em;
    padding-left: 1em;
    width: 900px;
    border:thin;
    border-color:gray;
    border-style:solid;
    border-radius: 10px;
    }


    #inhalt {


    padding-bottom: 4em;


    }


    #fussbereich {
    position:absolute;
    bottom: 0;
    width: 100%;
    background-color: gray;
    height: 4em;
    }

  • mhm. Vielleicht hilft das was wenn du bei dem code:




    background-image: url(images/header_bg.jpg); (noch fixed ein gibst) Also:




    background-image: url(images/header_bg.jpg) fixed;


    Das bewirkt, das wenn man scrollt sich nur der Inhalt und Bodybereich bewegt und nicht alles, dass könnte dein Problem lösen...


    aber frag lieber mal noch erfahrenere Programmierer als mich....


    lg

  • Hallo,
    so meinst du das littlecloud:
    background: url(images/header_bg.jpg) fixed;


    das würde gehen aber denke ist nicht erwünscht.
    aber das Stichwort fixed ist schon mal gut, dein footer muss bei der position nicht relative sondern fixed bekommen schon hast du das gewünschte Ergebnis.


    wenn du soweit bist sag beschied.
    Du wirst sehen das du noch etwas ändern musst. (darfst dann gerne fragen)


    desweiteren noch ein paar hinweise.
    with:100% ist in der Regel nicht das was man will wenn das Element display:block hat.
    "(margin-top 300 px" -> bitte auch margin verwenden
    #space kann entfallen wenn du deiner navigation noch ein margin-bottom gibst

  • Probier mal das:


    Ich hab ein wenig was geändert, Details im Code.

  • Roland : ups hab es nicht richtig gesehen, meinte natürlich das was du gesagt hast ;) Ich hab einfach den Code kopiert ohne zusehen ob er eigentlich richtig ist :)