28220 sujets

CSS et mise en forme, CSS3

[Résolu]Changement de bordure d'images au passage de la souris

Salut à tous,

je voudrais que les cadres des images s'inversent au passage de la souris.
IE le fait, mais pas FF...damn it!!! Where is the ball (ou est la c...?)

Si vous avez la solution, merci d'avance!!
La page est ici:
http://www.kameleonsax.com/spectacle.html

La CSS:
*{margin: 0;padding: 0;}

body {
background: #000;
}

#conteneur, #pied, #centre {width: 600px;
margin-left: auto;
margin-right:auto;
}
#conteneur {height: 700px;
margin-top: 50px;
border: green 1px solid;
}
#pied {
font-size: 80%; 
text-align: center;
margin: 0.5em auto;
padding: 0.5em 0;
font-family :"Trebuchet MS", Verdana, Arial, Helvetica, Courier, sans-serif;
color: #ff8c00;
}

#centre {
padding-top: 15px;
text-align: center;
display: block;
border: 1px red solid;
}

img {
 border: 1px solid ;
border-color: #444 #aaa #aaa #444;
margin: 5px;
padding: 5px;
}

 a:link{
 border-color: #444 #aaa #aaa #444;
border: 1px solid;
}

 a:visited{
 border: 1px solid;
border-color: blue;
}

 a:hover{
 border: 1px solid;
border-color: #aaa #444 #444 #aaa;
}
 a:active{
 border: 1px solid;
border-color: #aaa #444 #444 #aaa;
}


Le HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Kameleon Sax</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css"
href="general.css" />
</head>

<body>
<div id="conteneur">
<div id="centre">

    <a href="v1.html"><img src="images/IMG_1311.jpg" width="100" height="67" alt="Le Bertic" /></a>
   <a href="v2.html"><img src="images/IMG_1312.jpg" width="100" height="67" alt="Le Bertic" /></a>
    <a href="v3.html"><img src="images/IMG_1313.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v4.html"><img src="images/IMG_1316.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v5.html"><img src="images/IMG_1318.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v6.html"><img src="images/IMG_1319.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v7.html"><img src="images/IMG_1322.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v8.html"><img src="images/IMG_1323.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v9.html"><img src="images/IMG_1324.jpg" width="100" height="67" alt="Le Bertic" /></a> 
  <a href="v10.html"><img src="images/IMG_1327.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v11.html"><img src="images/IMG_1328.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v12.html"><img src="images/IMG_1329.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v13.html"><img src="images/IMG_1330.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v14.html"><img src="images/IMG_1331.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v15.html"><img src="images/IMG_1341.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v16.html"><img src="images/IMG_1343.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v17.html"><img src="images/IMG_1347.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v18.html"><img src="images/IMG_1348.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v19.html"><img src="images/IMG_1349.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v20.html"><img src="images/IMG_1357.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v21.html"><img src="images/IMG_1358.jpg" width="100" height="67" alt="Le Bertic" /></a>
  <a href="v22.html"><img src="images/IMG_1362.jpg" width="100" height="67" alt="Le Bertic" /></a>
 

</div>
</div>
<div id="pied">
Copyright (c) Kameleon Sax 2005.
</div>
</body>
</html>

Modifié par bouquins (06 May 2005 - 22:44)
Merci Raphael!

Je ne pensais pas qu'un truc aussi bête était aussi compliqué à gérer...

En fait, je précise que la taille des vignettes est immuable (100*67); je ne sais pas si ça peut aider...

Encore une question: pourquoi IE réagit comme on espère, pour une fois, et pas FF? Quelle est leur différence de "traduction"?
Comme il est dit dans le lien de Raphaël :
a écrit :
Les problèmes d'affichage rencontrés nous rappellent à l'ordre : la balise <a> est un élément en-ligne qui n'est pas prévu pour posséder des dimensions.
La bordure entoure par conséquent un élement sans dimension et il est logique que cela provoque quelques soucis.


Ce qui signifie que justement Firefox a le comportement correct, mais pas IE (mais ça, on ne peut pas l'expliquer ^^).
Modifié par Nyro Xeo (06 May 2005 - 19:45)
Administrateur
bouquins a écrit :

Encore une question: pourquoi IE réagit comme on espère, pour une fois, et pas FF? Quelle est leur différence de "traduction"?

En fait, c'est un peu expliqué dans le billet : <a> est une balise de type en-ligne qui n'est donc pas censée avoir de dimensions. Donc en l'entourant de bordures, ça pose normallement un problème.
C'est encore IE qui n'interprête pas les choses correctement Smiley ohwell

Edit : ah ben grillé Smiley smile
Modifié par Raphael (06 May 2005 - 19:49)
a écrit :
la balise <a> est un élément en-ligne qui n'est pas prévu pour posséder des dimensions.

Même si on lui en donne une, genre ceci?

a img {
border: 1px solid ;
border-color: #444 #aaa #aaa #444;
margin: 5px;
padding: 5px;
width: 100px;
height: 67px;

}
Administrateur
bouquins a écrit :
la balise <a> est un élément en-ligne qui n'est pas prévu pour posséder des dimensions.

Même si on lui en donne une, genre ceci?

a img {
border: 1px solid ;
border-color: #444 #aaa #aaa #444;
margin: 5px;
padding: 5px;
width: 100px;
height: 67px;

}

Non, seul un élément de type bloc (ou un élément en-ligne spécial comme <img>) peut posséder des dimensions.
D'ailleurs tu peux tester : même en donnant des dimensions à une balise <a>, elle ne prend pas ces dimensions.
Il faut donc absolument la déclarer en bloc, mais tu devrais t'en sortir assez facilement en lui donnant un positionnement flottant. Ça devrait être parfait pour une galerie.

Plus de précisions :
http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_widths_and_margins
http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_heights_and_margins

Les éléments "en-ligne remplacés" sont les seuls qui possèdent des dimensions (height, width) par défaut. Il s'agit des éléments IMG, INPUT, TEXTAREA, SELECT, et OBJECT.

Pour tous les autres éléments en-ligne :
- The 'width' property does not apply. A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'.
- The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property.
Modifié par Raphael (06 May 2005 - 19:55)
si tu veux juste changer la couleur : 
<a class="bv" href="#"><img src="smalls.jpg" /></a>

et :
a.bv
{
  color: red;
}

a.bv img
{
  border: 2px red solid;
}

a.bv:hover
{
  color: green;
}

a.bv:hover img
{
  border: 2px green solid;
}

C'est pas sorcier non? et un p'tit lien
IlSandor.
Modifié par ilsandor (06 May 2005 - 22:24)
Grand merci Ilsandor, ainsi qu'à tous; c'est résolu!

Juste un petit truc, Ilsandor:
a écrit :
C'est pas sorcier non?


Sûrement pas pour toi, au vu de tes connaissances, mais pour moi, ça l'était.
mais de rien si ça a pu t'aider Smiley cligne
bouquins a écrit :
Juste un petit truc, Ilsandor: C'est pas sorcier non?


Sûrement pas pour toi, au vu de tes connaissances, mais pour moi, ça l'était.
Désolé, c'était sans signification particulière.
Au plaisir.
IlSandor.
Modifié par ilsandor (07 May 2005 - 00:06)
Sujet clos
Aller à