Beiträge von Juergen

  • 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;
    }