Explication taille menu

Résolu/Fermé
haegemonia76 - 27 nov. 2014 à 14:38
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 28 nov. 2014 à 16:40
Bonjour,
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:

2 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
27 nov. 2014 à 16:29
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
0
haegemonia76
27 nov. 2014 à 17:39
Salut,
Je te remercie Pitet pour l'eclaircissement, ce sont des modifications bien fastidieuse ><'.

Cordialement,
Haegemonia76
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
28 nov. 2014 à 16:40
tu peux remplacer la propriété "display: inline-block;" par un "float: left;" sur les premiers éléments ul de ton menu
-> c'est donc une seule ligne à modifier dans ton css ;)
0