28173 sujets

CSS et mise en forme, CSS3

[résolu] Lien sur une image en background (fond d'écran)

Voilà je viens de m'apercevoir (avec stupeur) que l'image background (icone pour le téléchargement) que j'utilise avec un lien qui fonctionne avec Firefox ne fonctionne pas sous IE 6:


Code XHTML

<a href="telechargementFichier.php?idTutorial=<?php echo $unTutorial->idTutorial?>" title="Download <?php echo 
$unTutorial->nom?>"><h6></h6></a>


Sous IE, en fait le lien fonctionne mais c'est l'image qui n'apparait pas. Un exemple : http://www.fireworkszone.com/index.php?root=2&extension=1&idTutorial=272

Si vous passez le curseur de votre souris en bas à gauche de la grande image votre curseur vous indiquera le lien. 


Le code CSS

#tutorial h6 {
background: url(http://www.fireworkszone.com/pictures/buttons/download.gif) no-repeat 50% 50%;
padding: 20px 0 0 95px;
color: #fff;
}


Mes questions

Comment faire apparaître l'image (background) avec un lien dessus comme on le fait en html ?

Est ce qu'il ne faut pas plutot utiliser une liste <ul><li>lien</li></ul> plutôt que le tag h6 ?


Merci de votre éclairage sur cet épineux problème
Modifié par fireworkszone (15 Jun 2006 - 11:31)
Bonsoir et bienvenue,
Pour commencer 
<a href="telechargementFichier.php?idTutorial=<?php echo $unTutorial->idTutorial?>" title="Download <?php echo 
$unTutorial->nom?>"><h6></h6></a>

est invalide en XHTML puisque tu as une balise de type block(h6) dans un balise de type en-ligne (<a>).

Ton problème vient du fait que tu as choisis un méthode excuse moi mais un peu tordue (les padding) pour definir la taille de ton h6.
Aprés avoir inversé titre et liens, tu dois donc déclarer dans ta css.

#tutorial h6 a {
	display:block;
	width: 85px;
	height:20px;
	background: #fff url(download.gif) no-repeat 50% 50%;
	color: #fff;
}


Pourquoi mettre color: #fff?
Et pourquoi ne mets tu peux directement ton image "download" dans le XHTML avec un lien dessus?
Ta méthode a le désavantage de ne pas répondre aux critères d'accessibilité basiques qui impliquent dans ton cas d'utiliser la technique de l'image clipée (ou ma méthode: voir plus bas) ou dans le meilleur des cas une image directement dans le code en lui attribuant un ATL.

a écrit :
Comment faire apparaître l'image (background) avec un lien dessus comme on le fait en html ?


Personnellement la méthode la plus simple que je choisirais consiste à utiliser un spacer (de 1px X 1px) transparent auquel tu donnes la taille HTML de ton image de fond.
Modifié par Hermann (12 Jun 2006 - 01:44)
Bonjour,

Je m'excuse de n'avoir pas répondu aussitôt mais j'étais très occupé à réparer le lien sur l'image dans tous mes tutoriaux.

En fait j'ai abandonné l'idée de faire un lien sur une image en fond d'écran et j'ai adopté une approche plus traditionnelle avec une image à l'intérieur d'un lien.

<a href="/"><img src="/"/></a>

Voilà et encore merci pour votre réponse. Comment fait-on pour marquer [résolu] ?
Sujet clos
Aller à