TABLE til DIV
Jeg sidder lige og prøver at forstå hvad der er sket det seneste år inden for kodning af hjemmesider. Det ser ud til at det nærmest er blevet forbudt at bruge tabeller til at styre layoutet samt at HTML 4.01 er blevet erstattet af XHTML 1.0.Så problemet er at jeg har denne side som jeg rimelig nemt kunne lave med tabeller, men hvordan kan man skrive den med DIVs? Det er vigtigt at der er sådan en hvid "stribe" med en border i venstre og højre side. Men jeg kan ikke lige gennemskue hvordan man skal kunne lave det..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Title</title>
<style type="text/css" media="screen"><!--
html {
height:100%;
}
body {
height:100%;
margin:0px;
padding:0px;
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
color:#000000;
background:#EEEEEE;
}
a {
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
}
a:link {
color:#0045AD;
}
a:visited {
color:#0066FF;
}
a:active, a:hover {
color:#99CC66;
}
table.cent100 {
height:100%;
margin-left:auto;
margin-right:auto;
}
table.cent {
margin-left:auto;
margin-right:auto;
}
table.cent100b {
height:100%;
width:750px;
margin-left:auto;
margin-right:auto;
border-left:1px solid #979FA8;
border-right:1px solid #979FA8;
background-color:#FFFFFF;
}
table.centcon {
width:600px;
margin-left:auto;
margin-right:auto;
border-left:1px solid #CCCCCC;
}
-->
</style>
</head>
<body>
<table class="cent100b" width="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="750" style="width:750px; background-color:#FFFFFF" valign="top">
<table class="cent" width="750" style="width:750px" border="0" cellpadding="0" cellspacing="0">
<tr><td style="background-color:#990000"><img src="images/spacer.gif" height="35" width="1" alt="">Bla bla</td></tr>
<tr><td><img src="http://www.eksperten.dk/img/eksperten_logo_new.gif" height="200" width="750" alt=""></td></tr>
<tr><td align="right" valign="top" style="height:25px"><em>Bla bla bla bla bla bla bla bla bla bla bla bla</em></td></tr>
<tr>
<td valign="top">
<table class="cent" style="width:730px" width="730" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table class="cent" style="width:130px" width="130" border="0" cellpadding="0" cellspacing="0">
<tr><td><strong>MENU</strong></td></tr>
<tr><td>- <a href="1.php">Side 1</a></td></tr>
<tr><td>- <a href="2.php">Side 2</a></td></tr>
<tr><td>- <a href="3.php">Side 3</a></td></tr>
<tr><td>- <a href="4.php">Side 4</a></td></tr>
<tr><td>- <a href="5.php">Side 5</a></td></tr>
<tr><td>- <a href="6.php">Side 6</a></td></tr>
<tr><td>- <a href="7.php">Side 7</a></td></tr>
</table>
</td>
<td valign="top">
<table class="centcon" width="600" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table class="cent" style="width:580px" width="580" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed wisi. Fusce elementum lacinia justo.
Sed nunc mauris, aliquam sed, elementum a, tincidunt a, metus. Aliquam lacus neque, egestas ut, eleifend ut, blandit
at, ipsum. Nulla viverra vehicula sapien. <br /> <br /> Maecenas vestibulum, nisl et viverra luctus, turpis tortor convallis sem,
vel tempor tortor justo eget erat. Quisque ornare sollicitudin neque. Quisque pretium sollicitudin lorem. Etiam
condimentum, elit elementum vehicula eleifend. <br /> <br /> Tellus erat aliquam orci, a bibendum magna velit sit amet odio.
Mauris et sapien quis erat ornare egestas. Maecenas pellentesque, eros et mattis blandit, mauris augue egestas
lorem, in feugiat urna elit eu dolor. Nam sem nulla, lobortis nec, hendrerit vitae, mollis quis, ante. <br /> <br /> Nullam
convallis, nulla vitae ultricies sollicitudin, eros arcu imperdiet dui, sit amet adipiscing lectus wisi ac justo.
Sed aliquam feugiat dui. Morbi sapien risus, egestas ut, malesuada eu, semper quis, nunc. <br /> <br /> Integer auctor, nisl a
porta aliquet, arcu ligula consequat neque, id vulputate ligula neque eget felis. <br /> <br /> Aliquam aliquet cursus eros. Duis
molestie dui ac erat. Vivamus rhoncus urna et risus. Cras urna odio, ultrices non, ultrices sit amet, congue sed,
dolor.</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
