18041 sujets

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

Faire pointer l'en-tête (image en background) vers la page d'accueil

Bonjour,

Le bandeau d'en-tête de mon site ( http://www.villemagne.net) est constitué
1) d'une image en background définie dans la feuille CSS
2) de plusieurs icônes cliquables à droite de ce bandeau (images définies au moyen de <img src=...> et liées avec des <a href=...>

Je voudrais rendre cliquable vers la page d'accueil toute l'image du bandeau hormis les icônes. Si je "sors" l'image de la CSS pour la mettre dans la page, alors cette image "pousse" les icônes cliquables hors champ.

Y-a-t-il un moyen d'affecter un lien à l'image en background ?Devrais-je utiliser des "layers" ? Et dans ce cas, les liens fonctionnent-ils sur des images mises en "layers" ?

Merci de votre aide

http://www.villemagne.net
Bonjour,

Tu peux recourir au positionnement absolu pour superposer tes images à ton bandeau cliquable. Un petit exemple avec des valeurs arbitraires:
[b][#black]HTML[/#][/b]

<div id="header">
	<a href="/">
		<img src="bandeau.png" alt="Page d'accueil" />
	</a>
	<ul>
		<li id="photos">
			<a href="#">
				<img src="photos.png" alt="Photos" />
			</a>
		</li>
		<li id="forum">
			<a href="#">
				<img src="forum.png" alt="Forum" />
			</a>
		</li>
		<li id="contact">
			<a href="#">
				<img src="contact.png" alt="Contact" />
			</a>
		</li>
	</ul>
</div>


[b][#black]CSS[/#][/b]

#header {position:relative;}
#header li {position:absolute; top:50px; list-style:none;}
#photos {left:100px;}
#forum {left:200px;}
#contact {left:300px;}

Modifié par Benjamin D.C. (20 Nov 2008 - 17:18)
Salut,

Voilà ma solution qui doit correspondre à ce que tu cherche à faire.

HTML
<div id="entete"><a id="entete-logo"
 href="http://www.villemagne.net"> </a>
<div id="entete-menu">
<ul>
  <li><a id="photo" href="#">lien1</a></li>
  <li><a id="diaporama" href="#">lien2</a></li>
  <li><a href="#">lien3</a></li>
  <li><a href="#">lien4</a></li>
</ul>
</div>



CSS
#entete{
	height:136px;
	width:100%;
}

#entete-logo{
	display:block;
	background: url(images/entete.jpg) no-repeat top center;
	height:136px;
	width:100%;
}

#entete-menu{
	float:right;
	margin-top:-136px;
	margin-right:10px;
	width:100px;
	height:100px;
	border:1px solid #000000;
}
#entete-menu li{
	float:right;
	display: inline;
}
#entete-menu li a{
	display: block;
	height: 50px;
	width: 50px;
	
}
#photo{
	background: url(images/Sample3.jpg) no-repeat;
}
#diaporama{
	background: url(images/Sample3.jpg) no-repeat;
}


biensur, il te faut remplacer les chemins et noms des images, ainsi que la taille des images.
Je te conseil de mettre tes petites icones de menu à la même taille pour que cela soit plus facile.

j'espère que cela te sera utile
Gwenadu, ta solution est incorrecte sur plusieurs points.

D'une part, ton code CSS comporte plusieurs déclarations inutiles (float:right + display:inline) voire périlleuses (display:block + width:100%), et d'autre part, ton marquage HTML arbore un lien vide de contenu et de sens.
Une petite révision ne ferait pas de tort. Smiley cligne
Bonjour,

Je n'ai pas réussi à faire fonctionner la solution n°1 qui m'apparaissait cependant la plus simple. Mais en supprimant le #header li et en mettant les positions dans les #photos, #forum etc, ça marche.

Quelle était l'utilité d'avoir des positions à la fois dans le #header li et dans les #photos, #forum etc. ?
Bonsoir,

Voici quelques éclaircissement :
- position sur #header li => permet de positionner les éléments de liste par rapport au #header.
- left sur #photos, #forum, etc => permet simplement de positionner ces éléments par rapport au bord gauche de #header.
Sujet clos
Aller à