HTML interesse |
|
Ik heb een webpagina met een header, het menu links en de inhoud. Als de inhoud wat langer wordt rekt de pagina mee. Nu is het niet zo dat de rode achtergrondkleur van het menu meeloopt. Die blijft gewoon hetzelde. Hoe kan ik dat wel voor elkaar krijgen. Dit is op dit moment mijn code.
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 17px;
background: #white;
color: #000000;
margin:0;
padding: 0;
height: 100%;
width: 100%;
}
.twoColFixLtHdr #container {
position: absolute;
margin: auto;
top:50%;
left:50%;
margin-left:-490px;
margin-top:-305px;
min-height: 610px;
width: 980px;
background: #blue;
border: 2px solid #FFFFFF;
}
.twoColFixLtHdr #header {
background: #red;
text-align: center;
height: 80px;
}
.twoColFixLtHdr #sidebar1 {
float: left;
width: 160px;
height: 100%;
background: #red;
text-align: center;
}
body { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 17px; background: #white; color: #000000; margin:0; padding: 0; height: 100%; width: 100%; } .twoColFixLtHdr #container { position: absolute; margin: auto; top:50%; left:50%; margin-left:-490px; margin-top:-305px; min-height: 610px; width: 980px; background: #blue; border: 2px solid #FFFFFF; } .twoColFixLtHdr #header { background: #red; text-align: center; height: 80px; } .twoColFixLtHdr #sidebar1 { float: left; width: 160px; height: 100%; background: #red; text-align: center; }
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<img src="logo.png" width="500" height="90" alt="">
</div>
<div id="sidebar1">
<a href="menu1">
<img src="menu/menu1.png" width="149" height="100" border="0" alt=""</a>
<br><a href="menu/menu2.html"><img src="menu/menu2.png" width="149" height="100" border="0"alt=""></a>
<br><a href="menu/menu3.html"><img src="menu/menu3.png" width="149" height="100" border="0"alt=""></a>
<br><a href="menu/menu4"><img src="menu/menu4.png" width="149" height="100" border="0"alt=""></a>
<br><a href="menu/menu5"><img src="menu/menu5.png" width="149" height="100" border="0"alt=""></a>
</div>
</div>
<div id="mainContent">
<div style="height: 37px; width: 350px; margin-bottom: 20px;">
<img src="kop/titel-home.png" height="37" width="350" alt="">
</div>
Tekst.tekst.ect.ect.
</div>
</body>
</html>
<body class="twoColFixLtHdr"> <img src="logo.png" width="500" height="90" alt=""> <img src="menu/menu1.png" width="149" height="100" border="0" alt=""</a> <br><a href="menu/menu2.html"><img src="menu/menu2.png" width="149" height="100" border="0"alt=""></a> <br><a href="menu/menu3.html"><img src="menu/menu3.png" width="149" height="100" border="0"alt=""></a> <br><a href="menu/menu4"><img src="menu/menu4.png" width="149" height="100" border="0"alt=""></a> <br><a href="menu/menu5"><img src="menu/menu5.png" width="149" height="100" border="0"alt=""></a> <div style="height: 37px; width: 350px; margin-bottom: 20px;"> <img src="kop/titel-home.png" height="37" width="350" alt=""> Tekst.tekst.ect.ect.
|