Menu komt niet goed

**Jasper Rotte** · 04-05-2009, 17:33

Ik ben voor iemand aan het basen, maar kom er niet uit.

Het rechter menu doet raar, het moet naast de content komen te staan.

Voorbeeld: http://jouwlayout.nl/jordy.html

Code:

<!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" />
<style type="text/css">
body{
background-color: #FFFFFF;
text-align: center;
padding:10;
}
#content{
width: 832px;
margin: 0 auto;
background-color: #f8f8f8;
text-align: left;}

/* Begin Menu Boven*/    
#menu{
width: 832px;
height: 32px;
background-color: #f8f8f8;
font-familie: arial;
font-size: 11px;
color: #989898;}
#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
}
#menu ul li{
display: block;
margin: 0 2px;
width: 70px;
float: left;
font-familie: arial;
font-size: 11px;
color: #989898;
}
#menu ul li a{
display: block;
font-familie: arial;
font-size: 11px;
color: #989898;
text-decoration: none;
height: 32px;
line-height: 30px;
text-align: center;
}

#menu ul li a span{
display: block;
height: 32px;
width: auto;
}
#menu ul li a:hover{
color: #989898;}
#menu ul li a:hover span{
display: block;
cursor: pointer;}
#menu ul li a.current,#menu ul li a.current:hover{
color: #894d12;
background: url("images/menu.gif");
background-repeat: no-repeat;
background-align: center;
text-align: center;
color: #FFFFFF;
margin: 0 auto;}
#menu ul li a.current span{
background: url("images/menu.gif");
background-repeat: no-repeat;
height: 32px;
background-align: center;
text-align: center;
color: #FFFFFF;
margin: 0 auto;}

/* Einde Menu Boven */    

#header{
width: 832px;
height: 55px;
background-color: #a1d016;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
border-bottom: 1px solid #90ba14;
}

/* Begin Menu Links*/
#menu2{
width: 182px;
background-color: #f8f8f8;
font-family: arial;
font-size: 10px;
color: #ffffff;
height: 20px;
line-height: 20px;
}
#menu2 #titel{
width: 170px;
height: 30px;
background-color: #f8f8f8;
background-image: url(images/titellinks.gif);
line-height: 30px;
background-repeat: repeat-x;
border-top: 1px solid #f8f8f8;
padding-left: 12px;
}
#menu2 ul{
width: 182px;
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
background-color: #f8f8f8;
background-image: url(images/menuoptie.gif);
background-repeat: repeat-x;
}
#menu2 ul li{
width: 182px;
display: block;
margin: 0px;
background-image: url(images/menuoptie.gif);
background-repeat: repeat-x;
}
#menu2 ul li a{
width: 170px;
display: block;
font-familie: arial;
font-size: 11px;
color: #989898;
text-decoration: none;
line-height: 20px;
padding-left: 12px;
}
#menu2 ul li span{
display: block;
height: 32px;
background-image: url(images/puntje1.gif);
background-repeat: no-repeat;
margin: 8px 8px 0px 8px;
float:left;
}
/* Einde Menu Links*/

/* Begin Footer */
#footer{
width: 179px;
background-color: #f8f8f8;
height: 45px;
color: #a2a2a2;
padding-left: 3px;
padding-top: 8px;
line-height: 0px;
}
#footer #copyright{
width: 164px;
background-color: #f8f8f8;
background-image: url(images/puntje3.gif);
background-repeat: no-repeat;
background-position: left top;
height: 45px;
font-family: arial;
font-size: 10px;
color: #a2a2a2;
padding-left: 12px;
line-height: 10px;
}

#footer a{
font-familie: arial;
font-size: 10px;
color: #2cbff0;
}
/* Einde Footer */

/* Begin Content */
#contentvlak{
width: 468px;
background-color: #f8f8f8;
margin-left: 182px;
float: left;
font-family: Arial;
font-size: 10px;
padding: 5px 10px 10px 10px;
}
#contentvlak h1{
width: 468px;
font-family: Times New Roman;
font-size: 13px;
color: #97bf22;
background-image: url(images/stippels.gif);
background-repeat: no-repeat;
background-position: bottom left;
padding: 0;
margin: 0;
}
p{
width: 448px;
font-family: Arial;
font-size: 10px;
color: #a2a2a2;
}
/* Einde Content */

/* Begin Menu Rechts */
#menu3{
width: 100px;
background-color: #f8f8f8;
font-family: arial;
font-size: 10px;
color: #ffffff;
height: 20px;
line-height: 20px;
float: left;
margin-left: 675px;
}
#menu3 #titel3{
width: 100px;
height: 30px;
background-color: #f8f8f8;
background-image: url(images/blaumenu.gif);
line-height: 30px;
background-repeat: repeat-x;
border-top: 1px solid #f8f8f8;
padding-left: 12px;
float: left;
}
#menu3 #tekstvlak{
width: 100px;
height: 30px;
background-color: #f1f1f1;
padding: 5px 10px 10px 10px;
line-height: 30px;
}
</style>
<title>Jordyderegt.nl</title>
</head>
<body>
<div id="content">
<div id="menu">
    <ul>
      <li><a href="#"><span>Pagina</span></a></li>
        <li><a href="#" class="current"><span>Huiswerk</span></a></li>
        <li><a href="#"><span>Over ons</span></a></li>
        <li><a href="#"><span>Diensten</span></a></li>
        <li><a href="#"><span>Webhosting</span></a></li>
        <li><a href="#"><span>Webdesign</span></a></li>
        <li><a href="#"><span>Huisstijl</span></a></li>
        <li><a href="#"><span>Sponsors</span></a></li>
        <li><a href="#"><span>Contact</span></a></li>
        <li><a href="#"><span>Regels</span></a></li>
        <li><a href="#"><span>Sportnieuws</span></a></li>
                                
    </ul>
</div>
<div id="header">
</div>
<div id="menu2">
<div id="titel">Menu</div>
    <ul>
      <li><a href="#">Pagina</a></li>
        <li><a href="#">Huiswerk</a></li>
        <li><a href="#">Over ons</a></li>
        <li><a href="#">Diensten</a></li>
        <li><a href="#">Webhosting</a></li>                             
    </ul>



<div id="titel">Navigatie</div>
    <ul>
      <li><a href="#">Pagina</a></li>
        <li><a href="#">Huiswerk</a></li>
        <li><a href="#">Over ons</a></li>
        <li><a href="#">Diensten</a></li>
        <li><a href="#">Webhosting</a></li>                             
    </ul>
    


<div id="titel">Onze Diensten</div>
    <ul>
      <li><a href="#">Pagina</a></li>
        <li><a href="#">Huiswerk</a></li>
        <li><a href="#">Over ons</a></li>
        <li><a href="#">Diensten</a></li>
        <li><a href="#">Webhosting</a></li>                             
    </ul>
    
<div id="footer">
<div id="copyright">
Copyright <a href="#">Sitenaam.nl</a>
</div>
</div>
</div>
<div id="contentvlak">

<h1>Welkom op sitenaam.nl</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris at dolor euismod interdum. Aliquam erat volutpat. Integer venenatis fringilla lacus. In a ante iaculis sem ornare pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras in mi tincidunt mi fringilla suscipit. Sed sapien. Nam varius augue in lectus.
 Vestibulum pede magna, molestie non, consectetur vel, semper ut, metus. Suspendisse </p>

<p>elementum est ac orci egestas elementum. Praesent dui odio, varius vitae, elementum a, interdum sodales, dui. Donec tincidunt vestibulum mauris. Donec blandit, orci vitae tincidunt 
auctor, metus enim posuere enim, non egestas leo dolor sed tortor. Praesent placerat, tellus at cursus <strong>sollicitudin, purus eros</strong> </p>
<a href="#"target="_blank"><img border="0" src="images/banner.gif" /></a>
<br />&nbsp;<br />
<a href="#"><img border="0" src="images/webdesign.gif" /></a><a href="#"><img border="0" src="images/scripting.gif" /></a><a href="#"><img border="0" src="images/huisstijl.gif" /></a>
<p>elementum est ac orci egestas elementum. Praesent dui odio, varius vitae, elementum a, interdum sodales, dui. Donec tincidunt vestibulum mauris. Donec blandit, orci vitae tincidunt 
auctor, metus enim posuere enim, non egestas leo dolor sed tortor. Praesent placerat, tellus at <strong>cursus sollicitudin, purus eros</strong> </p>
</div>

<div id="menu3">
<div id="titel3">Over ons</div>
<div id="tekstvlak"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate pede ac erat. Morbi eu ipsum at odio adipiscing adipiscing. Nam varius augue. Donec quis eros vitae sapien porttitor elementum. Proin quis metus et quam viverra porta. Ut nec velit. Vestibulum nisi felis, facilisis non, congue sed, hendrerit id, urna. Sed bibendum laoreet libero. Aenean venenatis. Proin enim risus, ultrices feugiat, euismod ut, vestibulum eget, est. Morbi condimentum mauris nec felis. Praesent et ligula. Proin aliquet magna ac felis. Nunc nec libero ac nulla euismod posuere. Integer rhoncus elementum est. </p></div>
</div>
</div>
<body />
</html>

**MelvinKooper** · 04-05-2009, 17:52

zo te zien is dit de boosdoener: "margin-left: 675px;" (welke je bij #menu3 hebt staan).

ook je'tekstvlak' heeft een grootte van 448px, (div #tekstvlak) terwijl je deze in een div van 100px breed wilt plaatsen. Wellicht dat je hier nog even naar moet kijken :)

Ik hoop dat ik je zo voldoende heb geholpen.

groeten Melvin

**Jasper Rotte** · 04-05-2009, 19:11

Heel erg bedankt.

Dit is een van mijn eerste basings.

Ik doe het ook gratis voor iemand, je hebt me hier heel erg mee geholpen.

Ik denk dat ik er nu zelf uit kom.

**MelvinKooper** · 05-05-2009, 19:46

Gelukkig heb je hier wat aan. Een handige tool om te kijken waar de fouten zitten is een plugin voor firefox, firebug genaamd. Met deze tool kan je alle onderdelen van bepaalde websites 'inspecteren' en tijdelijk veranderen om de verschillen te zien. Ik gebruik deze tool redelijk vaak om kleine foutjes snel te kunnen vinden tijdens het slicen, wellicht heb je hier wat aan.

Succes verder, en kom je er niet uit, dan laat het maar even weten.

groeten.

Menu komt niet goed