Een nogal specifiek probeempje met stylsheets. Ik wil dus het volgende bereiken:
een header, een middensectie van drie kolommen die meeschalen met de langste en een footer. ik heb nu iets wat wel werkt in vuurvos maar niet in internetexploder
Hier is de code, heeft iemand een idee?
<!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" />
<title>Layout test</title>
<style type="text/css">
<!--
body
{
padding: 0px;
margin: 0px;
}
div
{
position: relative;
padding: 0px;
margin: 0px;
border: 1px solid #000;
}
#head
{
height: 100px;
}
#center
{
padding: 0 200px 0 200px;
height: auto;
}
#left
{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 100%;
}
#right
{
position: absolute;
top: 0px;
right: 0px;
width: 200px;
height: 100%;
}
#tail
{
}
-->
</style>
</head>
<body>
<div id="head">
head head head head <br />
head head head head
</div>
<div id="center">
<div id="left">
left left left left
</div>
<div id="right">
right right right right
</div>
center center center center <br />
center center center center <br />
center center center center center center center center center center center center center center center center center center center center center center center center center center center center
</div>
<div id="tail">
tial tail tail tail
</div>
</body>
</html>
een header, een middensectie van drie kolommen die meeschalen met de langste en een footer. ik heb nu iets wat wel werkt in vuurvos maar niet in internetexploder
<!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" />
<title>Layout test</title>
<style type="text/css">
<!--
body
{
padding: 0px;
margin: 0px;
}
div
{
position: relative;
padding: 0px;
margin: 0px;
border: 1px solid #000;
}
#head
{
height: 100px;
}
#center
{
padding: 0 200px 0 200px;
height: auto;
}
#left
{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 100%;
}
#right
{
position: absolute;
top: 0px;
right: 0px;
width: 200px;
height: 100%;
}
#tail
{
}
-->
</style>
</head>
<body>
<div id="head">
head head head head <br />
head head head head
</div>
<div id="center">
<div id="left">
left left left left
</div>
<div id="right">
right right right right
</div>
center center center center <br />
center center center center <br />
center center center center center center center center center center center center center center center center center center center center center center center center center center center center
</div>
<div id="tail">
tial tail tail tail
</div>
</body>
</html>
Als ik op de start-knop druk dan gaat ie uit ...