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:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  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:
css code - Bekijk de code zonder highlighting - Klap code in 
  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
css code - Bekijk de code zonder highlighting - Klap code in 
  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


css code - Bekijk de code zonder highlighting - Klap code in 
  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:

css code - Bekijk de code zonder highlighting - Klap code in 
  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.208s