Ik ben bezig met het bouwen van een website waarin vrij veel positionering voorkomt. Aangezien ik niet zo'n geweldige CSS schrijver ben, vraag ik me af of deze css code wel goed is. Ik heb vooral veel geprobeerd. Ik zit nog wel met één ding: onder de header (logo en menu dus) moet het content komen. Als ik een div toevoeg zal die onder het menu verschijnen, i.p.v. over de hele breedte. Eigenlijk wil ik dat het menu en het logo allebei in de #header div vallen, maar het menu steekt er uit, en de #header div weigert zich daar aan aan te passen.
Kortom: hebben jullie tips, problemen, toevoegingen, enz. voor deze html en css code?
HTML:
CSS:
Kortom: hebben jullie tips, problemen, toevoegingen, enz. voor deze html en css code?
HTML:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Testpagina</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo" />
<div id="menu">
<div id="menuitem"></div>
<div id="menuitem"></div>
<div id="menuitem"></div>
<div id="menuitem"></div>
<div id="menuitem"></div>
<div class="clear" />
</div>
</div>
</div>
</body>
</html>CSS:
HTML:
body,html {
background-image: url('images/background.png');
background-size: 100%;
margin: 0;
padding: 0;
height: 100%;
}
#container {
margin: auto;
padding: 0;
border: 5px solid black;
width: 900px;
height: 100%;
}
#header {
margin: auto;
width: 900px;
position: absolute;
border: 3px solid black;
}
#logo {
background-image: url('images/logo.png');
background-size: 100%;
width: 400px;
height: 100px;
}
#menu {
position: absolute;
width: 500px;
margin-left: 400px;
margin-top: 80px;
border: 3px solid black;
}
.clear {
clear: both;
}
#menuitem {
background-image: url('images/menu/new/home_white.png');
background-size: 100%;
width: 80px;
height: 48px;
margin-left: 10px;
float: left;
}
#menuitem:hover {
background-image: url('images/menu/new/home_purple.png');
}
.
