Ik zou een website willen maken met een gecentreerd middendeel (800 px breed) bestaande uit drie stroken (header grijs= 94px hoog, midden groen= 430px hoog en footer grijs=60px hoog) waarvan de achtergrondkleur uitgebreid wordt tot de volledige breedte van het scherm (100% width), dus drie stroken over de volledige breedte van elk scherm.
Op bijgaande figuur iet u het 800 px breede middendeel
Links en rechts van die drie stroken zou de achtergrondkleur dus moeten uitlopen tot de rand van het breedste scherm, maar de inhoud blijft 800 px gecentreerd op et scherm.
Kan iemand mij helpen om dit te realiseren?
Ik gebruikte volgende html code :
Op bijgaande figuur iet u het 800 px breede middendeel
Links en rechts van die drie stroken zou de achtergrondkleur dus moeten uitlopen tot de rand van het breedste scherm, maar de inhoud blijft 800 px gecentreerd op et scherm.
Kan iemand mij helpen om dit te realiseren?
Ik gebruikte volgende html code :
Code: Selecteer alles
<!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=utf-8" />
<title>testpagina</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
margin-top: 50px;
margin-left: 0px;
background-color: #FFFFFF;
}
#container {
height: 600px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 0px solid #999999;
background-color: #77867F;
}
#hoofding {
position:relative;
width:800px;
height:94px;
z-index:1;
visibility: visible;
background-color: #CCCCCC;
}
#midden {
position:absolute;
width:800px;
height:430px;
z-index:1000;
visibility: visible;
top: 150px;
}
#footer {
position:absolute;
top:600px;
width:800px;
height:60px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
visibility: visible;
background-color: #999999;
z-index: 1001;
}
#foto {
position:absolute;
width:491px;
height:430px;
visibility: visible;
left: 285px;
z-index: 1;
}
#menu {
position: absolute;
width: 270px;
height: 365px;
z-index:2;
visibility:visible;
top: 70px;
left: 10px;
}
#taal {
position:absolute;
width:200px;
height:25px;
z-index:3;
top: 400px;
padding-left: 25px;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
.stijl4 {font-size: 24px;
}
.stijl5 {
font-size: 14px;
color: #717D76;
font-weight: bold;
}
#tekst {
position:absolute;
width:367px;
height:295px;
z-index:1;
left: 72px;
top: 71px;
}
#container #midden #foto #tekst {
font-size: 12px;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="footer">
<div id="logoEA">
<p>logo 2</p>
</div>
<div id="archopmaat">
<div align="right">
<div align="left">
<div align="center" class="stijl7 stijl9"> Hier komt een footer-tekst</div>
</div>
</div>
</div>
</div>
<div id="hoofding">
<div align="center">hier komt een logo van 800x94px</div>
</div>
<div id="midden">
<div id="taal">NL - FR - EN - DE</div>
<div id="foto">
<div id="tekst">
<p>tekst</p>
<p> </p>
<p>tekst</p>
<p> </p>
<p> </p>
<p>tekst</p>
</div>
</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">home</a></li>
<li><a href="#">pagina 1</a> </li>
<li><a href="#">pagina 2</a></li>
<li><a href="#">pagina 3</a> </li>
<li><a href="#">pagina 4</a></li>
<li><a href="#" class="MenuBarItemSubmenu">pagina 5</a>
<ul name="submenu">
<li><a href="#">sub-pagina 1</a></li>
<li><a href="#">sub-pagina 2</a></li>
<li><a href="#">sub-pagina 3</a></li>
<li><a href="#">subpagina 4</a></li>
<li><a href="#">sub-pagina 5</a></li>
<li><a href="#">sub-pagina 6</a></li>
</ul>
</li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>Laatst gewijzigd door ciboss op 03 apr 2010, 13:18, 2 keer totaal gewijzigd.
PC1+2 - W7-PentiumR - 2.8GHz - 4GB RAM
Laptop - W7- i7 - 1.6GHz - 4GB
PC3= Ubuntu (Zorin)
HD Freecom 1TB - HP Photosmart 3210
Router LevelOne
Laptop - W7- i7 - 1.6GHz - 4GB
PC3= Ubuntu (Zorin)
HD Freecom 1TB - HP Photosmart 3210
Router LevelOne
Waardoor de background-color maar beperkt is tot die width. Om dat te vermijden moet je daar nog div tags gaan rond plaatsen.
) samen geinteresseerd in ICT en webdesign. Ik heb avondlessen Dreamweaver gevolgd + extra-jaar in dynamische websites (waar ik ook php heb leren kennen) + CMS (Joomla & Drupal).