padding dans menu

Bonjour,

Je débute avec css et j'essai de faire un menu (avec highlight qd on survole les liens) avec qq mots clés et 2 petites images constituées par des drapeaux. Comme il y a ces images le fait de préciser un padding au balise <a> padding:10px 20px fait que le paddding est appliqué uniformément (au texte et aux images) et que les liens texte sont highlightés en partie alors que les images le sont complètement (décalage avec le border). Y a t il un moyen de spécifier un padding différent pour les balises <a> texte et les balises <a> image ? ou autre solution ?
J'ai ajouté 2 petites images pour illuster.

voici le code html :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<div id="topnav"> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="Qui_sommes_nous.html">Qui sommes nous</a></li> <li><a href="loi.html">La Loi</a></li> <li><a href="ief.html">Mieux Connaître L'IEF</a></li> <li><a href="ressources.html">Ressources</a></li> <li><a href="contacts.html">Contacts</a></li> <li><a href="english.html"><img src="images/icons/drapeau-uk.gif" /></a></li> <li><a href="deutsch.htm"><img src="images/icons/drapeau-de.gif" /></a></li> </ul>

---

et le css :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

#topnav { clear:both; background-color:#333; } #topnav ul { width:100%; float:left; margin:0px 0; background-color:#333; border-bottom:3px #ccc solid; } #topnav ul li { display:inline; } #topnav ul li a { float:left; padding:10px 20px;}     #topnav a:link { color:#fff; } #topnav a:visited { color:#fff; } #topnav a:active { color:#fff; } #topnav a:hover { color:#fff; background-color:#900; } #topnav a:focus { color:#fff; }

---

merci de votre aide

Non, tu ne peux pas (encore) cibler un élément en fonction de ses enfants en CSS. Ce sera possible en CSS4, mais aucun navigateur ne l'implémente ne serait-ce que partiellement.

La solution est de passer par des classes différentes selon le contenu et d'utiliser ces classes pour déterminer le padding souhaité.

Bonjour,
as tu essayé de passer par un line-height , en mettant les A et les IMG en display:inline-block

Citation:

---

Envoyé par Bovino

Non, tu ne peux pas (encore) cibler un élément en fonction de ses enfants en CSS. Ce sera possible en CSS4, mais aucun navigateur ne l'implémente ne serait-ce que partiellement.

La solution est de passer par des classes différentes selon le contenu et d'utiliser ces classes pour déterminer le padding souhaité.

---

merci.

Comme je débute j'en étais resté au div. Sa fonctionne effectivement très bien avec des class. J'ai donc modifié mon html comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<div id="topnav"> <ul> <li><a class="texte" "href="index.html">Accueil</a></li> <li><a class="texte" href="Qui_sommes_nous.html">Qui sommes nous</a></li> <li><a class="texte" href="loi.html">La Loi</a></li> <li><a class="texte" href="ief.html">Mieux Connaître L'IEF</a></li> <li><a class="texte" href="ressources.html">Ressources</a></li> <li><a class="texte" href="contacts.html">Contacts</a></li> <li><a class="image" href="english.html"><img src="images/icons/drapeau-uk.gif" /></a></li> <li><a class="image" href="deutsch.htm"><img src="images/icons/drapeau-de.gif" /></a></li> </ul> </div>

---

et mon css comme ceci :

Code:

---

1 2 3 4 5 6 7

#topnav { clear:both; background-color:#333; } #topnav ul { width:100%; float:left; margin:0px 0; background-color:#333; border-bottom:3px #ccc solid; } #topnav ul li { display:inline; } #topnav ul li a { float:left; }   .texte {padding:10px 20px; } .image {padding:5px 20px; }

---

J'ai le résultat escompté :ccool: mais je ne sais pas si mon code est très propre. N'y a t il pas moyen de cibler plus précisément les class d'une div ?


merci

Citation:

---

Envoyé par NoSmoking

Bonjour,
as tu essayé de passer par un line-height , en mettant les A et les IMG en display:inline-block

---

merci de la réponse.
Comme en passant par des class cela semble fonctionner et comme je ne comprends pas trop ta réponse je ne creuse pas plus pour le moment....

;)

Citation:

---

Envoyé par himba

Comme en passant par des class cela semble fonctionner et comme je ne comprends pas trop ta réponse je ne creuse pas plus pour le moment....

---

et on ne peut pas t'en blâmer.

A y regarder de plus prêt il s’avère que mettre une height à tes A semble suffisant.

Et en allant juste un peu plus loin

Code:

---

1 2 3 4 5 6 7 8 9 10 11

#topnav ul li a{ float:left; padding:10px 20px; height:30px; /* suffit pour occuper toute la hauteur et pour IE */ line-height:30px; /* centrage verticalement du texte */ text-decoration:none; } #topnav ul li img{ vertical-align:middle; /* centrage vertical des IMG au moins sur IE>7*/ border:none; }

---

Merci beaucoup.
Cela fonctionne effectivement très bien. Après je ne suis pas trop capable pour le moment de dire quel est la meilleure solution entre les class et les ajouts d'argument en terme par ex de compatibilité avec les différents browser. J'ai l'impression que les class offrent une meilleure compatibilité avec notamment les anciennes versions de css (mais ce n'est qu'une intuition).
En tout cas merci beaucoup pour votre aide précieuse.