Votre question

Problème pour afficher une image en css

Tags :
  • Arrière plan
  • Programmation
Dernière réponse : dans Programmation
21 Octobre 2009 15:39:32

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

Autres pages sur : probleme afficher image css

a c 145 L Programmation
21 Octobre 2009 16:31:42

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.
m
0
l
21 Octobre 2009 16:41:38

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/.
m
0
l
Contenus similaires
21 Octobre 2009 17:36:56

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 :( 
m
0
l
22 Octobre 2009 08:14:23

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
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS