login  Naam:   Wachtwoord: 
Registreer je!
 Forum
Zoeken  Regels  Help
Categorieën > HTML & CSS

verticaal vs horizontaal menu

roxan – 05/01/2012 11:40
Offline offline




Lid
 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
  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
  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

yolk – 05/01/2012 12:06
Offline offline



HTML interesse
Wat stond er niet juist als je display:inline gebruikte? Bij werkt dit wel namelijk

WouterJ – 05/01/2012 15:20
Offline offline



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.

FrankieC – 06/01/2012 23:07 (Laatst gewijzigd op 06/01/2012 23:10)
Offline offline



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-2012 Sitemasters.be - Regels - Gehost door: Vircon - Laadtijd: 0.042s