[Résolu] Petite question sur les liens d'une liste (ul)

Bonjour à tous,

J'ai une petite question sûrement toute bête..
Voilà, mon menu est contenu dans une liste. A l'heure actuelle, il y a un hover sur le fond de chaque "li" quand on passe dessus. Ma question est : comment faire en sorte que toute la case soit cliquable, et pas seulement le lien qu'elle contient.
En effet, aujourd'hui, seul le "mot" est cliquable, même si toute la case passe en hover.

Voici le code en question :

Xhtml :

<div id="header">
			<img id="logo" src="images/logo.png" alt="logo de Citamour" title=" !" /> 
			<ul id="speedbarre"> 
				<li> 
					<a href="/" title="Retour à l'accueil" accesskey="1">Accueil</a> 
				</li> 
				<li> 
					<a href="/" title="Les citations d'amour et les phrases romantique de Citamour !" accesskey="2">Citations</a> 
				</li> 
				<li> 
					<a href="/" title="Les poèmes romantiques et les poèmes d'amour de Citamour !" accesskey="3">Poèmes</a> 
				</li> 
				<li>
					<a href="/" title="Le forum de l'amour de Citamour !" accesskey="4">Forum</a> 
				</li> 
			</ul> </div>

Css :

#header    
{
	height: 265px;
	width: 1024px;
	background-image:url("images/noeudfondheader.png"); /* à mettre en GIF car peu de couleurs, ce sera moins lourd */
	margin-top: 0;
	padding-top: 0;
	color: #990033;
	position: relative;
	z-index: 1;
}
		
#logo 		
{
	margin-left: 40px;
			
}
		
ul#speedbarre 	
{
	font-family:palatino;
	font-size: 17px;
	font-weight: bold;
	float: right;
	margin-top: 131px;
	margin-right: 0px;
	padding-bottom: 0.5px;
	width: auto;
	height: auto;
				}
		
#speedbarre li	
{
	text-align: left;
	float:left;
	padding-bottom: 2px;
    margin-right: 35px;				
	list-style-position: inside;
	display: inline;
	width:auto;
	height:auto;
}
		
#speedbarre li:hover
{ 	
	background-color: #e8dd88; 
}

#speedbarre li a
{
	height: 100%;
	width: 100%;
}
		
#speedbarre li a:visited
{ 
	color:#990033;
			

}
#speedbarre a
{
	width:auto;
	float:left;
	margin-top:15px;
	margin-bottom:15px;
	margin-left:10px;
	margin-right:10px;
}

Modifié par Webmacit (23 Nov 2010 - 18:54)

Bonjour,

LI est un élément de type block, contrairement à l'élément A qui lui est un élément de type inline.

Pour que ton lien occupe tout l'espace du LI il faut modifier sa propriété "display" avec la valeur "block".

Ton élément A se comportera alors comme un élément de type block et occupera toute la largeur disponible.

Plus d'info : http://www.alsacreations.com/tuto/lire/530-structure-balises-css-display-bloc-block-ligne-inline.html

Merci à toi

Et pour le référencement, cela ne risque pas de poser problème ?

Thx !

Si ton problème est résolu n'oublie pas d'honorer le cinquième "commandement" du forum http://forum.alsacreations.com/help.php

Pour ce qui est du référencement le CSS n'a pas, à ma connaissance, de conséquence majeur sur l'indexation par les moteur de recherche.

Si tu débutes dans la création de page web, avec un souci de référencement, je ne peux que t'encourager à suivre les "Consignes aux webmasters" publiées par Google http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer=35769

Pour le reste il y a Alsacréations, Pompage et Openweb.

Bien sûr il y en a d'autres, mais ça, c'est mon tiercé gagnant !

Bonne continuation.