[Résolu] Bordure

Salut à tous,
bon, malgré avoir suivi ce tuto

http://blog.alsacreations.com/2004/09/01/55-une-bordure-au-survol-dune-image

je n'arrive pas a faire en sorte que la bordure du <a> entoure bien l'image ...

je fait

a {
border:5px;
border-color:#00000;
border-style:solid;
position:absolute;
line-height:1px;
}

Exactement comme dans l'exemple mais ca ne marche pas

Et cette technique marche-t-elle lorsqu'on a un div qui contient 3 images placées avec des margins et que l'on veut appliquer ce style aux trois images ? Merci
Modifié par antonin.design (27 Jul 2006 - 14:31)

Hello,

dans l'exemple, la balise <a> est "passée" en block et est positionné pour contourner "le lots de surprises" des differents navigateurs...

Tu n'as pas lu l'exemple donné jusqu'en bas je pense, l'effet cherché est simple mais sa mise en place est possible de multiples manières et il faut respecter et connaitres différentes choses de bases (qui sont expliqueés ici, type de balise block / en ligne...)

Surtout il y a deux états a donner :

Etat du <a> "normal"

a {
float: left;
display: block;
line-height: 1px;
border : 2px solid white;
}

et l'etat en roll over :

a:hover {
border : 2px solid blue;}

Merci mais je connais le block et in-line aisni que le rollover, et j'ai essayé toutes les combinaisons possible, rien n'y fait, la bordure est plus grande que l'image ...! Même avec le bout de code que tu viens de me donner, à la virgule près ... Mais c'est peut-être que l'image n'est pas placée tout en haut à gauche du div où elle est contenue faut que j'essaye ..

avec ce que j'ai tappé et un :

<a href="#" title=""><img src=""emplacement.jpg" alt="" /></a>

Ca fonctionnait bien.

Ca doit venir d'une autre declaration de ton css.

Essaye de virer les marges sur tes images pour tester...
ou regardes tes declarations liées aux liens et aux images.

C'est bon des que l'image touche le coin haut gauche de son conteneur, donc je dois faire un div par image ... merci

antonin.design a écrit :
C'est bon des que l'image touche le coin haut gauche de son conteneur, donc je dois faire un div par image ... merci

De rien.
Je pense que ce n'est pas normal de devoir en arriver là, tu vas finir avec un document de 10km a ce rythme.
Essayes de comprendre pourquoi ça ne fonctionne que "dans tel type de cas".

As tu un exemple en ligne a donner qu'on puisse voir ?

Salut,

La méthode décrite dans ce billet me semble bien compliquée. Il suffit d'appliquer la bordure sur l'image et d'ajouter une règle sur a:hover afin que ça fonctionne également avec Internet Explorer. Par exemple

a img {
	border: 5px solid white;
}
a:hover img { 
	border-color: red;
}
a:hover {
	background: none;
}

Modifié par Alan (26 Jul 2006 - 16:47)

Non désolé pas d'exemple en ligne ...

Mais de tout facon ce n'est que pour 3 images par page donc c'est pas excessif

Mais pour résumer, j'ai tout fait comme il fallait, et je voyais que le coté gauche et le coté d'en haut étaient collés au conteneur, et étant donné qu'il y avait trois images dans un div séparées par des margins c'était pas possible ...

Tout ca a cause de IE car sous mozilla un hover sur les <img> suffisait en plus du <a> (no comment ..)

[EDIT] Merci, pas vu le nouveau message je vais essayer ca tout de suite
Modifié par antonin.design (26 Jul 2006 - 16:50)

J'ai essayé le code d'Alan. Ca marche !

Gros merci à vous deux
Modifié par antonin.design (26 Jul 2006 - 17:08)

Salut Alan,

en effet c'est nettement plus simple et on cible l'image.
Modifié par Hum (26 Jul 2006 - 17:09)

Je profite du topic pour poser une petite question, dans un CSS, y'a-t-il un moyen pour faire par exemple

a img.nom {
	border: 5px solid white;
}

et à la suite du img.nom rajouter des attributs, car là j'ai mes trois images et ca me donne img_left / img_middle / img_right et donc quelques lignes en plus. J'espere avoir été clair

antonin.design a écrit :
Je profite du topic pour poser une petite question, dans un CSS, y'a-t-il un moyen pour faire par exemple

a img.nom {
	border: 5px solid white;
}

et à la suite du img.nom rajouter des attributs, car là j'ai mes trois images et ca me donne img_left / img_middle / img_right et donc quelques lignes en plus. J'espere avoir été clair

oui, alors ces attributs seront seulement disponible pour une image ayant un lien dessus portant la classe que tu auras défini apres le "."
Modifié par s_har_k (26 Jul 2006 - 17:19)

Je crois qu'on s'est pas compris, actuellement dans mon CSS j'ai à peu près çà :

a img.left {
code:code;
code:code;
code:code;
}

a img.middle {
code:code;
code:code;
code:code;
}

a img.right {
code:code;
code:code;
code:code;
}

Et j'aurais souhaité savoir si j'avais pu tout regrouper avec par exemple (j'imagine)

a img.left:middle:right

voilà j'éspere avoir été un peu plus clair

Bonjour,

on peut mais ce n'est pas la bonne syntaxe (là ça ressemblerait plutôt à la syntaxe des pseudo-classes :link :visited :hover :active)
Il faut les séparer par des virgules comme expliqué dans les docs Les sélecteurs contextuels (W3C fr CSS1) et les sélecteurs (W3C fr CSS2).

EDIT: je viens de retrouver un autre lien que je cherchais en vain, qui permet de voir différents exemples de sélecteurs (et à un niveau avancé de tout comprendre sur leurs priorités): Cascade CSS et priorité des sélecteurs (Laurent Denis sur Openweb).
Modifié par Felipe (26 Jul 2006 - 18:05)

Merci

C'est bien pratique pour économiser quelques lignes