nicht angemeldet
Hi, Manfred
Moderne Layouts benutzen positionierte <div>-Layer. Der HTML-Code verringert sich auf ein absolut herrliches Minimum:
So ist es.
+------------+
| kopf |
|############|
| m # d e |
| e # t a |
| n # i l s|
| u # |
| # |
| # |
+------------+
wie würdest Du soetwas mit CSS lösen?
Was hältst du davon?
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>CSS statt Tabellen</title>
<style type="text/css">
<!--
#kopf {
position:absolute;
top:0px;
left:0px;
width:100%;
height:70px;
}
#balkenhorizontal {
position:absolute;
top:70px;
left:0px;
width:100%;
height:50px;
color:#000;
background-color:#aaa;
}
#menue {
position:absolute;
top:120px;
left:0px;
width:200px;
}
#balkenvertikal {
position:absolute;
top:120px;
left:200px;
width:80px;
bottom:0px;
height:100%; /* verbesserungswürdig */
color:#000;
background-color:#aaa;
}
#details {
position:absolute;
top:120px;
left:280px;
}
-->
</style>
</head>
<body>
Wobei noch zu sagen ist, dass mir die Lösung von height:100% beim vertikalen Balken nicht gefällt (ist nur zur schnellen Demonstration, weil der IE für bottom:0px zu blöd ist). Ich würde um dieses DIV und die Details entweder noch ein weiteres DIV legen und darin den Balken mit 100% Höhe ausrichten, damit er sich an die Höhe der Details anpasst oder besser noch über ein Hintergrundbild beim Body definieren. Ich habe das Ergebnis mal online gestellt (http://www.skop.net/self/css_layout.html). Viel Spaß beim Experimentieren.
Ich darf eine neue Kerbe in den CSS-Zauberstab ritzen? ;-)
LG Orlando