login  Naam:   Wachtwoord: 
Registreer je!
 Forum

verticaal vs horizontaal menu

Offline roxan - 05/01/2012 11:40
Avatar van roxanLid Hallo,

hieronder staan 2 css codes, het eerste voor een verticaal navigatiemenu en het tweede moet er precies hetzelfde uitzien qua opmaak maar dan als horizontaal navigatiemenu.

Nu dacht ik dat je voor een horizontaal navigatiemenu enkel "display: inline;" moest toevoegen. Dat heb ik ook gedaan maar dan stond het nog niet juist. Als ik ook "display:block;" verwijderde in de CSS code van het horizontale menu stond het menu wel horizontaal.

Hoe komt dat eigenlijk?

// CSS voor een verticaal navigatiemenu
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css"> 
  2. #menu{
  3. 	font-family: Verdana, Arial, Sans-serif;
  4. 	width: 10em;
  5.  
  6. }
  7. #menu ul {
  8. 	list-style-type: none;
  9. }
  10. #menu li {
  11. 	margin-top: 0.5em;
  12. 	background-color: #ace5cd;
  13. }
  14. #menu ul li a{
  15. 	display:block;
  16. 	text-decoration: none;
  17. 	width: 6em;
  18. 	border-bottom: 1px solid transparent;	
  19. }
  20. #menu ul li a:hover{
  21. 	color: red;
  22.  
  23. }
  24. </style>


// CSS voor een horizontaal navigatiemenu
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css"> 
  2. #menu{
  3. 	font-family: Verdana, Arial, Sans-serif;
  4. }
  5. #menu ul {
  6. 	list-style-type: none;
  7. }
  8. #menu li {
  9. 	display: inline;
  10. 	margin-top: 0.5em;
  11. 	background-color: #ace5cd;
  12. }
  13. #menu ul li a{
  14.  
  15. 	text-decoration: none;
  16. 	width: 6em;
  17. 	border-bottom: 1px solid transparent;	
  18. }
  19. #menu ul li a:hover{
  20. 	color: red;
  21.  
  22. }
  23. </style>

3 antwoorden

Gesponsorde links
Offline yolk - 05/01/2012 12:06
Avatar van yolk HTML interesse Wat stond er niet juist als je display:inline gebruikte? Bij werkt dit wel namelijk
Offline WouterJ - 05/01/2012 15:20
Avatar van WouterJ HTML gevorderde Zoals ik op html-site al had gezegd. Display: inline; wordt bedoelt voor dingen die in een regel staan, woorden enzo. Niet voor block elementen, daarvoor hebben we display: block;

Om iets naast een ander te krijgen moet je beide element float: left; mee geven. Als je alle li elementen nou float: left; mee geeft staan ze allemaal naast elkaar.
Offline FrankieC - 06/01/2012 23:07 (laatste wijziging 06/01/2012 23:10)
Avatar van FrankieC Lid Hier een tutorial over hoe horizontale en verticale menu's te maken: Create a Drop-down/Fly-out Menu with CSS. Je kunt horizontale menu's op zich ook met display:inline maken, maar met float:left is veel handiger omdat je dan de <li>'s afmetingen kunt geven en ze makkelijker aan kunt laten sluiten.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.195s