kostenloser Webspace werbefrei: lima-city


Footer will nicht richtig an das Seitenende

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    informatikman

    informatikman hat kostenlosen Webspace.

    Hallo, liebe Freunde

    Ich habe gerade angefangen CSS zu lernen und stecke bei einem Problem fest.

    Zum Lernen arbeite ich gerade den Kurs auf www.html-seminar.de durch und habe zuletzt alles was im Video vorgemacht wurde, EXAKT nachgemacht, komme aber in der Browserausgabe zu einem anderen Ergebnis, als der Vortragende. Hier die Seite mit dem Video:

    http://www.html-seminar.de/sticky-footer-fussleiste-ganz-unten.htm

    Bei ihm ist am Ende der Footer, wie gewollt, ganz unten. Hier ein Link zu meinem Screenshot:

    http://informatikman.lima-city.de/screenshot.JPG

    Meiner Vermutung nach liegt es irgendwie an Firefox 12. Was muss ich tun um die Ausgabe auf diesen zu optimieren?

    Hier meine Quellcodes:
    <!DOCTYPE html>
    
    <html>
        <head>
    
            <title>Im Aufbau</title>
            <meta charset="UTF-8" />
            <meta name="index" content="Diese Homepage dient mir zun&auml;chst zum Lernen von HTML und PHP"/>
            <link href="design.css" type="text/css" rel="stylesheet" />
    
        </head>
    
        <body>
            <div id="seite">
                <header>
                    Diese Seite befindet sich noch im Aufbau
                </header>
    
                <div id="navi">
                    <a href="login.php">Login</a>
                </div>
    
                <div id="inhalt">
                    <p>Inhalt</p>
                    <p>Inhalt</p>
                    <p>Inhalt</p>
                    <p>Letzte</p>
                </div>
    
                <div id="fuss">
                    <a href="kontakt.html">Kontakt</a>
                </div>
            </div>
        </body>
    
    </html>
    
    
    
    *
    {
        margin: 0;
        padding: 0;
    }
    
    html, body
    {
        height: 100%;
    }
    
    #seite
    {
        position: relative;
        background: url(/Bilder/rauhfaser.jpeg);
        width: 100%;
        min-height: 100%;
    }
    
    header
    {
        background-color: darkgrey;
        height: 1.5em;
        line-height: 1.5em;
    }
    
    #navi
    {
        float: left;
        background-color: lightgrey;
        width: 10em;
    }
    
    #inhalt
    {
        margin-left: 10em;
        margin-bottom: 1.5em;
    }
    
    #fuss
    {
        position: absolute;
        bottom: 0px;
        width: 100%;
        background-color: darkgrey;
        height: 1.5em;
        margin-top: 1.5em;
    
        /*line-height: 1.5em;
        margin-bottom: 0;*/
    }


    Vielen Dank im Voraus

    Patrick




    Edit:
    Etwas Inhalt der Übersicht halber entfernt.

    groovestreet


    Beitrag zuletzt geändert: 20.6.2012 19:45:47 von groovestreet
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hallo Patrick,
    Ich habe mal den Code von html-seminar.de genommen und in eine Datei gepackt und bei mir sieht es exakt wie dort beschrieben aus.
    http://raphael811.lima-city.de/zeug_fuer/informatikman.html < Oder ist das so falsch?
    MfG raphael811

    Beitrag zuletzt geändert: 20.6.2012 17:04:28 von raphael811
  4. Autor dieses Themas

    informatikman

    informatikman hat kostenlosen Webspace.

    Vielen Dank für deine Antwort

    Ne, stimmt. Was unter deinem Link erscheint ist richtig. Wird also auch bei mir richtig dargestellt. Dann scheint der Fehler doch nicht im Firefox zu liegen, sondern doch irgendwo in meinem Code. Ich frage jetzt nur wo :D

    Also unter #seite habe ich vergessen Margin zu setzen. Aber daher kommt der Fehler scheinbar trotzdem nicht.

    Dass du alles in einer Datei hast und ich den CSS-Teil ausgelagert habe, dürfte doch nichts ausmachen, oder?

    *heul* Ich hab den Fehler gefunden :D

    Unter #inhalt habe ich margin-bottom verwendet. Das muss einfach nur padding-bottom heißen und schon ist es richtig.

    Vielen lieben Dank für deine Mühe ;) Der Vergleich mit deinem Quelltext hat mir geholfen!

    Beitrag zuletzt geändert: 21.6.2012 12:54:18 von informatikman
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!