Liens en position absolue sur une image de fond

Bonjour à tous

J'ai posté le même topic sur Developpez.net... N'ayant obtenu aucune réponse malgré un certain nombre de lus, je me permets de venir demander ici... au coeur, chez les spécialistes !

Voilà, généralement, lorsque je souhaite mettre en lien une image de fond, j'utilise la méthode des liens à l'aide d'une (fausse) image, puis je positionne le lien en absolute...

Seulement voilà ! Cette fois-ci, la zone dans laquelle je veux mettre le lien n'est pas "cadrée", en ce sens qu'elle doit occuper toute la largeur de la page et donc être relative à la taille de l'écran.

Pour voir le site en question, il y a un exemple ici : http://clementdussarps.fr/doctorales-sfsic/[/url]
L'idée est de normalement mettre un lien dans le bandeau sur "Appel à Comm." et les deux logos...

Si la zone avait été figée, j'aurais fait ça (ex. avec le premier lien) :

(HTML)

<div id="lien_appel">
			<a id="zone_lien_appel" href="#" alt="-" title="-"></a>
		</div>

(CSS)

#lien_appel {
	position: absolute;
	background: url(image.png) no-repeat;
}

#zone_lien_appel {
	position: absolute;
	width : 25px;
	height: 105px;
	margin-left:930px;
}

Mais là, que nenni ! Ca se place en fonction de la taille de la fenêtre (logique).
Quelqu'un a une idée pour palier à ce problème ?

Merci d'avance

Bonjour,

La seule bonne solution pour mettre un lien en image :

<a href="#"><img src="#" alt="Appel à comm."></a>

Les techniques que tu utilises sont très mauvaise pour l'accessibilité mais également pour le référencement (un lien vide n'existe pas puisqu'il ne peut être suivi). As-tu essayé de te mettre dans le cas d'un problème de serveur ou de connexion ? Désactive les images et tu comprendra.

Alt n'as strictement rien à faire sur un lien.

Title doit être utilisé quand nécessaire (c'est à dire très rarement).


On ne le répètera jamais assez : Une image porteuse de contenu (= texte, en général) DOIT TOUJOURS être placée dans le code HTML, TOUJOURS !

Bonjour,

Merci beaucoup pour cette réponse productive

Pour info, le lien n'est pas vide, ni d'ailleurs les ALT et TITLE... je les ai mis comme ça pour une lecture plus rapide du code Le lien vers le site est un test !

Merci pour l'info concernant ALT & TITLE en tout cas... J'avoue que je n'étais pas tellement au fait de ça (je connais l'utilité du ALT, moins du TITLE)... je vais me documenter sérieusement.

Me voilà donc à repenser les choses, face à cette technique archaïque que j'utilise.
Admettons donc que je fasse les choses mieux :
- mettre le petit bandeau "appel à comm" en image
- mettre les deux logos en image (chacun)

A ce moment, comme je fais mon placement ? Car là je me retrouve avec le bandeau qui est une image (afin de permettre au fond de se prolonger). Comment faire le placement dans ce cas là ?

Sinon, le mieux est-il alors de séparer le bandeau en 4 (voire +) de parties ?

Merci d'avance pour la/les réponses
Modifié par clem66 (14 Dec 2010 - 11:03)

a écrit :
Si, si, le lien est vide... je ne parles, bien sûr pas de la valeur href, mais du contenu du lien, ce qui devrait se trouver entre ">" et </a>. Sans cela, il n'y a pas de lien.

Ah oui pardon... En effet

a écrit :

Idéalement ton bandeau devrait se constituer d'une image de fond se répètant et des images contenu placée dans le code HTML (le logo/titre de ton site, l'appel à comm. et les logos partenaires).

Oui, c'est ce que je vais faire (par contre, le fond ne comprend pas le bandeau avec le titre, car il faut que ce fond rouge & le menu se répètent sur toute la longueur quelle que soit la taille de l'écran).

Merci pour ton aide en tout cas !
Clément