Li et display

salut tout le monde,

je suis vraiment pas un expert donc n'hesitez pas a me dire si je peux fair eles choses differements.

J'ai construit un menu horizontal avec le code suivant:

<div id="headerToolbar">
<ul>
<li class="firstItem">Text size: <a href="javascript:resizeText(100)">Normal</a>/<a href="javascript:resizeText(110)">Large</a></li>
<li><a href="#">Translations</a></li>
<li><a href="#">Site map</a></li>
<li><a href="#">Accessibility</a></li>
<li class="lastItem"><input type="text" name="search" /> <a class="image" href="#"></a></li>
</ul>
</div>

et la css suivante:

#headerToolbar {background-color:#ecf2f2;padding: 0.5em 0 0.5em 0; color:#656567; font-size:0.9em;}
#headerToolbar a {text-decoration:none; color:#656567; }
#headerToolbar ul { margin: 0 0 0 1em; padding:0; display: inline; }
#headerToolbar ul li {	margin:0.5em 0 0.5em 0;	padding:0 0.2em 0 0.2em; border-left: 1px solid #cbd6d8; list-style: none; display: inline;}
#headerToolbar ul li.firstItem {
	margin-left: 0;
	border-left: none;
	list-style: none;
	display: inline;
}
#headerToolbar ul li.lastItem {
	margin-left: 2em;
	padding-top:0.5em;
	border-left: none;
	list-style: none;
	display: inline;
}


a.image { 
     display:block; 
     width: 12px;
     height: 12px;
     background: url(/images/arrow_off.jpg);
     background-repeat: no-repeat;
     }
	 
a.image:hover { background: url(/images/arrow_on.gif);  } 

le but etant de creer un menu horizontal, le dernier element du menu contenant une search box avec une image pour lancer la recherche. L'image a un effet en roll (changement d'image).

Tout marche tres bien, SAUF ( ) que a cause de mon "display:block;" sur a.image , l'image n'est plus aligne avec la search box. Elle va a la ligne suivante. Evidemment, si j'enleve "display:block;", ben l'image n'est plus affichee..

Une idee ?


Merci

seb
Modifié par roki13 (04 Mar 2008 - 12:43)