Ergebnis 1 bis 5 von 5

Thema: Footer ganz unten platzieren / verwirrende absolut Positionierung

  1. #1
    RobGe
    Gast

    Standard Footer ganz unten platzieren / verwirrende absolut Positionierung

    Hallo Community,
    ich bin schon fast am verzweifeln und bitte daher um euren Rat.
    Ich möchte den Footer auf meiner Seite ganz unten platzieren.
    Was ich durch folgende CSS befehle realisieren wollte:
    #footer
    {
    position: absolute;
    bottom: 0;
    }

    Hatte mich belesen das es so funktionieren soll, doch leider klappt es bei mir nicht. Scheinbar stört sich der Footer-DIV an dem Menü-DIV. Denke es liegt daran das beide die Positionierung absolute erhalten haben. Wenn ich die Positionierung vom Menü-Div lösche, wird der Footer genau da platziert wo er eigentlich hin soll. Doch somit befindet sich mein Menü nicht dort wo es eigentlich sein sollte.
    Habt ihr eine Idee was ich ändern könnte?
    Wäre sehr dankbar.
    Viele Grüße,
    RobGe

    anbei mal mein Quellcode:
    CSS-Datei:
    html
    {
    height: 100%;
    }

    body
    {
    margin: 0;
    padding: 0;
    height: 100%;
    }

    #container
    {
    background-color: #aeaeae;
    width: 900px;

    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* overflow: hidden !important; */

    margin: auto;
    padding: 0;
    position: relative;
    }

    #header
    {
    width: 900px;
    height: 200px;
    }

    #menu
    {
    position: absolute;
    top: 275px;
    left: 70px;
    margin: 0px;
    width: 200px;
    }

    #content
    {
    margin-left: 300px;
    padding-bottom: 30px;
    width: 500px;
    clear: both;
    }

    #support
    {
    margin-left: 300px;
    width: 500px;

    }

    #footer
    {
    position: absolute;
    bottom: 0; /* wichtig */
    margin: 20px;
    margin-left: 200px;
    text-align: center;
    }


    HTML-Datei:
    <!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>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    </head>
    <body>
    <div id="container">
    <div id="header"> </div>
    <div id="content">
    <h3>&Uuml;berschrift</h3>
    ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text ganz viel text
    </div>
    <div id="support">
    <h3>&Uuml;berschrift 2</h3>
    <p>noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text noch mehr text </p>

    <div id="footer">&copy; 2011 FOOTER</div>
    </div>
    <div id="menu">
    Ganz viele Links
    </div>
    </div>
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Footer ganz unten platzieren / verwirrende absolut Positionierung

    Warum positionierst du #menu absolut?
    Nimm besser float und margin.

    Ansonsten sieh dir mal diese Lösung an: http://www.ohne-css.gehts-gar.net/0044.php

  3. #3
    RobGe
    Gast

    Standard AW: Footer ganz unten platzieren / verwirrende absolut Positionierung

    Hm also da steig ich nich ganz hinter =(
    Wenn ich den Menü-DIV "float: left" setze, zerschießt es mir das ganze Layout.
    Was mache ich falsch?

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Footer ganz unten platzieren / verwirrende absolut Positionierung

    Das liegt an der Verschachtelung. Bezugspunkt für den Footer ist der #content und nicht der container.
    Wenn du das #menu innerhalb #container setzt, kannst du auch float verwenden.

  5. #5
    RobGe
    Gast

    Standard AW: Footer ganz unten platzieren / verwirrende absolut Positionierung

    Hm sorry, komm ich nich ganz mit...
    Also das Menü is doch im Container verschachtelt.
    Hier nochmal mein HTML-Code (etwas übersichtlicher):
    <!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>
    -------<link rel="stylesheet" href="style.css" type="text/css" media="screen">
    </head>

    <body>
    <div id="container">
    -------<div id="header"> </div>
    -------<div id="content">
    --------------<h3>&Uuml;berschrift</h3>
    --------------<p>ganz viel text ...</p>
    -------</div>
    -------<div id="support">
    --------------<h3>&Uuml;berschrift 2</h3>
    --------------<p>noch mehr text ...</p>

    --------------<div id="footer">&copy; 2011 FOOTER</div>
    -------</div>
    -------<div id="menu">
    --------------Ganz viele Links
    -------</div>
    </div>
    </body>

    </html>

Ähnliche Themen

  1. Problem mit FOOTER-Positionierung
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 31.01.2009, 15:46
  2. Div ganz unten
    Von Jonas94 im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 29.01.2009, 18:11
  3. Bild Footer ganz unten einfügen
    Von Manuh im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 02.01.2007, 12:09
  4. Antworten: 6
    Letzter Beitrag: 05.04.2006, 00:15
  5. Seite ganz unten starten
    Von im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 02.10.2005, 00:54

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •