Header als Layoutbereich und Footer als Layoutbereich mit einem zentrierten Textfeld

Unten die CSS für den Header in einer absoluten Position, der ein leerer Layoutbereich ist und die ID=header erhalten hat. Die Navi liegt in einem anderen Layoutbereich darunter und ist in einer relativen Position mit der ID=thainavi positioniert. Das erste Textfeld vom Layout hat die ID=ersteZeile.

Für weitere Beispiele oder auch einen fixierten Header guckt bitte auch hier.

<style>

   #header {
      position: absolute;
      top:0px; left:0px; right:0px;
      background-image: url(./Header.jpg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      height: 340px;
      width: 100%;
   }
  
   #thainavi {
      padding-top: 280px;
   }

   #ersteZeile {
      padding-top: 20px;
   }
  
</style>

Unten die CSS für den Layoutbereich vom Footer, der die ID=footer erhalten hat und das Textfeld, das die ID=footerContent erhalten hat.

Für ein ausführliches Tutorial guckt bitte auf dieser Seite, auf der ich nur anstelle des hier verwendeten Textfeldes einen 2. Layoutbereich verwendet habe.

<style>
   #footer {
      position: absolute;
      left: 0;
      height: 180px;
      width: 100%;
    }
  
   #footerContent {
      position: absolute;
      left: 50%;
      width: 990px;
      margin-left: -495px;
   }
</style>