18043 sujets

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

Menu et liens cliquables

Bonjour !
Voilà j'ai un soucis.
J'ai un menu avec une image en fond et un texte qui fait office de lien cliquable.
Or pour positionner le texte, j'utilise : line-height, mais le curseur ne remarque le lien que dans une zone sans texte.

Il ne s'active qu'à l'ancienne place du texte (avant l'utilisation de line:height) , c'est à dire en bas de l'image.

Comment remédier à cette situation?
Merci d'avance Smiley smile
Un petit bout de code html plus son CSS associé serait utile pour comprendre parce que là c'est plutôt difficile
Oups Désolé ^^'

Voici le code html:

#btnmenu ul li{
float:left;
padding:0;
list-style:none;
margin: 0px 0 0 0px;
margin-top:0px;
padding-left:-25px;

}
#btnmenu ul li a{
background: url(images/2.png) no-repeat bottom left;
margin-top: 6px;
height:52px;
width:114px;
font-size:18px;
line-height:74px;
text-decoration:none;
text-align:center;
color:#FFF;
font-family: Arial, Verdana, serif;
display:block;
}

et le css:

<div id="btnmenu">
<ul>
<li><a  href="index.html">Accueil</a></li>
<li><a href="#">Salon</a></li>
<li><a href="#" title="click">Exposer</a></li>
<li><a  href="#">Programme</a></li>
<li><a href="#" title="click">Presse</a></li>
<li><a href="#">Contact</a></li>
</ul></div>

Modifié par metiti (18 May 2011 - 11:55)
Bonjour,

Est-ce quelque chose comme ceci que tu cherches ? Tu m'excuseras, mais je ne dispose pas de ton image pour l'insérer dans mon code. Pour mes tests, j'ai donc pris une autre (fleche.gif) qui ne s'affichera pas sur ton ordi.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>menu avec images</title>
  <style type="text/css">
#btnmenu ul li {
	float: left;
	padding: 10px;
	list-style: none;
	margin: 0;
	margin-right: 1px;
	background: url(fleche.gif) no-repeat center left;
	/* l'image "fleche.gif" mesure 15x15 px */
	background-color: #9FCFFF;
}
#btnmenu ul li a {
	font-size: 18px;
	color: #fff;
	font-family: Arial, Verdana, serif;
	text-decoration: none;
}
</style>
  </head>
  <body>
<div id="btnmenu">
	<ul>
		<li>&nbsp;
		  <a  href="index.html">Accueil</a>
		</li>
		<li>&nbsp;
		  <a href="#">Salon</a>
		</li>
		<li>&nbsp;
		  <a href="#" title="click">Exposer</a>
		</li>
		<li>&nbsp;
		  <a  href="#">Programme</a>
		</li>
		<li>&nbsp;
		  <a href="#" title="click">Presse</a>
		</li>
		<li>&nbsp;
		  <a href="#">Contact</a>
		</li>
	</ul>
</div>

  </body>
</html>
Sujet clos
Aller à