Explication taille menu
Résolu
haegemonia76
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
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