nicht angemeldet
Hi,
mit CSS2 u. ohne Browser-Bugs wäre so ein tabellenfreies Layout eigentlich gar kein Problem. Ich habe, wie viele andere wahrscheinlich auch, die gleichen leidvollen Erfahrungen gemacht wie Du in Bezug auf diese Technik. Mittlerweile bin ich so genervt von diesen ganzen seltsamen Verhaltensweisen und Hacks, bzw. Workarrounds, dass ich eine Mischform aus CSS-Positionierung und Tabellen verwende. Vielleicht ist diese Lösung auch was für Dich. Here it comes:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="imagetoolbar" content="no">
<meta name="MSSmartTagsPreventParsing" content="true">
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
}
#page-wrapper {
margin: 2.5% auto 2.5% auto;
padding: 0;
width: 900px;
text-align: left;
border: 1px solid #c0c0c0;
}
#header {
padding: 5px;
background: #e0e0e0 url(_img/hdot.gif) bottom repeat-x;
}
#main-table {
width: 100%;
border-spacing:0;
border-collapse:collapse;
}
#td-col-1, #td-col-2, #td-col-3 {
vertical-align: top;
text-align: left;
}
#td-col-1 {
width: 25%;
background: #f8f8f8 url(_img/vdot.gif) right repeat-y;
}
#td-col-2 {
height: 500px;
background: #ffffff;
}
#td-col-3 {
width: 25%;
background: #f8f8f8 url(_img/vdot.gif) left repeat-y;
}
#col-1 {
padding: 10px;
}
#col-2 {
padding: 10px;
}
#col-3 {
padding: 10px;
}
#footer {
padding: 5px;
background: #e0e0e0 url(_img/hdot.gif) top repeat-x;
}
</style>
</head>
<body>
<div id="page-wrapper">
<div id="header">
Kopf
</div>
<div id="main">
<table id="main-table" summary="Content (3-Spalten-Layout)">
<tr>
<td id="td-col-1">
<div id="col-1">
Spalte 1
</div>
</td>
<td id="td-col-2">
<div id="col-2">
Spalte 2
</div>
</td>
<td id="td-col-3">
<div id="col-3">
Spalte 3
</div>
</td>
</tr>
</table>
</div>
<div id="footer">
Fuß
</div>
</div>
</body>
</html>
freundlichen Gruß
Danny
Selfcode: fo:) br:& n4:& ie:% mo:) va:| de:] zu:) fl:| ss:) ls:& ls:& js:|
Motto: OpenSource - Das Wissen der Menschheit gehört der Welt!