Padding sur la balise <li> et espace entre les <li>

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

j'ai un petit problème avec les <li>, quand je leur applique un padding de 15px par exemple,sur une barre d'une hauteur de 30px, ça me fais des choses bizarres sur certain navigateurs. (étonnement pour le coup, seul IE fonctionne correctement …)

Firefox

Opéra et Chrome

Internet Explorer 11

Et je voulais savoir s'il y avait un moyen de supprimer ces espaces:

Problème d'espacement

En vous remerciant, WinXaito.

+0 -0
Auteur du sujet

Très bien,

voici donc le css de la barre de navigation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    nav{
        background-color: #961414;
        padding:15px;
        text-align: center;
    }
    nav ul{
        display:inline;
        list-style-type: none;
    }
    nav li{
        display:inline;
        padding: 15px 20px 15px 20px;;
        margin:0;
        color:white;
    }
    nav li:hover{
        background-color: white;
        cursor:pointer;
        text-decoration: underline;
    }

Le html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav>
    <ul>
        <a href="/"><li style="background-color:<?php echo $accueil;?>">Accueil</li></a>
        <a href="/presentation"><li style="background-color:<?php echo $presentation;?>">Présentation</li></a>
        <a href="/situation"><li style="background-color:<?php echo $situation;?>">Situation</li></a>
        <a href="/contact"><li style="background-color:<?php echo $contact;?>">Contact</li></a>
        <a href="/emploi"><li style="background-color:<?php echo $emploi;?>">Emploi</li></a>
        <a href="/concours"><li style="background-color:<?php echo $concours;?>">Concours</li></a>
    </ul>
</nav>
+0 -0
Staff

Tes espaces verticaux doivent être liés à l'alignement vertical des éléments. Essaie de jouer avec vertical-align.

Pour ce qui est des espacements horizontaux c'est tout simplement dû au display: inline qui affiche les espaces présents dans le HTML. Donc soit tu supprimes ces espaces, soit tu fais en sorte de les masquer (avec des flottants ou en jouant avec letter-spacing sur le parent.

Auteur du sujet

Donc soit tu supprimes ces espaces, soit tu fais en sorte de les masquer (avec des flottants ou en jouant avec letter-spacing sur le parent.

Et comment je les supprimes ? Et ce moyen de les masqués avec letter-spacing est-il "propre" ?

Et sinon je vais tester le vertical-align. Merci

[edit]

J'ai tenté d'appliquer le vertical-align sur un <li> ou le <ul>, mais c'est encore pire.

Opera et Chrome

Firefox

IE 11

Édité par WinXaito

+0 -0
Auteur du sujet

Eu… un li dans un a ???? c'est quoi ce truc immonde ?

Sinon, pour un menu horizontale, un diplay: inline n'est pas la technique recommandée, il serai plus approprié d'utiliser la propriété float.

Exemple ici et ici, sinon une recherche google donne plein d'autre exemple ;)

La source

A je viens de voir ton message, je met le lis dans un <a> pour avoir le lien sur toutes la zone, (Donc le padding) et pas uniquement sur le texte. Si il y a un autre moyen plus propre, alors volontier.)

Et merci pour tes liens, je vais voir ça.

+0 -0
1
2
3
4
5
6
nav a {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
}

code non testé, c'est juste l'idée ;)

-> donc fatalement il ne faut pas de padding dans le li, il faut le mettre au niveau du a

Édité par La source

+0 -0
Auteur du sujet

C'est ce que j'ai eu lu, qu'il déconseillait l'utilisation de width:100%.

Mais j'ai réussi à résolver mon problème, j'ai trouver une astuce asser simple, car j'ai eu trop de problème avec les floats.

Résultat:

Sur tous les navigateurs

Et la modification se fait sur le html en ajoutant un commentaire entre les <li>:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<nav>
    <ul>
        <li style="background-color:<?php echo $accueil;?>">
            <a href="/">Accueil</a>
        </li><!--
        --><li style="background-color:<?php echo $presentation;?>">
            <a href="/presentation">Présentation</a>
        </li><!--
        --><li style="background-color:<?php echo $situation;?>">
            <a href="/situation">Situation</a>
        </li><!--
        --><li style="background-color:<?php echo $contact;?>">
            <a href="/contact">Contact</a>
        </li><!--
        --><li style="background-color:<?php echo $emploi;?>">
            <a href="/emploi">Emploi</a>
        </li><!--
        --><li style="background-color:<?php echo $concours;?>">
            <a href="/concours">Concours</a>
        </li>
    </ul>
</nav>
+0 -0
Staff

Les commentaires sont une technique courante, ça évite de jouer avec du CSS. C'est pas forcément le plus clean mais ça reste correct. (Par contre l'excuse des floats qui créent des problèmes n'en est pas vraiment une, sauf si tu veux quelque chose de centré avec une largeur variable)

Par contre width: 100% sur un élément block n'a aucun sens : c'est le comportement par défaut et c'est source de problèmes (ajoute un simple padding sur ce genre d'éléments, tu verras tout de suite de quoi je parle).

Édité par viki53

Auteur du sujet

Par contre width: 100% sur un élément block n'a aucun sens : c'est le comportement par défaut et c'est source de problèmes (ajoute un simple padding sur ce genre d'éléments, tu verras tout de suite de quoi je parle).

viki53

Je suis totalement d'accord sur ce point !

+0 -0

Le problème est résolu, mais je voulais tout de même signaler les flexbox qui à mon avis pourraient répondre à ton problème. :)

(Et sinon, ils discutent sur ce topic de SO des différentes manières de virer les whitespaces dus au HTML. Moi je serais tenté d'utiliser la réponse de opatut, mais toutes se valent)

+0 -0
Staff

Une autre solution aurait été de faire un display: table sur le UL, et de mettre les LI en display: table-cell.

Thunderseb

Celle que j'oublie toujours ! Pratique en plus pour répartir les éléments sur toute la largeur, façon flexbox (qui n'a d'ailleurs pas grand intérêt ici je trouve — sans parler de son support encore bancale).

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte