Discussion :

[Warz]

Le titre est pas mal du tout

En fait, j'ai validé mon site en xhtml1.0 strict et j'ai récupéré le code fournit par w3c pour insérer leur image "XHTML 1.0 Valid" qui est un a href :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<a href="http://validator.w3.org/check?uri=referer">
    <img src="img/w3c.bmp" alt="Valid XHTML 1.0!" height="31" width="88" />
</a>

Le truc est qui je me suis retrouvé avec un cadre bleu foncé autour de l'image. Pas de prob, j'imaginais que c'était dû au a href.

Donc j'ajoute une balise style dans le head du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<style type="text/css">
    body {background-color: #bfffff;}
    a {text-decoration: none;}
</style>

pour qu'il n'y ait pas de décoration sur les a.

Mais même avec ça, je l'avais toujours. Donc je passe en mode "Panic, ligne de code power" et j'ajoute ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<style type="text/css">
    body {background-color: #bfffff;}
    a {text-decoration: none;}
    a:visited {text-decoration: none;}
    a:hover {text-decoration: none;}
</style>

mais toujours pareil.

Je test en mettant du texte à la place de l'image et miracle, il n'y a vraiment pas de décoration !!!

J'ai beau regardé plein de css de plein de site qui ont une image en a href mais c'est pareil que mon style.

Je ne vois vraiment pas pourquoi j'ai ce cadre bleu foncé autour de mon image. Est-ce vraiment lié au a href ou ai-je fait fausse route dès le début ?

[10-nice]

html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img class="image" src="img/w3c.bmp" alt="Valid XHTML 1.0!" height="31" width="88" />

css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.image{border:0;}

[v4np13]

J'ai eu la blague aussi mais ils avaient mis une bordure, ce qui n'a pas l'air d'être le cas chez toi... Regarde à qui ressemble l'image.

Autrement tu peux le personnaliser:
http://www.sovavsiti.cz/css/w3c_buttons.html
http://www.kalsey.com/tools/buttonmaker/

[Warz]

Arf... ça me le fait toujours. Je vous mets le code complet (border inclus) :

EDIT : AH AH !!!
ça marche !

Merci tout le monde, utiliser une classe image fonctionne nickel.

[v4np13]

As-tu mis ton site en ligne? Le lien revoie vers une page où on rentre une url à vérifier. Sur mes sites je mets le lien qui renvoie sur le résultat des tests. Mais quand on regarde l'image, il n'y a pas de bordure.

[10-nice]

comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="http://www.asyres.fr/sendermail/img/w3c.bmp" alt="Valid XHTML 1.0!" height="31" width="88" [b]style="border:0;"[/b] />

Mais si tu utilise du css d'une part mettre ton css dans un fichier .style.css par exemple et pas sur ta page c'est plus conseillé. Et d'autre part utilise du css pour tout, pas en mettre juste la moitié

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<img class="image" src="http://www.asyres.fr/sendermail/img/w3c.bmp" alt="Valid XHTML 1.0!" />
 
<style type="text/css">
      body {background-color: #bfffff;}
      a {text-decoration: none; border:0;}
      .image {height:31px;width:88px;border:0;} 
   </style>

[Warz]

Le site est en effet en ligne mais tout marche bien maintenant. C'était une histoire de border en effet, j'ai cru à un hyper qui encadrait mon image...

C'est vrai que comme j'utilise des css, je devrais tout mettre en css.

Merci tous les 2 !