login  Naam:   Wachtwoord: 
Registreer je!
 Forum

probleem met menu positie (Opgelost)

Offline xellos - 05/07/2011 12:05
Avatar van xellosLid oke ik heb een menu op mijn site in een div.
alleen komt het menu niet goed in die div bij komt voor de helft door de border
aan de onderkant heen.
wat raar is want het menu is niet te groot voor die div en heb hem ook geen padding mee gegeven.

ik hoop dat iemand mij kan helpen

hier is de code

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  5.    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.    <meta name="description" content="beschrijving van de webpagina" />
  7.    <meta name="keywords" content="trefwoorden, gescheiden, door, komma's" />
  8.    <LINK HREF="css/mainstyle.css" REL="stylesheet" TYPE="text/css">
  9.    <title> -- </title>
  10. </head>
  11. <body> 
  12. <div id="inhoud"> 
  13. <div id="head"> </div>
  14. <div id="menu"> 
  15. <ul>
  16. <li><a href="" class="sub">Home</a></li>
  17. <li><a href="#">Products</a>
  18. <ul>
  19. <li><a href="" class="sub">After-Life</a></li>
  20. <li><a href="" class="sub">Evil Blood</a></li>
  21. <li><a href="" class="sub">Freaking Fit</a></li>
  22. <li><a href="" class="sub">Insane Test</a></li>
  23. <li><a href="" class="sub">Killer Vites</a></li>
  24. <li><a href="" class="sub">Madhouse Whey</a></li>
  25. <li><a href="" class="sub">Passed Out</a></li>
  26. <li><a href="" class="sub">Psycho Test</a></li>
  27. <li><a href="" class="sub">Ripped to the bone</a></li>
  28. <li><a href="" class="sub">Sick Bricks</a></li>
  29. <li><a href="" class="sub">Skeleton Bullets</a></li>
  30. <li><a href="" class="sub">Skeleton Powder</a></li>
  31. <li><a href="" class="sub">Training Log</a></li>
  32. <li><a href="" class="sub">Zombie Dust</a></li>
  33. </ul>
  34. </li>
  35. <li><a href="">Web Shop</a>
  36. <ul>
  37. </ul>
  38. </li>
  39. <li><a href="">About us</a>
  40. </li>
  41. <li><a href="">Ingredients</a>
  42. <ul>
  43. <li><a href="" class="sub">Amino Acids</a></li>
  44. <li><a href="" class="sub">Carbohydrates</a></li>
  45. <li><a href="" class="sub">Creatine</a></li>
  46. <li><a href="" class="sub">Diet</a></li>
  47. <li><a href="" class="sub">Energizers</a></li>
  48. <li><a href="" class="sub">Glutamine</a></li>
  49. <li><a href="" class="sub">Pre-workout</a></li>
  50. <li><a href="" class="sub">Post-workout</a></li>
  51. <li><a href="" class="sub">Protein</a></li>
  52. <li><a href="" class="sub">Minerals</a></li>
  53. <li><a href="" class="sub">Muscle Enhancers</a></li>
  54. <li><a href="" class="sub">Vitamins</a></li>
  55.  
  56.  
  57. </ul></li>
  58. <li><a href="">Links</a>
  59. </li>
  60. <li><a href="">Contact</a>
  61. </li><ul>
  62. <ul>
  63.  
  64. </ul>
  65. </ul>
  66. </ul>
  67. </div>
  68. <div id="hooftvak"> 
  69. <div id="hooftvakpicture">  </div>
  70. </div>
  71. </div>
  72. </body>
  73. </html>


en de css
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body{
  2. 	background-repeat:no-repeat;
  3. 	width:100%;
  4. 	height:100%;
  5.     background-image: url(../img/back2.jpg);
  6. 	}
  7.  
  8. div{
  9. border: 1px solid black;
  10. color: white;
  11. margin:0px;
  12. padding:0px;
  13. }
  14.  
  15.  
  16. #inhoud{
  17. width:1000px;
  18. height:920px;
  19. margin-left: auto;
  20. margin-right: auto;
  21.  
  22. }
  23.  
  24. #head{
  25. width:100%;
  26. height:200px;
  27. font-size:33px;
  28.  
  29. }
  30.  
  31. #menu { 
  32.  height: 26px;
  33.  width: 100%; 
  34.  margin: 0 auto;
  35.  border-top: 1px solid black;
  36.  border-right: 1px solid black;
  37.  border-left: 1px solid black;
  38.  border-bottom: 1px solid black;
  39.  background-color: red;
  40.  }
  41.  
  42. #menu ul { 
  43.  list-style-type: none; 
  44.  }
  45.  
  46. #menu ul li { 
  47.  float: left;
  48.  width: 128px;
  49.  position: relative;
  50.  }
  51.  
  52. #menu li a:link, #menu li a:visited { 
  53.  display: block;
  54.  width: 127px;
  55.  height: 22px;
  56.  border-right: 1px solid black;
  57.  padding-top: 4px;
  58.  text-align: center;
  59.  font-size: 13px;
  60.  text-decoration: none;
  61.  text-transform: uppercase;
  62.  color: white;
  63.  font-weight: bold;
  64.  }
  65.  
  66. #menu li a:hover, #menu li li a.sub:hover {
  67.  background-color: red;
  68.  }
  69.  
  70. #menu li ul { 
  71.  width: 128px; 
  72.  border-top: 1px solid black;
  73.  position: absolute; 
  74.  left: -10000px;
  75.  top: 1px; 
  76.  font-size: 14px;
  77.  }
  78.  
  79. #menu li li a:link, #menu li li a:visited { 
  80.  display: block;
  81.  width: 121px;
  82.  height: 22px;
  83.  background-color: red;
  84.  border-right: 0;
  85.  padding-left: 8px;
  86.  padding-top: 4px; 
  87.  text-align: left;
  88.  text-decoration: none;
  89.  text-transform: none;
  90.  color: white; 
  91.  font-size: 14px;
  92.  }
  93.  
  94. #menu li:hover ul {
  95.  display: block; 
  96.  left: -1px;
  97.  top: 26px;
  98.  }
  99.  
  100. #hooftvak{
  101. border-left: 0;
  102. border-right:0;
  103. margin-top:1em;
  104. width:100%;
  105. height:500px;
  106.  
  107. }

4 antwoorden

Gesponsorde links
Offline StefanH - 05/07/2011 15:14
Avatar van StefanH Lid #menu ul {
list-style-type: none;
margin: 0px;
}

Probeer eens met die margin erbij.
Offline xellos - 05/07/2011 15:19 (laatste wijziging 05/07/2011 16:06)
Avatar van xellos Lid :D heb ik gewoon overheen gekeken bedankt

nu heb ik alleen nog een probleem.
als je bijvoorbeeld bovenop products gaat staan komt er een sub menu alleen die komt niet netjes onder de products te staan maar iets naar rechts hoe los ik dat op?
Offline StefanH - 05/07/2011 15:47 (laatste wijziging 05/07/2011 16:24)
Avatar van StefanH Lid #menu li:hover ul {
display: block;
left: -1px;
margin-left: -40px;
top: 26px;
}

Ik kon niet zo gauw zien waar het aan lag.
Maar hiermee los je het ook op.
Offline xellos - 05/07/2011 17:16
Avatar van xellos Lid heel erg bedankt
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.334s