Axel Richter: Tabellenzelle mit relativer groesse UND overflow:scroll?

Beitrag lesen

SELF-Forum

Tabellenzelle mit relativer groesse UND overflow:scroll?

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

Es geht eben darum das Hintegrgrundbild zu nehmen und nur in dem in der mitte abgesteckten stueck inhalt darzustellen.. (drum die tables bei mir)
Falls wer eine sinvollere loesung als Tables hat waer ich auch gluecklich..

Da das Ganze ja augenscheinlich prozentual mit dem Browserfenster skalieren soll, ist das gar nicht so schwer, das auch den alten IEs beizubiegen. Kompliziert wird es nur, wenn einige der Bereiche (header und/oder footer) fixe Höhen haben sollen.

Ansatz:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Beschreibung der Seite</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
html, body { margin:0; padding:0; height:100%; overflow:hidden; color:#ff0; }  
#background img { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }  
#header { margin:0; padding:0; height:20%; border:1px solid #0f0; }  
#navi { margin:0; padding:0; height:61.5%; width:27%; float:left; border:1px solid #0f0; }  
#content { margin:0; padding:0; height:61.5%; width:47%; float:left; overflow:auto; }  
#rechts { margin:0; padding:0; height:61.5%; width:25%; float:right; border:1px solid #0f0; }  
#footer { margin:0; padding:0; height:18%; clear:both; border:1px solid #0f0; }  
</style>  
</head>  
<body>  
<div id="background"><img src="http://img521.imageshack.us/img521/545/backgroundza2.jpg"></div>  
<div id="header">header</div>  
  
<div id="navi">  
 <ul>  
  <li>navi1</li>  
  <li>navi2</li>  
 </ul>  
</div>  
  
<div id="content">  
  
<h1>Überschrift</h1>  
<p style="margin-bottom:1000px;">Testtext hoch</p>  
<p>Testtext</p>  
<p style="width:1000px;">Testtext breit</p>  
  
</div>  
  
<div id="rechts">rechts</div>  
<div id="footer">footer</div>  
</body>  
</html>

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln