Hauteur Div insuffisante : image non entière

Bonjour,

J'ai créé une image pour servir de background à un lien dans la barre de navigation.

Mon problème est que l'image ne s'affiche pas en entier... : je ne vois que le milieu. J'ai essayé de placer une ligne un peu partout dans mon css "height:120px;" alors que l'image fait 60 de haut mais rien n'y fait...

Je suppose que c'est une futilité mais ça m'énerfff

Le site est encore en local donc je ne peux pas vous le montrer

Voici les codes

<div id="zone_de_navigation">
    <ul id="menu">
    <li id="navi01">
    <a href="index.html">accueil</a></li>
    <li id="navi02">
    <a href="realisations.html">Réalisations</a></li>
    <li id="navi03">
    <a href="contact.html">Contact</a></li>
    </ul>
    </div><!-- fin de la zone de navigation -->

#zone_de_navigation {
	text-align: right; /*alignement � droite*/
	color: black;
	/*margin-top:15px;*/
	background-color: #F3C600;
	background-image:none;
	background-repeat: repeat-y;
	background-position: top left;
	padding: 5px 10px 4px 10px;
	border-bottom: 1px solid #8c8c8c;
	border-top: 20px solid #999999;
}
#zone_de_navigation ul {
		margin-bottom: 0;/*pas de bord inf�rieur*/
}
#zone_de_navigation li {
	display: inline; /*placer liens cote � cote*/
	list-style-type: none; /*sans points d'enumeration*/
	margin: 0 ; 
	}
#zone_de_navigation a {
	background-image:url(boutC.jpg);
	color: black; 
	background-color: #ffeda0;
	padding: 4px 8px 4px 8px;
	border: 1px solid #8c8c8c;
	height:280px;
}	
#zone_de_navigation a:active { background-color: white; }
#zone_de_navigation a:hover,
	#page_accueil #navi01 a,
	#page_de_contact #navi02 a
	{
	text-decoration: none; /*desactiver souligne*/
	background-image:url(file:///C|/Documents%20and%20Settings/Test/Mes%20documents/boutC.jpg);
	color: black;
	background-color: white;*/
	padding-bottom: 5px; /*1px en plus qu'en haut*/
	border-bottom: none; /*plus de border en dessous*/
		}

Meeeerci
Modifié par xxi (13 Oct 2009 - 11:00)

Bonjour,

Une hauteur en CSS ne peux s'appliquer que sur un élément de type bloc. Hors, <a> est un élément inline. Pour pouvoir lui donner une hauteur tu dois donc rajouter display:bloc à ses propriétés CSS.

MAIS les éléments blocs vont se mettre les uns sous les autres au lieu des uns à côté des autres comme tu le souhaites. Tu va donc devoir modifier le positionnement de ton menu en utilisant les flottants (float:left par exemple).

Super, merci. J'avais oublié cette astuce !

Je l'ai formaté en block et ça roule !!!

Merci

Erreur de manipulation
Modifié par xxi (16 Oct 2009 - 11:00)