Footer will nicht richtig an das Seitenende

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

15:18, 20.6.2012

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

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

raphael811 hat kostenlosen Webspace.

17:04, 20.6.2012
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
Autor dieses Themas
informatikman

informatikman hat kostenlosen Webspace.

12:39, 21.6.2012
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
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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city