Sideopbygning med DIV, med problemer
Jeg er ved at bygge en side op i DIV, men er løbet ind i et par problemer som jeg ikke rigtigt kan tackle.1. Jeg ønsker siden centret, med grafik på hver side, grafikken skal lægge sig ind mod midterste område. Det virker ikke helt efter hensigten.
2. Jeg får noget ekstra forneden, hvis jeg fjerner topmargen i xxx på 175px, kan jeg ikke se teksten.
Du kan se det færdige resultat her:
http://www.prolight.dk/eksperten/div-index.html
og HTML-kodern her:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> Test af div </title>
<link href="div.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="venstre"><img src="dotclear.gif" width="5%">
</div>
<div id="midt">
<div id="top1">Her er menu toppen<br>
med plads til menu og illustration</div>
<div id="main">Her er hele teksten
med masser af linier</div>
<div id="bottom">
<div id="bund1">her er der en linie</div>
<div id="bund2">og her bunden</div>
</div> </div>
<div id="hoejre"><img src="dotclear.gif" width="5%">
</div>
<div id="hoejre_bund"></div>
</body>
</html>
og CSS’en:
html,body {
margin: 0px;
padding: 0px;
height: 100%;
}
#venstre {
position:absolute;
top:0px;
left:0px;
height:100%;
background-color:#dadbdb;
background-repeat: repeat-y;
background-position: right;
background-attachment: fixed;
background-image: url(images/forslag2_04.jpg);
}
#midt {
position:relative;
margin:auto;
height:100%;
width:772px;
z-index: 10;
background-color:#993300;
}
#hoejre {
position:absolute;
top:0px;
right:0px;
height:100%;
background-color:#dadbdb;
background-attachment: fixed;
background-image: url(images/forslag2_05.jpg);
background-position: left;
}
#hoejre_bund {
position:absolute;
bottom:0px;
height:459px;
background-color:#66FFFF;
background-attachment: fixed;
background-image: url(images/forslag2_07.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
#top1 {
position:absolute;
height:175px;
width:772px;
z-index:20;
background-color:#CCCCCC;
}
#main {
position:absolute;
height:100%;
width:772px;
overflow-y:auto
z-index:20;
background-color:#FF3300;
margin-top: 175px;
}
#bottom {
position:absolute;
bottom:0px;
height:52px;
width:772px;
z-index:20;
}
#bund1 {
width:772px;
height:26px;
background-color:#00FFFF;
}
#bund2 {
width:772px;
height:26px;
background-color:#CCCCCC;
}
