Joerg: Layout: Fixer Kopf + Fuss mit Overflow:auto Content

Beitrag lesen

SELF-Forum

Layout: Fixer Kopf + Fuss mit Overflow:auto Content

Joerg
– Informationen zu den Bewertungsregeln

Hallo,

versuche ein Layout über CSS zu erstellen, welches auch im IE6 funktionieren muss.
Habe schon das Web und SelfHTML durchforstet und was gebaut,
das läuft allerdings nicht wie gewollt. ;(
FF zeigt den Kopf nicht korrekt an, IE nichts wie er soll...
Dabei erhalte ich verschiedene Ergebnisse, wenn ich die Reihenfolge der
CSS-Anweisungen für Kopf, Content und Fuss ändere.
Im FF läuft es, wenn ich die Anweisungen für die Zentrierung weglasse?

So soll es sein:
Das Layout soll insgesamt 740 Pixel breit sein, im Fenster zentriert.
Oben steht ein 150 Pixel grosser Kopf fest und unten ein 20 Pixel
großer Fuß, ebenfalls fixiert. Der Bereich dazwischen nimmt den Content
auf und passt sich dynamisch der Fenstergröße an, bei Bedarf wird
ggf. ein Scrollbalken für den Contentbereich eingeblendet (per Overflow).

Kann mir wer helfen?

Hier der bisherige Code:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
<head>  
<title>CSS-Layout</title>  


  
<style type="text/css">  
<!--/  
  
.kopf  
 {  
  position: absolute;  
  top: 0px;  
  width: 740px;  
  height: 150px;  
  left: 50%;  
  margin-left: -370px;  
  background-color:#9999FF;  
 }  
  
 .content  
 {  
  position: absolute;  
  width: 740px;  
  top: 150px;  
  bottom: 20px;  
  left: 50%;  
  margin-left: -370px;  
  overflow:auto;  
 }  
  
.fuss  
 {  
  position: absolute;  
  bottom: 0px;  
  width: 740px;  
  height: 20px;  
  left: 50%;  
  margin-left: -370px;  
  background-color:#9999FF;  
 }  
  
/-->  
</style>  


  
</head>  
<body>  
  
<div class="kopf">  
 Kopfbereich f&uuml;r Logo, Navigation, etc.<p>  
</div>  
  
<div class="content">  
 <h1>Und hier kommt der Content hin!<p>  
 Und<br>der<br>soll<br>scroll<br>wenn<br>er<br>  
 den<br>Bereich<br>&uuml;berschreitet.<br>  
 Dabei<br>aber<br>dynamisch<br>in<br>der<br>H&ouml;he<br>sein!<br></h1>  
</div>  
  
<div class="fuss">  
 Fu&szlig;bereich f&uuml;r fixe Infos wie z.B. Impressum, etc.  
</div>  
  
</body>  
</html>

Danke für Hilfe.

Beitrag melden
–
Informationen zu den Bewertungsregeln