floater: Fixe Positionierung von Elementen

SELF-Forum

Fixe Positionierung von Elementen

floater
– Informationen zu den Bewertungsregeln

Hallo,

ich habe folgendes Problem:

ich möchte mit CSS eine Seite mit gestalten, indem ich Elemente fix positioniere.
Die Elemente sind folgende (Reihenfolge entspricht der, wie sie im Browser angezeigt werden sollen):

  • Header
  • Main
  • Footer

Die Elemente sollen im Quelltext so stehen, dass Main( der Hauptinhalt) oben steht.

Mein Quelltext sieht so aus:

<html-code>

<body>
 <div id="documentDiv">
  <div class="pageDiv">
   <div id="pageMainDiv">MAIN<br>
    <p>xx</p>
   </div>
   <div id="pageFooterDiv">FOOTER</div>
   <div id="pageHeaderDiv">HEADER</div>
  </div>
 </div>
 </body>

</html-code>

Mein zugehöriges css so:

<css-code>
 body
 {
  background-color:#FFFFFF;
  margin:0px;
  font-family: Arial, Helvetica, sans-serif;
 }

#documentDiv
 {
  height: 100%;
  width:100%;
  background-color:#FFFFFF;
  text-align:center;
  position:relative;
  top:0px;
  left: 0px;
 }

.pageDiv
 {
  margin: 0px auto 0px auto;
  padding:0px;
  background-color:#FFFFFF;
  width: 980px;
  background-color:#000099;
  border: 1px solid #FFFFFF;
  text-align:left;
 }

#pageHeaderDiv
 {
  margin: 0px;
  padding:0px;
  position:absolute;
  top:0px;
  height:100px;
  background-color:#990000;
  width: 980px;
  clear:both;
 }
 #pageMainDiv
 {
  margin: 0px auto 0px auto;
  padding:0px;
  position:relative;
  top:120px;
  width: 980px;
  background-color:#999900;
  clear:both;
  height: 100%;
 }
 #pageFooterDiv
 {
  margin: 0px auto 0px auto;
  padding:0px;
  width: 980px;
  height:200px;
  background-color:#FFFFFF;
  position:relative;
  clear:both;
 }
</css-code>

Die Seite soll zentriert angezeigt werden.

Ich habe es erreicht, dass die Seite zentriert und die Elemente in gewünschter Reihenfolge angezeigt werden.

Nun mein Problem:
Der FOOTER soll aber immer unter MAIN stehen!
Wenn MAIN einen "großen" Inhalt hat, dann wird er unter FOOTER weitergeführt.

Wie schaffe ich es, dass FOOTER immer unter dem beiebig großen MAIN steht?

Gruß,
Floater

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Fixe Positionierung von Elementen

    Rossi
    – Informationen zu den Bewertungsregeln

    Hi,
    schon mal hier geschaut...?

    http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss

    Gruß Rossi

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Fixe Positionierung von Elementen

      floater
      – Informationen zu den Bewertungsregeln

      Hallo,

      schon mal hier geschaut...?
      http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss
      Gruß Rossi

      Danke,
      aber hier erkenne ich weder eine Lösung noch einen Zusammenhang zu meinem Problem....

      Gruß,
      Floater

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Fixe? Positionierung von Elementen

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo floater

    ich möchte mit CSS eine Seite mit gestalten, indem ich Elemente fix positioniere.

    ^^^
    Ich sehe nirgends eine fixe Positionierung.
    Willst du wirklich fix positionieren oder meintest du, du verwendest absolute Positionierung, um in der Anzeige eine andere Reihenfolge der Elemente zu erhalten als im Quelltext?

    <body>
    <div id="documentDiv">

    #documentDiv dürfte überflüssig sein.

    <div class="pageDiv">

    Warum eine Klasse? Kommt dies mehrmals in einem Dokument vor?
    Dieses Element horizontal zentrieren und mit position:relative versehen damit sich Positionierungen nachfolgender Elemente auf dieses beziehen.

    <div id="pageMainDiv">MAIN<br>
        <p>xx</p>
       </div>

    Mit einem padding-top versehen, damit der Inhalt nicht von #pageHeaderDiv verdeckt wird.

    <div id="pageFooterDiv">FOOTER</div>

    Bis hierher alles im normalen Elementfluss lassen, also keine Positionierungen.

    <div id="pageHeaderDiv">HEADER</div>

    Mit position-absolute aus dem Elementfluss nehmen und oben positionieren.

    </div>
    </div>
    </body>

    Mein zugehöriges css so:

    Das steht schon weit mehr drin, als wirklich nötig wäre.

    Wie schaffe ich es, dass FOOTER immer unter dem beiebig großen MAIN steht?

    Indem du ihn einfach dort lässt.

    z.B.:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
  <head>  
    <title>Test</title>  
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
  </head>  
  <body>  
    <div class="pageDiv">  
      <div id="pageMainDiv">MAIN  
        <p>xx</p>  
      </div>  
      <div id="pageFooterDiv">FOOTER</div>  
      <div id="pageHeaderDiv">HEADER</div>  
    </div>  
  </body>  
</html>  


     html, body {  
  margin:0;  
  padding:0;  
  background-color:#FFFFFF;  
  font-family: Arial, Helvetica, sans-serif;  
  text-align:center;  
 }  
 .pageDiv  
 {  
  margin: 0 auto;  
  width: 980px;  
  background-color:#999900;  
  text-align:left;  
  position:relative;  
 }  
 #pageHeaderDiv  
 {  
  position:absolute;  
  top:0px;  
  left:0;  
  height:100px;  
  background-color:#990000;  
  width: 980px;  
 }  
 #pageMainDiv  
 {  
  padding-top:100px;  
 }  
 #pageFooterDiv  
 {  
  height:200px;  
  background-color:#00FFFF;  
 }

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln