Tom's Guide > Forum > Programmation > Problème pour afficher une image en css

Problème pour afficher une image en css

Forum Programmation : Problème pour afficher une image en css

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Mot :    Pseudo :           
 

Bonjour,

J’ai un problème que je n’arrive pas à solutionner. Je veux que le css affiche mon image et elle n'apparaît pas. Pourquoi le faire avec le css allez-vous me dire, il y a plus simple ! En fait, je fais un menu avec des images en guise de liens. L’image à une partie supérieure qui s'affichera par défaut, puis quand le pointeur est dessus, la partie inférieure de la même image s'affichera, le tout en css. Pour en arriver là, il faut d’abord que l’indication d’afficher l’image soit dans le css, mais elle ne s’affiche pas (le chemin est correct)!!!

Voici le css pour la première image (le lien et l'affichage supérieur/inférieur ne sont pas encore traité ici) :

Citation :

#nav{margin:0; padding:0;}
#nav li {display:inline; padding:0; margin:0;}
.menu{float:left; display:inline; margin-right:10px; width:830px;}
.menu ul {clear:right;}
.menu ul li {float:right;} /*avec .menu ul {clear:right;} permet de centrer le menu*/
#nav_ac_1 {width:120px; background-image:url('../img/image_1.jpg');}



Et le html :

Citation :

<div class="menu">
<ul id="nav">

<li id="nav_ac_1">
<!--là,je ne mets rien, puisque le css affiche l’image-->
</li>

<li id="nav_ac_2">
<img src="../img/image_1.jpg" /><!--là,j’ai mis la même image pour m’assurer que le chemin est bon, et elle s’affiche bien, donc OK-->
</li>

</ul>
</div>



Pouvez-vous m'aider sur ce sujet ?
D'avance merci,
tOOnie

Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.

Ton image ne s'affiche pas car nav_ac_1 ne contient rien, donc sa taille est nulle.
Soit tu forces la taille du li, soit tu y mets un contenu.

------------------------------ Réseau IRC Francophone | g33k-zone
Répondre à crazycat@idn

Merci pour ta réponse. En plus il se pourrait qu'il me faille la balise <a> pour qu'a priori ça marche. Je vais donc mettre du contenu dans <a></a> et je reviens pour dire ce qu'il en est/.

Répondre à TOONIE

J'ai avancé dans le code, merci. Mais mes images ne s'affichent toujours pas. Je ne vois pas ce qui ne va pas...

le css est devenu (j'ai mis sur une ligne chaque élément pensant simplifier sur le forum) :

Citation :

#header { float:left; display:block; width:830px; margin-right:10px; }
#header a { clear:right; float:left; display:block; padding:5px 50px; }
#header ul li { float:left; }
#header ul li a{ overflow:hidden; clear:none; float:none; display:block; height:30px; text-indent:300px; background-position:left top; }
#nav_ac_1 a:link, #nav_ac_1 a:visited{ width:120px; background-image:url(img/associations.jpg) left top;}
#nav_ac_2 a:link, #nav_ac_2 a:visited{width:139px; background-image:url(img/professionnels.jpg) left top; }
#nav_ac_1 a:hover, #nav_ac_1 a:active, #nav_ac_1 a.selected:link, #nav_ac_1 a.selected:visited{ background-position:0 -30px; }
#nav_ac_2 a:hover, #nav_ac_2 a:active, #nav_ac_2 a.selected:link, #nav_ac_2 a.selected:visited{ background-position:0 -30px;}



et le html est devenu :

Citation :

<div id="header">
<ul>
<li id="nav_ac_1"><a href="#" class="selected"></a></li>
<li id="nav_ac_2"><a href="#" class="selected">texte, pour voir s'il s'affiche quelque chose, mais non, ni image, ni texte</a></li>
</ul>
</div>



Toujours besoin d'aide :(

Répondre à TOONIE

Solutionné ! :)

le css :

Citation :

#header {float:left; display:block; width:830px; margin-right:10px;}
#header a{clear:right;float:left;display:inline;}
#header ul li {float:left;}
#header ul li a {overflow:hidden; clear:none; float:none; display:block; height:30px; background-position:left top;}

#nav_ac_1 a:link, #nav_ac_1 a:visited{width:120px;background-image:url('../img/header/header_nav_1.gif');background-position:left top;}
#nav_ac_2 a:link, #nav_ac_2 a:visited{width:139px;background-image:url('../img/header/header_nav_2.gif');background-position:left top;}

#nav_ac_1 a:hover, #nav_ac_1 a:active, #nav_ac_1 a.selected:link, #nav_ac_1 a.selected:visited,
#nav_ac_2 a:hover, #nav_ac_2 a:active, #nav_ac_2 a.selected:link, #nav_ac_2 a.selected:visited, {background-position:0 -30px;}



pour le html :

Citation :

<div class="header">
<ul>
<li id="nav_ac_1"><a href="#" target="_parent" img src="../img/professionnels.jpg" alt="" /></a></li>
<li id="nav_ac_2"><a href="#" target="_parent" img src="../img/associations.jpg" alt="" /></a></li>
</ul>
</div>



tOOnie

Répondre à TOONIE
Tom's Guide > Forum > Programmation > Problème pour afficher une image en css
Aller à :

Il y a 1640 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Liens