[CSS] Probleem met menu

Door Ruben op 29-08-2009 19:22

429 views

Heey,

Ik ben bezig met me eigen layout basen, alleen nu krijg ik het menu rechts niet helemaal goed.

Hier kan je zien hoe het er nu uitziet:

Het menu moet dus zegmaar helemaal tegen de bovenkant aanstaan en links en rechts moeten
beide containers gewoon netjes tegen elkaar aanstaan.

De CSS:


html {
	background-color: #DDDDDD;
}

body {
	width: 796px;
	border-left: 2px solid #555555;
	border-right: 2px solid #555555;
	margin: 0px auto;
}

h1 {
	font-family: Verdana;
	font-size: 26px;
	color: #999999;
	text-align: center;
	font-weight: normal;
	margin: 0px;
	padding: 65px 0px 0px 0px;
}

h2 {
	font-family: "Times New Roman";
	font-size: 13px;
	color: #999999;
	text-align: center;
	font-weight: normal;
	margin: 0px;
	padding: 5px 0px 0px 0px;
}

p {
	font-family: Verdana;
	font-size: 11px;
	color: #FFFFFF;
	text-align: center;
	font-weight: normal;
	margin: 0px;
	padding: 9.75px 0px 0px 0px;
}

a {
	color: #FFFFFF;
	text-decoration: none;
}

a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

div#bovenkant {
	background-image: url('bovenkant.jpg');
	background-repeat: repeat-x;
	width: 796px;
	height: 39px;
}

div#header {
	background-image: url("header.jpg");
	width: 796px;
	height: 230px;
	border-top: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
}

div#menu {
	background-image: url('menu.jpg');
	background-repeat: repeat-x;
	width: 796px;
	height: 39px;
}

div#container {
	width: 796px;
	overflow: hidden;
}

div#lcontainer {
	background-image: url('schaduw_links.jpg');
	background-repeat: repeat-x;
	background-color: #444444;
	width: 534px;
	padding: 10px 10px 10px 10px;
	padding-bottom: 30000px;
	margin-bottom: -30000px;
	float: left;
}

div#lcontainer h3 {
	font-family: Verdana;
	font-size: 25px;
	color: #999999;
	font-weight: normal;
	margin: 0px 0px 9px 0px;
	border-bottom: 1px dotted #999999;
}

div#rcontainer {
	background-image: url('schaduw_rechts.jpg');
	background-repeat: repeat-x;
	background-color: #888888;
	width: 262px;
	padding: 10px 10px 10px 10px;
	padding-bottom: 30000px;
        margin-bottom: -29995px;
	float: right;
}

div#rcontainer h3 {
	padding-top: 10px;
	font-family: Verdana;
	font-size: 21px;
	color: #333333;
	font-weight: normal;
	margin: 0px 0px 9px 0px;
	text-decoration: underline;
}

De HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"> 
<head> 
<title>Klikfestijn</title> 
<link rel="stylesheet" type="text/css" href="opmaak.css" />
</head>         
<body>
<div id="bovenkant">
	<p><a href="#">Home</a> | <a href="#">Support</a> | <a href="#">Contact</a> | <a href="#">Over ons</a></p>
</div>
<div id="header">
	<h1>Klikfestijn</h1>
	<h2>Hier komt dan de slogan van Klikfestijn.</h2>
</div>
<div id="menu">
</div>
<div id="container">
<div id="lcontainer">
	<h3>Introductie</h3>
</div>
<div id="rcontainer">
	<h3>Menu</h3>
</div>
</div>
</body>
</html>

Met vriendelijke groet,

Ruben,