Axel Richter: XHTML mit 4 Spalten und 3 Zeilen

Beitrag lesen

SELF-Forum

XHTML mit 4 Spalten und 3 Zeilen

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

Auf meinem Papier schaut das ganze so aus:

| 1  |  2 |       3  |  4 |
|    |---------------|    |
|    |  5 |    6     |    |
|    |    |          |    |
|----|    |          |----|
|    |    |          |    |
|    |    |          |    |
|  7 |----|          |    |

8 9

Die Divs 1,2,3,4,5 sollen fest gefixed sein und sich nicht verlängern lassen,
die DIVs 7,8,9 sollen sich am Boden befinden und nach oben verlängern sofern DIV 6 (Inhalt) sich nach unten verlängert.

Grundidee für ein solches Zeitungsseitenlayout:

  • eine obere Richtschnur für die fix oben angehefteten Schnipsel und eine untere Richtschnur für die fix unten angehefteten Schnipsel
  • dazwischen der Inhaltsbereich mit einer Mindesthöhe, der die obere und untere Richtschnur auseinanderdrückt

Entwurf:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>Zeitungsseitenlayout</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
<style type="text/css">  
* {margin:0; padding:0;}  
body {background-color:#5A5D5A;}  
#zeitungsseite {width:1000px; margin:auto; background-color:#C6C3C6;}  
#obereRichtschnur {position:relative}  
#spalte1 {position:absolute; top:0; left:0; width:150px; height:300px; background-color:#00FFAD;}  
#spalte2 {position:absolute; top:0; left:150px; width:150px; height:150px; background-color:#FF7D00;}  
#spalte3 {position:absolute; top:0; left:300px; width:550px; height:150px; background-color:#AD00FF;}  
#spalte4 {position:absolute; top:0; right:0; width:150px; height:300px; background-color:#00AEAD;}  
#spalte5 {position:absolute; top:150px; left:150px; width:150px; height:300px; background-color:#FF00FF;}  
#spalte6Inhalt {padding-top:150px; margin-left:300px; width:550px; min-height:400px; background-color:#FFDF00;}  
#untereRichtschnur {position:relative;}  
#spalte7 {position:absolute; bottom:0; left:0; width:150px; background-color:#7B00FF;}  
#spalte8 {position:absolute; bottom:0; left:150px; width:150px; background-color:#00E3FF;}  
#spalte9 {position:absolute; bottom:0; right:0; width:150px; background-color:#00FF00;}  
</style>  
<!--[if IE]>  
<style>  
#spalte6Inhalt {height:400px;} /*min-height Ersatz für IE*/  
#untereRichtschnur {width:100%;} /*hasLayout für IE*/  
</style>  
<![endif]-->  
</head>  
<body>  
<div id="zeitungsseite">  
 <div id="obereRichtschnur">  
  <div id="spalte1">Spalte 1</div>  
  <div id="spalte2">Spalte 2</div>  
  <div id="spalte3">Spalte 3</div>  
  <div id="spalte4">Spalte 4</div>  
  <div id="spalte5">Spalte 5</div>  
 </div>  
 <div id="spalte6Inhalt">Spalte 6</div>  
 <div id="untereRichtschnur">  
  <div id="spalte7">Spalte 7<br />Spalte 7</div>  
  <div id="spalte8">Spalte 8</div>  
  <div id="spalte9">Spalte 9<br />Spalte 9<br />Spalte 9</div>  
 </div>  
</div>  
</body>  
</html>

Bitte hierzu lesen:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
http://www.satzansatz.de/cssd/onhavinglayout.html

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln