Bordure interne d'une image

Bonjour voici mon problème j'ai une image et je veux que lorsque je fait le survole j'aurai un bordure qui entre de 4px j'ai essayer avec ce code mai j'ai une peu de decallage au niveau de mon image

* Mon code html:

<div class="div_gen" ><a href="#?" class="div_border_interne"><img src="fr/image/jpg/img1.jpg" alt=" " width="100" height="100" /></a> </div>



* Mon code css :

.div_gen {position:relative; z-index:1; width:100px;height:100px; }
.div_border_interne {display: inline-block; width:100px; height:100px; z-index:1;}
.div_border_interne:hover {display: inline-block; border:4px solid #CC3300; position:absolute; z-index:999; width:92px; height:92px; overflow:hidden; left:4px; top:4px; right:4px; bottom:-4px; margin:-4px;
}


Merci

Bonjour.
Il ne devrait pas être utile de positionner ton bloc de manière absolue au survol. Le fait d'ajouter une bordure de 4px va naturellement le pousser de 4px vers la droite, et vers le bas ; d'ailleurs la "taille totale" (height/width + padding + border + margin) de ce bloc passe de 100px à 108px, à cause de cette bordure.
L'image qui était positionnée aux coordonnées (0px ; 0px) par rapport au bloc-parent de plus haut niveau se retrouve donc aux coordonnées (4px ; 4px) lorsqu'elle est survolée.
Modifié par phpdoesnotcare (27 Apr 2010 - 16:45)

Salut,

J'ai pensé à ces deux solutions permettant d'ajouter une bordure interne au survol de l'élément :

1°) La bordure est créée par un <span>, qui vient se superposer à l'image lors du survol

<p id="ex_1">
	<a href="#"><span></span><img src="img.jpg" alt=""/></a>
</p>

p#ex_1 a { position:relative; display:block; width:100px; height:100px; }
p#ex_1 a:hover span { position:absolute; top:0; left:0; display:block; width:90px; height:90px; border:5px solid red; }

2°) On simule une bordure interne en utilisant du padding sur le conteneur principal

<p id="ex_2">
	<a href="#"><img src="img.jpg" alt=""/></a>
</p>

p#ex_2 { width:100px; height:100px; }
p#ex_2 a { display:block; width:100%; height:100%; overflow:hidden; }
p#ex_2:hover { padding:5px; width:90px; height:90px; background:red; }
p#ex_2:hover a img { margin-top:-5px; margin-left:-5px; }

Il y en a sûrement d'autres...

Bonjour casillas

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation