Bonjour,
Considéron une image cliquable (qui serve d'ancre pour un lien donc), j'aimerai pouvoir écarter la bordure (qui caractérise un lien) de l'image sur l'idée d'un 'padding' ou d'un 'margin' (aucun ne fonctionne).
Le but étant de garder une bodure fine (d'1px) tout en l'écartant de l'image pour la faire ressortir et surtout éviter la 'gross-bordur' bien épaisse.
D'avance merci.
Version complète: sur le forum Webmaster Hub : Bordures d'images de liens
Tu peux enlever la bordure bien épaisse (avec border=1 sur l'image) et en mettre une sur le lien (avec border=1) voire mettre un div autour du lien, avec une bordure 
Merci, en fait je suis parti sur du css, ou toutes les img sont en 'border:none' et les 'a img' avec une border de 1px. ainsi, je ne m'embête pas à mettre des 'border' dans le html.
je peux effectivement essayer de mettre en 'span class...' (mode caractère afin d'éviter un saut de ligne avec div) entre 'a' et 'img' histoire de voir...
je vous tiens au courant...
... H+5 minutes :
Que ce soit div ou span, avant 'a' ou entre 'a' et 'img' ou en 'a class=...' cette bordure reste désespérément collée, l'image et sa bordure se baladent au grè des margin et des padding.
je peux effectivement essayer de mettre en 'span class...' (mode caractère afin d'éviter un saut de ligne avec div) entre 'a' et 'img' histoire de voir...
je vous tiens au courant...
... H+5 minutes :
Que ce soit div ou span, avant 'a' ou entre 'a' et 'img' ou en 'a class=...' cette bordure reste désespérément collée, l'image et sa bordure se baladent au grè des margin et des padding.
que se passe-t-il si tu fais :
?
CODE
img.nom_de_la_class_de_limage{
padding:5px;
border:1px solid black;
}
padding:5px;
border:1px solid black;
}
?
CITATION(ricotrutt @ jeudi 21 février 2008 à 08:11) 
que se passe-t-il si tu fais :
?
CODE
img.nom_de_la_class_de_limage{
padding:5px;
border:1px solid black;
}
padding:5px;
border:1px solid black;
}
?
Sous Firefox c'est bon, sous IE6 c'est collé.
Voici le fruit de ces derniers jours de casse tête, un petit lien d'exemple :
à tester sous Firefox et IE
le code simplissime de cette page html ou la classe est bien attribuée à la première image :
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>grr</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="htm_index.css" MEDIA="screen">
</HEAD>
<BODY>
<DIV ID="index">
<H3>Bonjour</H3>
Les images doivent rester cote à cote, centrées, la bordure passe au vert lors du survol de l'image, l'autre image est aussi un lien sans bordure cette fois, je peux décider du padding entre la bordure et l'image. thanks.
<BR><BR><BR>
<CENTER>
<A HREF="accueil.php">
<IMG SRC="index_dioramas-et-figurines.gif" CLASS="marge">
</A>
<A HREF="accueil.php">
<IMG SRC="index_dioramas-et-figurines.gif">
</A>
<BR><BR><A HREF="accueil.php"><B>un lien normal</B></A> qui passe au rouge lors du survol.
</CENTER>
</DIV>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>grr</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="htm_index.css" MEDIA="screen">
</HEAD>
<BODY>
<DIV ID="index">
<H3>Bonjour</H3>
Les images doivent rester cote à cote, centrées, la bordure passe au vert lors du survol de l'image, l'autre image est aussi un lien sans bordure cette fois, je peux décider du padding entre la bordure et l'image. thanks.
<BR><BR><BR>
<CENTER>
<A HREF="accueil.php">
<IMG SRC="index_dioramas-et-figurines.gif" CLASS="marge">
</A>
<A HREF="accueil.php">
<IMG SRC="index_dioramas-et-figurines.gif">
</A>
<BR><BR><A HREF="accueil.php"><B>un lien normal</B></A> qui passe au rouge lors du survol.
</CENTER>
</DIV>
</BODY>
</HTML>
Les deux images sont cliquables, une seule possède une bordure. Elles sont centrées et en mode inline pour rester cote à cote
Voici le script css avec les padding et les survols (+ mes commentaires à 2 balles) :
CODE
body { /* fond de page */
font-family: Comic sans ms,Arial,Sans-serif;
color: #B22222;
}
#index { /* le bloc document */
margin-left: 4%;
margin-right: 4%;
font-size: 90%;
text-align: justify;
}
/* les LIENS */
#index a:link {
text-decoration: none;
color: #B22222;
}
#index a:link img { /* les images cliquables n'ont pas de bordures */
border: none;
vertical-align: middle;
margin:1px; /* permet a IE de colorer la bordure basse lors du survol */
}
#index a:link img.marge { /* SAUF les images de classe 'marge'... */
position: relative; /* permet de rester en place lors du survol - vieux navigateurs */
border-style: solid;
border-width: 1px;
border-color: #B22222;
padding: 5px; /* ce padding est pris en compte sous firefox mais pas sous IE */
}
#index a:visited { /* il semble qu'il faille respecter l'ordre : link - visited - hover - active - focus */
text-decoration: none;
color: #B22222;
}
#index a:hover img.marge {
border-color: #00AA00; /* la bordure change de couleur lors du survol du lien */
}
#index a:hover {
text-decoration: none;
color: #FF0000;
}
#index a:active {
text-decoration: none;
color: #FF0000;
}
font-family: Comic sans ms,Arial,Sans-serif;
color: #B22222;
}
#index { /* le bloc document */
margin-left: 4%;
margin-right: 4%;
font-size: 90%;
text-align: justify;
}
/* les LIENS */
#index a:link {
text-decoration: none;
color: #B22222;
}
#index a:link img { /* les images cliquables n'ont pas de bordures */
border: none;
vertical-align: middle;
margin:1px; /* permet a IE de colorer la bordure basse lors du survol */
}
#index a:link img.marge { /* SAUF les images de classe 'marge'... */
position: relative; /* permet de rester en place lors du survol - vieux navigateurs */
border-style: solid;
border-width: 1px;
border-color: #B22222;
padding: 5px; /* ce padding est pris en compte sous firefox mais pas sous IE */
}
#index a:visited { /* il semble qu'il faille respecter l'ordre : link - visited - hover - active - focus */
text-decoration: none;
color: #B22222;
}
#index a:hover img.marge {
border-color: #00AA00; /* la bordure change de couleur lors du survol du lien */
}
#index a:hover {
text-decoration: none;
color: #FF0000;
}
#index a:active {
text-decoration: none;
color: #FF0000;
}
Le résultat souhaité est celui vu par Firefox, c'est absolument ça que je désire et rien d'autre, il ne reste plus qu"à décoller la bordure sous IE
Merci à tous.
Salut
Vu ton doctype, Explorer passe en mode "quirks", son comportement face à tes liens semble donc normal. Essaie de mettre un doctype en Strict pour repasser Explorer en mode "standard".
PS: c'est certainement un peu hors-sujet, mais lis donc cet article concernant l'utilisation abusive de la police Comic Sans MS
Vu ton doctype, Explorer passe en mode "quirks", son comportement face à tes liens semble donc normal. Essaie de mettre un doctype en Strict pour repasser Explorer en mode "standard".
PS: c'est certainement un peu hors-sujet, mais lis donc cet article concernant l'utilisation abusive de la police Comic Sans MS
CITATION(Dudu @ jeudi 21 février 2008 à 19:16)
Salut
Vu ton doctype, Explorer passe en mode "quirks", son comportement face à tes liens semble donc normal. Essaie de mettre un doctype en Strict pour repasser Explorer en mode "standard".
Vu ton doctype, Explorer passe en mode "quirks", son comportement face à tes liens semble donc normal. Essaie de mettre un doctype en Strict pour repasser Explorer en mode "standard".
Géant, tu es un géant, où est l'icone prosternation ? Merci x 1000 !
Donc j'ai mis ce qui est préconnisé par w3c, pourquoi y ai je touché ? enfin bref, super.
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/strict.dtd">
CITATION(Dudu @ jeudi 21 février 2008 à 19:16)
PS: c'est certainement un peu hors-sujet, mais lis donc cet article concernant l'utilisation abusive de la police Comic Sans MS
Je croyais faire preuve d'originalité sur le Net en étant le seul à utiliser la Comic Sans MS
, une modif à la fois
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.