login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Menu (Opgelost)

Offline karel - 12/06/2010 17:34 (laatste wijziging 12/06/2010 17:37)
Avatar van karelHTML interesse Ik maakte een menu met UL en li, nu wens ik voor de 1ste link (link1) een afbeelding home te plaatsen met link naar de startpagina. IK deed alles doch verschijnt de afbeelding niet ?
Iemand raad. U kan hier de pagina vinden, http://www.computer-zone.be/index3.htm

Tussen de links plaatste ik ook een afstandhouder, iemand een idee hoe ik deze kleiner maak en toch verticaal centreer op de menu balk.

7 antwoorden

Gesponsorde links
Offline WouterJ - 12/06/2010 17:48
Avatar van WouterJ HTML gevorderde plaatje bestaat niet:
http://www.compter-zone.be/images/home.gif
Offline karel - 12/06/2010 17:59
Avatar van karel HTML interesse Nu wel sorry vergeten over te zetten.
Offline WouterJ - 12/06/2010 18:02
Avatar van WouterJ HTML gevorderde Waarom heb je de rest eigenlijk met tabellen opgemaakt? Dit kan veel beter met div'jes.

En de afbeelding bestaat nog steeds niet: http://www.compter-zone.be/images/home.gif
Offline karel - 12/06/2010 18:12 (laatste wijziging 15/06/2010 21:24)
Avatar van karel HTML interesse ok, zie het al moest computer-zone zijn en niet compter-zone, nu zie je de afbeelding wel maar verschijnt niet in de menu balk ?

Ik maakte de pagina met tabelen omdat er nog veel meer bij deze pagina hoort dan enkel de menu balk. Makkelijkhalve deed ik de rest weg. 
Offline ProjectWebdesign - 16/06/2010 20:41
Avatar van ProjectWebdesign Lid Eigenlijk als je het echt netjes wil doen moet je tabellen voorkomen in je website lay-out.
Tabellen mag je natuurlijk wel gebruiken bij het maken van een tabel  

Maar in een lay-out moet je het het eigenlijk met divs enzo zien te doen. En dat is altijd mogelijk  
Offline karel - 18/06/2010 19:03
Avatar van karel HTML interesse Bedankt voor je antwoord, doch is mijn vraag/probleem hiermede niet opgelost.
Kan iemand mij helpen ?
Alvast bedankt.
Offline ProjectWebdesign - 18/06/2010 19:38 (laatste wijziging 18/06/2010 19:38)
Avatar van ProjectWebdesign Lid Nu heb ik gezien wat je bedoelde. Het probleem heb ik voor jou opgelost.
De css code heb ik hieronder staan. Het enigste wat je in je HTML moet aanpassen is dat je in de <a></a> van de li.hover even tekst zet. Want als er niks instaat pakt die hem niet.
Door de text-index: -999px; is de tekst niet zichtbaar.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. 	.menu ul {
  3. 		list-style-type: none;
  4. 		background-image: url(http://www.compter-zone.be/images/bg.gif);
  5. 		height: 30px;
  6. 		width: 831px;
  7. 		margin: 0px;
  8. 		padding:0px
  9. 	}
  10.  
  11. 	.menu ul li {
  12. 		float: left;
  13. 		background: #06F url(http://www.computer-zone.be//images/afstandhouder.gif) center right no-repeat;
  14. 		display: block;
  15. 		line-height: 30px;
  16. 		float: left;
  17. 	}
  18.  
  19. 	.menu ul li a {
  20. 		padding: 0 10px;
  21. 		display: block;
  22. 		line-height: 30px;
  23. 		text-decoration: none;
  24. 		font-family: Arial, Helvetica, sans-serif;
  25. 		font-size: 11px;
  26. 		font-weight: bold;
  27. 		color: #ffffff;		
  28. 	}
  29.  
  30. 	.menu ul li a:hover, .menu ul li a.selected {
  31. 		color: #09F;
  32. 	}
  33.  
  34. 	.menu ul li.home a {
  35. 		background: url(http://www.computer-zone.be/images/home.gif) center center no-repeat;
  36. 		text-indent: -9999px;
  37. 		width: 25px;
  38. 	}
  39. </style>


De volledige code kan je hier vinden: http://pastebin.com/mHrY3EYA
Bedankt door: karel
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.182s