OK, DANKE, Ich werde es mir mal anschauen.
Unabhängig davon habe ich mal mit den Div Boxen rumgespielt. Ich habe mir nun die Seite zum Vorbild genommen und folgendes Ergebnis.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Nio">
<meta name="editor" content="html-editor phase 5">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<!------------------------------------------ Zeile 1 ------------------------------------------>
<!-- Beginn Box 1 -->
<div id="Box1"
style="position:absolute;
width:350px;
height:250px;
z-index:1;
background-color: #E0E0E0;
border: 0px solid #000000;
left: 0px;
top: 0px">
</div>
<!-- Ende Box 1 -->
<!-- Beginn Box 2 -->
<div id="Box2"
style="position:absolute;
width:680px;
height:250px;
z-index:1;
background-color: #FFFFFF;
border: 0px solid #000000;
left: 350px;
top: 0px">
</div>
<!-- Ende Box 2 -->
<!-- Beginn Box 3 -->
<div id="Box3"
style="position:absolute;
width:300px;
height:250px;
z-index:1;
background-color: #ABABAB;
border: 0px solid #000000;
right: 350px;
top: 0px">
</div>
<!-- Ende Box 3 -->
<!-- Beginn Box 4 -->
<div id="Box4"
style="position:absolute;
width:350px;
height:250px;
z-index:1;
background-color: #E0E0E0;
border: 0px solid #000000;
right: 0px;
top: 0px">
</div>
<!-- Ende Box 4 -->
<!------------------------------------------ Zeile 2 ------------------------------------------>
<!-- Beginn Strip 1 -->
<div id="Strip1"
style="position:absolute;
width:350px;
height:5px;
z-index:1;
background-color: #C0C0C0;
border: 0px solid #000000;
left: 0px;
top: 250px">
</div>
<!-- Ende Strip 1 -->
<!-- Beginn Strip 2 -->
<div id="Strip2"
style="position:absolute;
width:680px;
height:5px;
z-index:1;
background-color: #C0C0C0;
border: 0px solid #000000;
left: 350px;
top: 250px">
</div>
<!-- Ende Strip 2 -->
<!-- Beginn Strip 3 -->
<div id="Strip3"
style="position:absolute;
width:300px;
height:5px;
z-index:1;
background-color: #FFFFFF;
border: 0px solid #000000;
right: 350px;
top: 250px">
</div>
<!-- Ende Strip 3 -->
<!-- Beginn Strip 4 -->
<div id="Strip4"
style="position:absolute;
width:350px;
height:5px;
z-index:1;
background-color: #C0C0C0;
border: 0px solid #000000;
right: 0px;
top: 250px">
</div>
<!-- Ende Strip 4 -->
<!------------------------------------------ Zeile 3 ------------------------------------------>
<!-- Beginn Box 1 -->
<div id="Box1"
style="position:absolute;
width:680px;
height:500px;
z-index:1;
background-color: #555555;
border: 0px solid #000000;
left: 350px;
top: 255px">
</div>
<!-- Ende Box 1 -->
<!-- Beginn Box 2 -->
<div id="Box2"
style="position:absolute;
width:300px;
height:500px;
z-index:1;
background-color: #C0C0C0;
border: 0px solid #000000;
right: 350px;
top: 255px">
</div>
<!-- Ende Box 2 -->
</body>
</html>Ich habe den CSS-Codex der einfach halber in html mit eingetragen. Später werde ich diesen aber outsourcen.
Ich habe nun folgendes Problem. Die Boxen haben nun feste Größen. Da die Seite sich aber individuell an den Ausgabemedien anpassen soll, sollte nur der Kern in der Mitte fest bestehen bleiben. Die Flächen Links und Rechts (oben jeweils) sollten variieren. Wer könnte mir hier einen Tipp geben?
Noch etwas - Ist es ratsam in diesem Fall einen Wrapper zu integrieren und was sollte ich dabei beachten?
Danke und Grüße