login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Css menu uitlijning...

Offline Marly - 04/01/2010 21:00
Avatar van MarlyHTML interesse Ik heb een probleempje met mijn horizontale menu icm dropdown.
Als ik het menu gebruik staat alles netjes verticaal op 1 lijn.
Als ik in datzelfde menu een dropdown menu op css basis gebruik verpringt alles en ziet het er niet uit.

Hierbij de HTML code van het menu:
  1. <div class="navigation">
  2. <a href="home">Home</a> |
  3. <ul>
  4. <li><a href="#">Producten</a>
  5. <ul>
  6. <li><a href="">Standaard Convectorrooster</a></li>
  7. <li><a href="">Sierrooster</a></li>
  8. <li><a href="">Blokrooster</a></li>
  9. <li><a href="">Rooster t.b.v. Heteluchtverwarming</a></li>
  10. <li><a href="">Laserrander</a></li>
  11. <li><a href="">Ornamenten</a></li>
  12. </ul>
  13. </li>
  14. </ul> |
  15. <ul>
  16. <li><a href="#">Fax/Mail formulier</a>
  17. <ul>
  18. <li><a href="standaard_convectorrooster">Standaard Convectorrooster</a></li>
  19. <li><a href="sierrooster">Sierrooster</a></li>
  20. <li><a href="blokrooster">Blokrooster</a></li>
  21. <li><a href="rooster_tbv_heteluchtverwarming">Rooster t.b.v. Heteluchtverwarming</a></li>
  22. <li><a href="laserranden">Laserrander</a></li>
  23. <li><a href="ornamenten">Ornamenten</a></li>
  24. </ul>
  25. </li>
  26. </ul> |
  27. <a href="contact">Contact</a> |
  28. <a href="referenties">Referenties</a> |
  29. <a href="fotogallerij">Fotogalerij</a>
  30. </div>


En hier de CSS code:
  1. div.navigation {
  2. margin-left: 0px;
  3. width: 900px;
  4. height: 50px;
  5. text-align: center;
  6. font-size: 14px;
  7. float: left ;
  8. }
  9.  
  10. A:link {
  11. text-decoration: none;
  12. font-size: 12px;
  13. background-color: inherit;
  14. color: #4b4b4b;
  15. }
  16.  
  17. A:visited {
  18. text-decoration: none;
  19. font-size: 12px;
  20. background-color: inherit;
  21. color: #4b4b4b;
  22. }
  23.  
  24. A:active {
  25. text-decoration: none;
  26. font-size: 12px;
  27. background-color: inherit;
  28. color: #ffffff;
  29. }
  30. A:hover {
  31. text-decoration: none;
  32. font-size: 12px;
  33. background-color: inherit;
  34. color: #ffffff;
  35. }
  36.  
  37. ul {
  38. padding: 0;
  39. margin: 0;
  40. list-style: none;
  41. background: #000;
  42. }
  43.  
  44. li {
  45. float: left;
  46. position: relative;
  47. width: 10em;
  48. }
  49.  
  50. li ul {
  51. display: none;
  52. position: absolute;
  53. top: 1em;
  54. left: 0;
  55. }
  56.  
  57. li > ul {
  58. top: auto;
  59. left: auto;
  60. }
  61.  
  62. li:hover ul { display: block; }


Iemand die me hiermee kan helpen?

1 antwoord

Gesponsorde links
Offline Jelmerholland - 04/01/2010 23:24
Avatar van Jelmerholland PHP beginner
  1. li > ul {
  2. position:relative;
  3. top: ;/*moet je de goede waarde zoeken, soms helpt -100%*/
  4. left: ;/*moet je de goede waarde zoeken, soms helpt 100%*/
  5. }


Je moet even wat experimenteren
Ik weet niet zo goed wat je bedoelt. (heb nou geen tijd het te testen)

EN...
Voeg dit samen


  1. A:link {
  2. text-decoration: none;
  3. font-size: 12px;
  4. background-color: inherit;
  5. color: #4b4b4b;
  6. }
  7.  
  8. A:visited {
  9. text-decoration: none;
  10. font-size: 12px;
  11. background-color: inherit;
  12. color: #4b4b4b;
  13. }
  14.  
  15. A:active {
  16. text-decoration: none;
  17. font-size: 12px;
  18. background-color: inherit;
  19. color: #ffffff;
  20. }
  21. A:hover {
  22. text-decoration: none;
  23. font-size: 12px;
  24. background-color: inherit;
  25. color: #ffffff;
  26. }


Naar:

  1. A:link, A:visited {
  2. text-decoration: none;
  3. font-size: 12px;
  4. background-color: inherit;
  5. color: #4b4b4b;
  6. }
  7.  
  8. A:active, A:hover {
  9. text-decoration: none;
  10. font-size: 12px;
  11. background-color: inherit;
  12. color: #ffffff;
  13. }


Word je code net ff wat sneller en beter van  
Succes
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.195s