Footer am unteren Browserrand

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Footer am unteren Browserrand

    Hallo
    Ich hätte gerne, dass der Footer am unteren Rand im Browser ist. Fest.
    Der Rest der Seite, soll entwerder scrollbar sein, falls es viel ist, oder bis nach unten gehen, wenn es nur ein kurzer Text o.ä. ist.
    Der footer soll immer fix am unteren Rand des "Bildschirmes", bzw. des Browserfensters sein.
    Habe jetzt schon ewig im Netz gestöbert, und etliche Threads dazu gefunden, aber nie ne Lösung, die funktionierte.
    Vielleicht habe ich nach dem Falschen gesucht. Ich weiss es nicht.

    Der footer an sich ist relativ kurz:

    Quellcode

    1. <div id="footer">
    2. <hr width="100%">
    3. <p><a href="http://www.freesoft-board.to/f291/......Disclaimer.html">Disclaimer</a></p>
    4. </div>


    möchte nur diesen Link mittig im Footer haben.

    Im Stylesheet steht noch:

    Quellcode

    1. div#footer{background: #000000;color: #FFFFFF;text-align:center}
    2. div#footer p{margin:0;padding:5px 10px}
    3. div#footer{clear:right;width:100%}


    Wenn ich

    Quellcode

    1. #footer {position:absolute; bottom:0px; width:760px; height:10px;}


    ins Stylesheet einfüge, muss man scrollen, um den Footer zu sehen, dass möchte ich vermeiden.
    Zu breit ist er auch. Kann man ihn relativ breit machen? also einfach immer von links nach rechts, ohne Scrollen in horizontaler Richtung?

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von RimShot ()

  • Bei mir sieht der Footer mit CSS folgendermaßen aus:

    Im Head irgendwo zwischen

    Quellcode

    1. <style type="text/css">
    und

    Quellcode

    1. </style>
    steht der Eintrag

    Quellcode

    1. .footer {
    2. position: fixed; bottom: 0em; left: 10em; right: 10em;
    3. height: 1em;
    4. color: #FFFFFF;
    5. text-align: center; font-style: normal; font-size: 12px; font-weight: bold;
    6. z-index: 1;
    7. }


    Im Body rufst du dann einfach den Footer als Style auf

    Quellcode

    1. <div class="footer">
    2. Text
    3. </div>


    Durch das fixed bleibt er übrigens am unteren Bildrand "kleben".

    Die anderen Seitenelemente kannst du dann beispielsweise mit

    Quellcode

    1. .inhalt {
    2. position: absolute;
    3. left: 150px; right: 10px; top: 7em;
    4. padding-top: 1em; padding-bottom: 1em; padding-left: 5em; padding-right: 5em;
    5. color: #FFFFCC;
    6. text-align: justify; font-style: normal; font-weight: normal; font-size: 18px;
    7. z-index: 2;
    8. }

    definieren.

    Die Elemente hab ich übrigens einfach mal so rauskopiert wie sie waren. Die Werte kannst du dir ja dann anpassen. Oder löschen was du nicht brauchst.

    Ich hoffe das hilft dir weiter.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Shadowww ()