Aller au contenu

Bordures d'images de liens

Franck le M

Par Franck le M
dans (X)HTML et CSS

 Partager

Sujets conseillés

Franck le M

Franck le M

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Anonymus

Anonymus

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Franck le M

Franck le M

Posté
  • Auteur
Posté (modifié)

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é par Franck le M
Lien vers le commentaire
Partager sur d’autres sites
Franck le M

Franck le M

Posté
  • Auteur
Posté
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.

Lien vers le commentaire
Partager sur d’autres sites
Franck le M

Franck le M

Posté
  • Auteur
Posté
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::nonono: , une modif à la fois ;)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...