Ik heb hier tot gister laat in de nacht mee lopen stoeien , maar 't wil niet (:
Probleem:
Ik heb een plaatje en een rolover menu die ik in de header wil hebben , de bedoeling is dat het logo links (links in het midden) komt en daarnaast het menu beide helemaal op de bodem van de header div.
> Wat ik ook doe , het menu wil niet netjes op zijn plek komen en gaat zelfs "buiten"onderaan de div staan.
Ik heb een tekst gezet waar het menu moet komen .. dus naast het logo)
Html ter demonstratie:
<!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>HEADER TEST!</title>
<link rel="stylesheet" href="wh_menu.css" />
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
#header {
width:1200px;
background:#fff;
margin:0 auto;
}
-->
</style>
</head>
<div id="header"><img src="wh_logo.png" width="228" height="127" /> Hier moet het menu komen te staan! -
<ul id="menu">
<li><a href="#nieuws" class="nieuws">nieuws</a></li>
<li><a href="#hosting" class="hosting">hosting</a></li>
<li><a href="#support" class="support">support</a></li>
<li><a href="#design" class="design">design</a></li>
<li><a href="#forum" class="forum">forum</a></li>
<li><a href="#overons" class="overons">over ons</a></li>
</ul>
</div>
</body></html>
En hier het css bestand voor het menu: (wh_menu.css)
* {
margin:0;
padding:0;
}
ul#menu {
width:571px;
list-style:none;
}
ul#menu li {
display:inline;
}
a {
outline:none;
}
ul#menu li a {
display:block;
float:left;
height:33px;
background-image:url(wh_menu.png);
text-indent:-9999px;
}
ul#menu li a.nieuws {
width:104px;
background-position:0 0;
}
ul#menu li a.hosting {
width:91px;
background-position:-104px 0;
}
ul#menu li a.support {
width:91px;
background-position:-195px 0;
}
ul#menu li a.design {
width:91px;
background-position:-285px 0;
}
ul#menu li a.forum {
width:91px;
background-position:-379px 0;
}
ul#menu li a.overons {
width:91px;
background-position:-484px 0;
}
ul#menu li a.nieuws:hover, ul#menu li a.nieuws:focus {
background-position:0 -32px;
}
ul#menu li a.hosting:hover, ul#menu li a.hosting:focus {
background-position:-104px -32px;
}
ul#menu li a.support:hover, ul#menu li a.support:focus {
background-position:-195px -32px;
}
ul#menu li a.design:hover, ul#menu li a.design:focus {
background-position:-285px -32px;
}
ul#menu li a.forum:hover, ul#menu li a.forum:focus {
background-position:-379px -32px;
}
ul#menu li a.overons:hover, ul#menu li a.overons:focus {
background-position:-484px -32px;
}
PS, aangezien jullie de plaatjes niet hebben: , het menu zijn die kleine zwarte vierkantjes :D haha