Detlef G.: Fixe? Positionierung von Elementen

Beitrag lesen

SELF-Forum

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