28172 sujets

CSS et mise en forme, CSS3

Fixer une balise <a> à une image de fond

Bonjour à tous j'ai un problème de positionnement dans ma page, j'ai une image de fond centrée sur laquelle j'ai mis une zone lien <a>, mon problème est de pouvoir fixer cette zone sur l'image de fond, pour rester à la bonne place en fonction de la taille de la fenêtre de navigation.
Voici mes codes.
<body>
<center> <img src="image.png" style="overflow:auto;"></img>
<div id='mail'><a target="_blank" href='mailto:'></a></div>
</center>


#mail a
{
	position:absolute;
	width:35px;
	height:35px;
	left: 894px;
	top: 533px;
}


Merci d'avance Smiley cligne Smiley cligne
Modifié par Claude Money (15 Dec 2010 - 10:19)
Bonjour,

Un lien ne DOIT JAMAIS être vide... Sinon, en gros, il n'existe pas.

La bonne solution serait donc : 
<a href=""><img src="" alt=""></a>
Si il existe car quand je passe sur la zone définie un lien est reconnu, si je fais 
<a href=""><img src="" alt=""></a>
c'est toute l'image qui est définie comme lien.
Modérateur
Bonjour,

Déjà, il faut éviter d'utiliser l'élément <center>. Il faut plutôt utiliser les CSS pour centrer des éléments.

L'élément image ne se ferme pas comme ça non plus. Tu devrais faire valider ton code sur le site du W3C.

Pour te proposer la bonne solution, peux-tu me confirmer que tu essayes de faire une grande image avec différentes zones cliquables sur l'image, comme une image-map (map,area)?

Serait-il possible de nous montrer visuellement à quoi ressemble ton image avec ses zones cliquables?
Modifié par Tony Monast (15 Dec 2010 - 16:13)
C'est bien ça, je souhaiterais mettre une zone cliquable qui se fixe sur l'image de fond de manière à s'adapter à la fenêtre de navigation. J'ai changé la balise <img>

Voilà mon image, la zone dont je parle est celle destiné aux mails en bas à droite
http://www.little-donkey.com/

Mon image est centrée mais mon lien ne suis pas la position.
Merci Smiley cligne
Modifié par Claude Money (15 Dec 2010 - 16:55)
Tu pourrais placer ton image principale dans un div que tu positionnes (position relative) et que tu centres dans ta page avec la propriété margin. Ensuite tu places ton lien a l'intérieur et tu le positionnes avec position: absolute.
C'est parfait un grand merci jb_gfx par contre pour mon image de fond, je l'ai disposé comme ceci

#back
{	background-image:url(enconstruction.png);
	background-repeat:no-repeat;
	position:relative;
	width:1100px;
	height:700px;
	display:block;
	margin:0% auto;
	overflow:auto;
}

et j'aimerais que mon image en se rabattant sur la gauche de la fenêtre de navigation ne s'arrête pas aux bords gauche de l'image, mais s'arrête à 20px à l'intérieur de ce bord gauche.
padding-left:20px;

Pour qu'en fonction de la taille de la fenêtre de navigation l'image puisse ce centrer et pas se braquer à droite.

Merci encore
Sujet clos
Aller à