Mise en forme d'un menu avec des listes ul li...

Bonjour,

Voilà quelques jours que je bidouille le menu de droite de mon site http://www.yazerty.net/ et j'ai encore un problème lié à la mise en forme de ce menu.

Je trouve que les listes avec les petits triangles verts sont bien, j'aimerais les conserver ainsi, avec ce petit espacement à gauche entre la bordure de leur zone et la petite image du triangle vert.

Par contre certains éléments n'ont pas ce petit espacement et j'aimerais bien qu'ils l'aient, que tous les blocs internes des menus soient donc alignés ensemble, avec ce petit espacement de quelques pixels entre le bord de leur zone et le début du "contenu".

Je n'arrive pas à avoir ça sans faire foirer mes autres zones du menu. De plus j'aimerais conserver un système à base de listes <ul> <li>, car l'une de mes zones est générée directement ("blogoliste", en bas) et sort un code comme ceci (faire un css juste pour une des zones du menu, bof bof). Je peux par contre tout à fait modifier le code de ma zone de "Recherche" (il y a un <div>, je peux tout à fait mettre un <ul> - mais actuellement ça rajouterait un triangle vert dedans, ce qui n'est pas le but, actuellement tous les triangles sont à leur place ^^...)

Voici le code xhtml (valide xhtml 1.0) du début de mon menu :

<div id="sidebar">
<ul>


<li id="search" class="widget widget_search">
<h2>Recherche</h2>
<form method="get" id="searchform" action="http://www.yazerty.net/">
	<div>
		<input value="" name="s" id="searchinput" size="10" type="text">
		<input id="searchsubmit" value="Hop !" type="submit">
	</div>
</form>
</li>

<li id="syndicate" class="widget widget_syndicate"><h2>Hungry ? Feed RSS  [smile]</h2>
<p style="float: left;"><a type="application/rss+xml" href="http://www.yazerty.net/feed" title="Feed RSS des billets de Yazerty.Net"><img src="/wordpress/wp-content/themes/yazerty/images/rss.jpg" alt="icône RSS"></a></p>
<ul>
<li><a type="application/rss+xml" href="http://www.yazerty.net/feed" title="Feed RSS des billets de Yazerty.Net">Suivez Yazerty.Net grâce au RSS  [smile]...</a></li>
<li><a href="http://fr.wikipedia.org/wiki/Really_Simple_Syndication">Qu'est-ce que le RSS ?</a></li>
</ul>
</li>

<li id="recent-posts" class="widget widget_recent_entries" style="clear: left;"><h2>Derniers billets</h2>
<ul>
<li><a href="http://www.yazerty.net/blogs-de-ministres-francois-fillon-alain-juppe">Blogs de ministres (François Fillon, Alain Juppé, ...)</a></li>

<li><a href="http://www.yazerty.net/theme-wordpress-ok">Thème Wordpress : ok [smile]</a></li>
<li><a href="http://www.yazerty.net/prescription-acquisitive-immobilier">Prescription acquisitive (immobilier)</a></li>
<li><a href="http://www.yazerty.net/publicite-wwf-guepard">Publicité WWF Guépard</a></li>
<li><a href="http://www.yazerty.net/les-femmes-dans-le-cinema">Les femmes dans le cinéma</a></li>
<li><a href="http://www.yazerty.net/ancienne-pub-hitachi">Ancienne pub Hitachi</a></li>
<li><a href="http://www.yazerty.net/nouveau-google-translate-traduction-online">Nouveau Google Translate (traduction online)</a></li>
<li><a href="http://www.yazerty.net/carte-de-malades">Carte de malades</a></li>
<li><a href="http://www.yazerty.net/qui-sont-les-spammeurs">Qui sont les spammeurs ?</a></li>
<li><a href="http://www.yazerty.net/publicite-alpha-147">Publicité Alpha 147</a></li>

</ul>
</li>

(....)

</ul>
</div>

Et le code CSS correspondant :

/* Sidebar
-------------------------------------------------------- */
#sidebar h2 {
	color: #005D99;
	font-size: 1em;
	font-weight: bold;
	background: #F5F5F5;
	border: 1px solid #CDCDCD;
	border-width: 1px 0;
	padding: 5px 8px;
	margin: 0 0 10px 0;
}

#sidebar ul { 
	margin: 0 0 15px 0;
	padding: 0 0 4px 0;
}
#sidebar a:link, #sidebar a:visited { text-decoration: none; }
#sidebar a:hover { text-decoration: underline; }

.widget ul li, .linkcat ul li {
	background: transparent url(images/sidebar_li.png) no-repeat 10px 5px;
	padding: 2px 4px 2px 20px;
}
.widget_search { padding: 0 0 20px 0; }

Après de multiples essais ces derniers jours je ne parviens toujours pas à un résultat correct (valide xhtml 1.0 Transitional certes, mais pas avec la mise en forme que je désire pour mon menu...).

Pourriez-vous m'aider à trouver un arrangement qui me permette de garder à peu près la même structure xhtml (je ne peux modifier le code rendu par la "blogoliste") mais en ajoutant ce fameux petit espace partout s'il vous plait ?

ps : j'ai aussi un petit bug avec ma zone "syndicate" sous IE7, mais ça ce sera peut-être pour une autre fois si je ne trouve pas d'ici là.

ps2 : euh l"Autoroll" je m'en fiche pour la mise en forme hein, de toute façon elle va sans doute bientôt disparaître...
Modifié par Yazerty (29 May 2007 - 09:45)