Se connecter avec
S'enregistrer | Connectez-vous

Problème pour afficher une image en css

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte

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

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
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde