Hallo forumleden
ik heb dit nu:
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="./css/algemeen.css" type="text/css">
</head>
<body>
<div id=maincontainer">
<div id="footer">
</div>
<div id="navigatie">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
</html>
en css:
body {
background : rgb(0,0,0); /*de gehele achter grond van de webpagina is zwart */
padding : 0px;
margin : 0px;
line-height : 120%; /* lijn afstand tussen regels */
}
#maincontainer {
width : 1024px; /* hele pagina met een breedte van 1024 px */
margin : 0 auto;
}
#footer {
width : 80%;
height : 100px;
margin : 30px 10% 0 10%;
padding : 0;
background : rgb(64,219,55);
}
#navigatie {
list-style-type : none; /* bullets weg */
font-family : verdana, Helvetica, Arial, sans-serif; /* lettertypen van het menu */
font-size : 14px; /* lettergrootte van het menu */
font-weight : bold; /* dik gedrukte tekst */
width : 80%; /* het menu met een lengte van 600px */
list-style : none; /* bullets weg */
margin : 0px 0px 0px 10%;
padding : 0;
}
#navigatie ul li {
list-style-type : none; /* bullets weg */
float : left; /* elk deeltje naast elkaar */
width : 16%; /* elk deeltje met een breedte van 100px */
background : rgb(197,202,211); /*achtergrond kleur van het menu*/
text-align : center;
border : 1px solid rgb(255,255,255); /* streepjes tussen elk deeltje
van het menu */
margin : 0px;
}
#navigatie ul li a {
color : rgb(0,0,0); /*letter kleur menu*/
text-decoration : none; /*onderstreping weg*/
display : block;
padding : 5px 0px 5px 0px; /*padding*/
}
#navigatie ul li a:hover {
background : rgb(109,121,143); /* het iets donker der worden als muis er over heen gaat */
}
#content {
background : rgb(255,255,255); /*content achter grond wit*/
width : 80%;
height : 1000px;
color : black;
margin : 400px 10% 0px 10%;
}
en ik wil het graag zo als het in de bijlage er uit ziet. Volgensmij heb ik dat gedaan maar het resultaat is niet wat ik wil.
grtz
ik heb dit nu:
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="./css/algemeen.css" type="text/css">
</head>
<body>
<div id=maincontainer">
<div id="footer">
</div>
<div id="navigatie">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
</html>
en css:
body {
background : rgb(0,0,0); /*de gehele achter grond van de webpagina is zwart */
padding : 0px;
margin : 0px;
line-height : 120%; /* lijn afstand tussen regels */
}
#maincontainer {
width : 1024px; /* hele pagina met een breedte van 1024 px */
margin : 0 auto;
}
#footer {
width : 80%;
height : 100px;
margin : 30px 10% 0 10%;
padding : 0;
background : rgb(64,219,55);
}
#navigatie {
list-style-type : none; /* bullets weg */
font-family : verdana, Helvetica, Arial, sans-serif; /* lettertypen van het menu */
font-size : 14px; /* lettergrootte van het menu */
font-weight : bold; /* dik gedrukte tekst */
width : 80%; /* het menu met een lengte van 600px */
list-style : none; /* bullets weg */
margin : 0px 0px 0px 10%;
padding : 0;
}
#navigatie ul li {
list-style-type : none; /* bullets weg */
float : left; /* elk deeltje naast elkaar */
width : 16%; /* elk deeltje met een breedte van 100px */
background : rgb(197,202,211); /*achtergrond kleur van het menu*/
text-align : center;
border : 1px solid rgb(255,255,255); /* streepjes tussen elk deeltje
van het menu */
margin : 0px;
}
#navigatie ul li a {
color : rgb(0,0,0); /*letter kleur menu*/
text-decoration : none; /*onderstreping weg*/
display : block;
padding : 5px 0px 5px 0px; /*padding*/
}
#navigatie ul li a:hover {
background : rgb(109,121,143); /* het iets donker der worden als muis er over heen gaat */
}
#content {
background : rgb(255,255,255); /*content achter grond wit*/
width : 80%;
height : 1000px;
color : black;
margin : 400px 10% 0px 10%;
}
en ik wil het graag zo als het in de bijlage er uit ziet. Volgensmij heb ik dat gedaan maar het resultaat is niet wat ik wil.
grtz
