Discussion :

[himba]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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é.

[NoSmoking]

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

[himba]

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[himba]

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.

[himba]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é 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