login  Naam:   Wachtwoord: 
Registreer je!
 Forum

ruimte tussen CSS menuknoppen op nul zetten?

Offline zandman - 11/02/2010 16:57 (laatste wijziging 11/02/2010 17:18)
Avatar van zandmanNieuw lid Via http://inobscuro.com/tutorials/print/19/ ben ik voor het eerst bezig een menuutje met rollover buttons te maken obv CSS. Het werkt wel, alleen nu zit er tussen de knoppen een (wit) ruimte terwijl de knoppen 'naadloos tegen elkaar moeten zitten.
Wat moet ik daartoe veranderen?

PS hoe stel je in CSS de achtergrond kleur op transparant in?

Dit is de code die ik gebruikt heb:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="NAV"><ul class="menu">
  2. 	<li class="toorop"><a href="#">de toorop</a></li>
  3. 	<li class="huurders"><a href="#">huurders</a></li>
  4. 	<li class="fotoos"><a href="#">foto's</a></li>
  5. 	<li class="nieuws"><a href="#">nieuws</a></li>
  6. 	<li class="agenda"><a href="#">agenda</a></li>
  7. </ul></div>

en CSS:



css code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu {
  2. 	margin: 0;
  3. 	padding: 0;
  4. 	list-style: none;
  5. 	background: #fff;
  6. }
  7. .menu li {
  8. 	padding: 0;
  9. 	margin: 0;
  10. 	height: 44px;
  11. 	margin-right: 1em;
  12. 	list-style: none;
  13. 	background-repeat: no-repeat;
  14. }
  15. .menu li a, .menu li a:visited {
  16. 	display: block;
  17. 	text-decoration: none;
  18. 	text-indent: -1000px;
  19. 	height: 44px;
  20. 	background-repeat: no-repeat;
  21. }
  22. .toorop {background-image: url(IMGnavCSS/TOOROPknopGRIJS.gif); width: 142px;}
  23. .toorop a {background-image: url(IMGnavCSS/TOOROPknopWIT.gif);}
  24. .huurders {background-image: url(IMGnavCSS/HUURDERSknopGRIJS.gif); width: 126px;}
  25. .huurders a {background-image: url(IMGnavCSS/HUURDERSknopWIT.gif);}
  26. .fotoos {background-image: url(IMGnavCSS/FOTOknopGRIJS.gif); width: 94px;}
  27. .fotoos a {background-image: url(IMGnavCSS/FOTOknopWIT.gif);}
  28. .nieuws {background-image: url(IMGnavCSS/NIEUWSknopGRIJS.gif); width: 97px;}
  29. .nieuws a {background-image: url(IMGnavCSS/NIEUWSknopWIT.gif);}
  30. .agenda {background-image: url(IMGnavCSS/AGENDAknopGRIJS.gif); width: 109px;}
  31. .agenda a {background-image: url(IMGnavCSS/AGENDAknopWIT.gif);}
  32. ul.menu li a:hover {background: none;}
  33. .menu li {float: left;}
  34. .menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;
  35. }


vinTage schreef:
code tags gebruiken svp.

2 antwoorden

Gesponsorde links
Offline WebSmurf - 11/02/2010 17:12
Avatar van WebSmurf Nieuw lid Probeer margin: 0px; en padding: 0px; en controller de width van de images of die kloppen.

Greetz 
Offline Martijn - 12/02/2010 10:49
Avatar van Martijn Crew PHP padding en margin ja. Background: none; om het uit te zetten 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.202s