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 !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
TOONIE   21-10-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

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
Badge Programmation Bronze crazycat@idn   21-10-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.

------------------------------ Réseau IRC Francophone | g33k-zone
 Répondre à crazycat@idn
TOONIE   21-10-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/.

Répondre à TOONIE
TOONIE   21-10-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 :(

Répondre à TOONIE
TOONIE   22-10-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

Répondre à TOONIE
Créer un nouveau sujet Répondre
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.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,528 secondes
Liens