Bonjour, 

Voila je vous expose mon problème : Je voulais mettre une image différente dans chaque élément li dans ma barre de navigation et celle-ci s'affiche au-dessus mais pas dans mon élément li. Je vous donne mon code html : 

<pre class="brush: cj">

<nav>

<ul>

   <li><a href="ligue1.html"/><img src="C:\Users\Guillaume BAYENS\Pictures/france.jpg">Ligue 1</a></li>

   <li><a href="ligue2.html"/><img src="C:\Users\Guillaume BAYENS\Pictures/france.jpg">Ligue 2</a></li>

   <li><a href="liga.html"/><img src="C:\Users\Guillaume BAYENS\Pictures/espagne.jpg">Liga</a></li>

   <li><a href="premiere league.html"/><img src="C:\Users\Guillaume BAYENS\Pictures/angleterre.jpg">Premiere League</a></li>

   <li><a href="serie a.html"/><img src="C:\Users\Guillaume BAYENS\Pictures/italie.jpg">Serie A</a></li>

   <li><a href="bundesliga.html"/><img src="C:\Users\Guillaume BAYENS\Pictures/allemagne.jpg">Bundesliga</a></li>

</ul>

</nav>

Et mon code css :

nav ul {

 display:inline-block;

 padding:0;

 margin:0;

 list-style-type:none;

 }

nav li {

 margin-left:2px;

 float:left; /*pour IE*/

 }

nav ul li a {

 display:block;

 float:left;   

 width:90px;

 height:40px;

 background-color: rgb(192,192,192);

 color:black;

 text-decoration:none;

 text-align:center;

 padding:5px;

 border:2px solid;

 /*pour avoir un effet "outset" avec IE :*/

 border-color:#DCDCDC #696969 #696969 #DCDCDC;

 }

nav ul li a:hover {

 background-color:#D3D3D3;

 border-color:#696969 #DCDCDC #DCDCDC #696969;

}

</pre>

Merci d'avance pour vos retours ! 

-
Edité par GuillaumeBayens 21 mars 2018 à 13:54:43

Salut, 

Si tu pouvais mettre le code dans les balises de code, ça serait un peu plus lisible.

Essaye de sortir les images de tes balises <a> tout en les laissant dans les <li>.

Bonjour,

Merci d'utiliser les balises de code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour celà, il faut utiliser le bouton . Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.

Merci de modifier votre message en conséquence via le bouton "Modifier" situé sur son coin supérieur droit, sans quoi le sujet sera fermé.

Autres points :

• float:left; /*pour IE*/ c'est valide pour IE6. Sorti en 2001, abandonné en 2011. Inutile ici, donc.
• float: left sur les a, c'est inutile aussi
• tu forces également une hauteur sur les a : c'est peut-être là ton erreur.