Bordures d'images de liens

Franck le M · 19 Février 2008

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.

Anonymus · 19 Février 2008

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

Franck le M · 19 Février 2008

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.

:huh:

Modifié 19 Février 2008 par Franck le M

ricotrutt · 21 Février 2008

que se passe-t-il si tu fais :

img.nom_de_la_class_de_limage{
	 padding:5px;
	 border:1px solid black;
}

?

Franck le M · 21 Février 2008

que se passe-t-il si tu fais :

img.nom_de_la_class_de_limage{
	 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 :

<!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>

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) :

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;
			}

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 :smartass:

Merci à tous.

Dudu · 21 Février 2008

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

Franck le M · 21 Février 2008

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".

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
			"http://www.w3.org/TR/html4/strict.dtd">

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 :nonono: , une modif à la fois

Connexion

Bordures d'images de liens

Sujets conseillés

Franck le M

Anonymus

Franck le M

ricotrutt

Franck le M

Dudu

Franck le M

Veuillez vous connecter pour commenter

Parcourir

Activité