a0907760: DIV Elemente statt Tabellen

Beitrag lesen

Hallo!

ich würde gern folgendes design statt mit frames mit css gestalten; wichtig ist mir dabei vorallem, dass nur der inhaltsbereich gescrollt wird, und der rest relativ zur fenstergröße fix positioniert wird.
http://www.unet.univie.ac.at/~a0907760/hptest2/

der erstentwurf sieht mal so aus:
http://www.unet.univie.ac.at/~a0907760/hptest/test3.htm

Eigentlich würde ich das ganze ja gern mit div lösen, dabei hab ich aber das Problem, dass ich keine Ahnung hab, wie ich mit das mit dem rand um die Inhaltsbox hinbekomme, hab's daher vorerst mal in einer Tabelle.

Ich würde jetzt gern:
1. statt einer Tabelle das ganze mit div Elementen lösen:
ich weiß zwar, dass ich jeweils die ecken mit position:fixed; auf der seite verteilen kann, hab aber keine ahnung, wie ich die restlichen elemente dazu bekomme, dass sie sich jeweils zwischen den ecken auffüllen;

2. es in der Folge dann bewerkstelligen, dass nur der Inhaltsbereich über einen scrollbalken verfügt, was ja dann eigentlich ganz leicht mit overflow gehen sollte, wenn ich erstmal statt der Tabelle lauter div elemente habe...

hier mal der Code der Datei:

<html>  
<head>  
  
<style type="text/css">  
  
.rand_oben_mitte { background: url(rand/rand_oben_mitte.png); background-repeat:repeat-x; }  
.rand_links_mitte { background: url(rand/rand_links_mitte.png); background-repeat:repeat-y; }  
.rand_rechts_mitte { background: url(rand/rand_rechts_mitte.png); background-repeat:repeat-y; }  
.rand_unten_mitte { background: url(rand/rand_unten_mitte.png); background-repeat:repeat-x; margin:auto; }  
.hintergrund { background: url(rand/hintergrund.png); background-repeat:repeat; }  
</style>  
  
</head>  
  
  
<body bgcolor="#494f5b">  
  
<table  border="0" cellspacing="0" cellpadding="0" style="height:100%; margin-left:100px; margin-top:50px; margin-right:100px; margin-bottom:100px;">  
<tr>  
<td><img src="rand/rand_links_oben.png" alt="logo"></td>  
<td width="100%" class="rand_oben_mitte"></td>  
<td><img src="rand/rand_rechts_oben.png" alt="logo"></td>  
</tr>  
  
<tr>  
<td class="rand_links_mitte"></td>  
<td width="100%" class="hintergrund">  
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hier soll gescrollt werden, der obere, untere und seitliche rand soll fix positioniert werden<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p align="right">test</p></td>  
<td class="rand_rechts_mitte"></td>  
</tr>  
  
<tr>  
<td><img src="rand/rand_links_unten.png" alt="logo"></td>  
<td width="100%" class="rand_unten_mitte"></td>  
<td><img src="rand/rand_rechts_unten.png" alt="logo"></td>  
</tr>  
  
</table>  
  
</body>  
</html>