Explication taille menu
Résolu
haegemonia76
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai actuellement une incompréhension au niveau de mon code de mon menu.
Voici le code html :
Et le code SCSS :
Ce que je veux savoir c'est pourquoi quand je donne la taille du menu donc 150px en l'occurrence, ce qui me donne 750px au total pour le menu, le dernier <ul> se remet à la ligne et ne reste pas au même niveau que les autres menus ?
Merci de vos réponse rapide,
Cordialement,
Haegemonia76
J'ai actuellement une incompréhension au niveau de mon code de mon menu.
Voici le code html :
<nav> <ul> <li> <a href="#">Accueil</a> </li> </ul> <ul> <li><a href="#">Menu 1</a> <ul id="s-m1"> <li><a href="#">Menu 11</a></li> <li><a href="#">Menu 12</a></li> </ul> </li> </ul> <ul> <li> <a href="#">Menu 2</a> </li> </ul> <ul> <li> <a href="#">Menu 3</a> </li> </ul> <ul> <li> <a href="#">Menu 4</a> </li> </ul> </nav>
Et le code SCSS :
$tailleMenu: 150px; $tailleTotalMenu: $tailleMenu * 5; nav { display: block; height: 36px; width: $tailleTotalMenu; margin: auto; padding: 0; border: 0; ul { display: inline-block; width: $tailleMenu; height: 36px; line-height: 36px; margin: 0; padding: 0; border: 0; li { /*display: block;*/ /* width: 250px;*/ margin: auto; padding: 0; text-align: center; ul { display: none; li { background: #000000; } } } } a { /*display: inline;*/ margin: 0; padding: 0; color: #fff; text-decoration: none; line-height: 36px; } ul:hover { background: #000000; a { color: #FFFFFF; } ul { display: block; width: 150px; position: absolute; z-index: 10; } } }
Ce que je veux savoir c'est pourquoi quand je donne la taille du menu donc 150px en l'occurrence, ce qui me donne 750px au total pour le menu, le dernier <ul> se remet à la ligne et ne reste pas au même niveau que les autres menus ?
Merci de vos réponse rapide,
Cordialement,
Haegemonia76
A voir également:
- Explication taille menu
- Comment réduire la taille d'un fichier - Guide
- Menu déroulant excel - Guide
- Reduire taille image - Guide
- Canon quick menu - Télécharger - Utilitaires
- Afficher taille dossier windows - Guide
2 réponses
Salut,
Le problème vient des espaces qui sont automatiquement ajoutés entre deux éléments inline ou inline-block. L'explication détaillé et plusieurs solutions sont proposées ici: https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html
Pour corriger rapidement ton menu, tu peux remplacer la propriété "display: inline-block;" par un "float: left;" sur les premiers éléments ul de ton menu.
Sinon tu peux utiliser une des solutions proposées dans le lien précédent : modification du code html ou bidouille du css.
Bonne journée
Le problème vient des espaces qui sont automatiquement ajoutés entre deux éléments inline ou inline-block. L'explication détaillé et plusieurs solutions sont proposées ici: https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html
Pour corriger rapidement ton menu, tu peux remplacer la propriété "display: inline-block;" par un "float: left;" sur les premiers éléments ul de ton menu.
Sinon tu peux utiliser une des solutions proposées dans le lien précédent : modification du code html ou bidouille du css.
Bonne journée