CSS : mouseover sur 3 photos aligné, problème de décalage

Auteur
chrisgal	# 19 Mar 2010 - 07:20:53
16 Posts	bonjour Je voudrais aligner 3 photos et avoir un effet de zoom sur chacunes d'elles quand je passe la souris dessus. J'ai donc crée le code suivant : <div class="galery"> <ul id="rubriques"> <li><a href="#"><img src="image1.gif"/></a></li> <li><a href="#"><img src="image2.gif"/></a></li> <li><a href="#"><img src="image3.gif"/></a></li> </ul> Pour le code css, je defini mon bloc ul largeur hauteur etc ... en display block J'ai ensuite le code suivant : .galery ul li {display:inline;float:left;width:180px;border:1px #ma couleur solid;} Mon pb c'est que je ne veux pas de bordure et le fond étant non uniforme je ne peux pas sélectionner la meme couleur pour ma bordure. Si j'enlève ma bordure, quand je passe la souris sur une photo, le zoom est normal mais les miniatures de droites se décalent d'un rang. Comment remédier à ce pb ?
16 Posts
mlbcreation	# 19 Mar 2010 - 09:35:38
56 Posts	`img{margin:1px;} img:hover{border:1px #couleur solid;margin:0;}`
56 Posts
Corinne S.	# 19 Mar 2010 - 10:20:05
Modérateur 2502 Posts	Petite remarque : l'utilisation simultanée des propriétés display et float n'est pas utile. Dans le cas présent, un simple float est suffisant. On rajoutera list-style: none; pour supprimer la puce associée. Il n'est pas nécessaire d'espérer pour entreprendre, ni de réussir pour persévérer.
Modérateur 2502 Posts