S'abonner :

Newsletters

Magazines

01men.

Avis sur les produits

Avis sur les logiciels

Avis sur les jeux

Actualités

A propos de 01net

791 utilisateurs connectés

Forum de 01net / Programmation et développement / problème d'image avec le css [résolu]

problème d'image avec le css [résolu]

TOONIE le 21 octobre 2009 à 10h23

Bonjour,

J’ai un problème que je n’arrive pas à solutionner. Je fais un menu avec des images en guise de liens. L’image changera lorsque le pointeur sera dessus ; en fait elle ne va pas vraiment changer puisque je n’ai qu’une image pour le premier lien par exemple, et donc le css n’affichera que la partie supérieure de celle-ci, puis quand le pointeur est dessus, le css affichera la partie inférieure de la même image. 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) :

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

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

-->Message édité par TOONIE le 22/10/2009 08:27:01<--

répondre

TOONIE le 21 octobre 2009 à 17h41

Bon, j'ai avancé dans le code. 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) :

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

<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 le 22 octobre 2009 à 08h25

Solutionné !

Je vous donne le code pour info, ça peut intéresser qn un jour...

le css :

#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;}

le html :

répondre