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