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

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 …)

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

En vous remerciant, WinXaito.

Tu pourrai nous donner un code html/css de base stp ?

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>

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.

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.

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

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.

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

euh width:100% … je crois que plusieurs personne sauterais jusqu'au plafond en disant qu'il ne faut pas l'utiliser.

Ha bon ? et pourquoi sa ? j'men sert fréquemment sans problème.

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:

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>

Mouai… si tu es satisfais du résultat n'empêche que c'est du plâtre sur une jambe de bois.

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).

Je suis totalement d'accord sur ce point !

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)

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

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).