18067 sujets

Questions générales et questions de débutants

Lien sur image en background

Bonjour,

Je crée un site avec SPIP et ma bannière est dans un div "en-tete".
Cette bannière est une image que j'ai mis en background.
Je voudrais qu'elle devienne un lien vers l'adresse du site mais je ne sais pas où placer le lien.
Voici le code HTML :

<div id="entete">
<a href="#URL_SITE_SPIP/">
<br class="nettoyeur" />
</div>


et le code CSS :

#entete {
	width: 100%;
	height: 115px;									
	border-bottom: 2px solid #333;
	background-image : url(../IMG/jpg/header.jpg);


Cela ne marche pas.
Sivous avez une idée, merci beaucoup d'avance !
Bonjour,

Le code HTML est faux: le lien n'est pas fermé. De plus, comme ce lien n'a pas de contenu propre, il aura une taille de zéro pixels de haut sur zéro pixels de large.

Pour faire un lien vers la page d'accueil sur un en-tête, il faut plutôt un code comme suit:
<div id="entete">
	<a href="{URL de l'accueil du site}" title="Accueil de {Nom du site}">
		<img src="{image d'en-tête}" alt="{Nom du site}" />
	</a>
</div>

Le lien peut éventuellement être placé dans un H1 plutôt que directement dans un DIV.
Merci pour la rapidité de la réponse !


J'ai opté pour votre solution qui marche impeccablement.
J'ai mis l'image dans le lien et ce dernier dans le DIV.

Bonne soirée.
Modifié par gauguin (16 Aug 2008 - 20:47)
gauguin a écrit :
Mais là, l'image est en background du DIV

Et donc elle ne peut pas être passée en contenu (élément IMG) plutôt que laissée comme décoration facultative non accessible et non indexable par les moteurs de recherche (propriété CSS background)?

Peut-on voir cette image? Il est probable qu'il faille:
- soit passer toute l'image en image de contenu (élément IMG) et pas en background;
- soit découper l'image d'en-tête en un fond et une image plus petite, contenant par exemple un logo ou titre de site.

gauguin a écrit :
Peut-être devrais-je mettre le DIV au sein d'un lien alors ?

C'est impossible en HTML: l'élément A (pour un lien) n'accepte pas l'élément DIV ou tout autre élément de type bloc comme contenu.
Je remets mon message du haut même si ça fait doublon ( car je l'avais édité),avec une petite précision cependant :

J'ai opté pour votre solution qui marche impeccablement, et en plus cela permet d'intégrer le alt pour l'accessibilité .
J'ai mis l'image dans le lien et ce dernier dans le DIV , et en effet j'avais utilisé la propriété CSS background.

Bonne soirée, et merci encore
Bonjour,

Même si le sujet semble résolu, les squelettes spip par défaut (dist) permettent de mettre automatiquement l'image du logo en la déclarant dans la configuration de spip dans le panneau d'administration.

	<h1>
	<a rel="start" href="#URL_SITE_SPIP/">
	[(#LOGO_SITE_SPIP||?{
	   [(#LOGO_SITE_SPIP
	      ||image_reduire{450,''}
	      |inserer_attribut{alt,[(#NOM_SITE_SPIP|textebrut)]}
	      |inserer_attribut{title,[(#NOM_SITE_SPIP|textebrut)]}
	      )]
	 ,
	  })]
	</a>
	</h1>

Modifié par knarf (17 Aug 2008 - 19:53)
Sujet clos
Aller à