Site wordpress Menu vertical

Bonjour,
Je suis en train de finir le site web de mon club.
http://www.triathlon-quimper.fr/
C'est mon premier site et je galère pour les finitions.

J'ai utilisé wordpress et un thème gratuit compositio http://designdisease.com/preview/compositio
Je n'arrive pas à mettre en forme les menus (liste de pages wordpress) dans la barre latérale comme je le souhaite.
Les menus sont "le club" & "triathlon sprint quimper"
1) Je souhaiterais qu'il y ait un retour à la ligne pour chaque page. (pour l'instant les pages entrainement & petites annonces sont sur la même ligne).
2) Il y a une image en fond pour chaque ligne. Je voudrais décaler légèrement le texte par rapport à l'image pour rendre le menu plus lisible.
3) Je souhaiterais changer la couleur du texte.

J'ai copié la partie de la feuille de style relative à mon menu:

/* Photostream 
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SR .photostream { overflow: hidden; background: #9ed5e1 url(images/photostream-bkg.png) no-repeat bottom left; padding: 15px 0px 25px 15px;}
/**/ *html .SR .photostream { height: 1%;} /**/ 
.SR .photostream h3 { font-size: 24px; letter-spacing: -1px; color:#102a30;}
.SR .photostream ul { float: left; margin-top: 10px;}

.SR .photostream li { background: url(images/photostream-li-bkg.png) no-repeat left top;  list-style-type: none; display: inline; padding: 5px; float: left; margin: 0px 3px 5px 0px;}

.SR .photostream li a img , 
.SR .photostream li a:visited img { border: solid 1px #fff; width: 54px; height: 54px;}
.SR .photostream li a:hover img { border: solid 1px #000;}
 

J'espère que je suis clair..
Merci d'avance pour votre aide.

Salut amen break,

Tout d'abord, il faut que tu donnes une class identique à tes li concernés. Pour l'instant ils ont tous une class différente qui correspond plutôt à leur id. En gros, ça devrait donner ceci :

<ul>
   <li class="menu" id="page_item page-item-5"><a title="Le Club: infos &ndash; renseignements" href="http://www.triathlon-quimper.fr/infos-club/">Le Club: infos &ndash; renseignements</a></li>
   <li class="menu" id="page_item page-item-36"><a title="Entraînement TCQ" href="http://www.triathlon-quimper.fr/horaires-entrainement-tcq/">Entraînement TCQ</a></li>
   <li class="menu" id="page_item page-item-148"><a title="Petites annonces" href="http://www.triathlon-quimper.fr/occasions/">Petites annonces</a></li>
   <li class="menu" id="page_item page-item-131"><a title="Partenaires" href="http://www.triathlon-quimper.fr/partenaires-2/">Partenaires</a></li>
</ul>

Ensuite dans ton CSS il faut que supprime display: inline et float: left; et que tu donnes un padding-left d'environ 10px :

ul li.menu {
   background: url("images/photostream-li-bkg.png") no-repeat fixed left top transparent;
   padding: 5px 10px;
   margin: 0px 3px 5px 0px;
}

En fait le problème, c'est que tu modifiais le style des li de ton menu, mais aussi du li du dessus (class="pagenav"). D'ailleurs il y a un souci dans ton imbrication ul li. Il manque un ul quelque part...

Merci pour ta réponse, mais je ne suis pas sur de tout saisir.
J'aurais peut être du préciser l'extrait de code est dans la feuille de style du thème et j'ai modifié le code de la barre latérale pour y ajouter une liste de pages.Qui correspondent à mes menus.
Cette partie du theme était destiné à recevoir une galerie flickr et pas un menu d'où les soucis.
Voici ce que j'ai mis dans la barre latérale:

<div class="photostream">
<!-- Start Flickr Photostream -->
<?php wp_list_pages('include=5,36,148,131&title_li=<h2>Le Club</h2>'); ?>
<!-- End Flickr Photostream -->
</div>

<div class="photostream">
<!-- Start Flickr Photostream -->
<?php wp_list_pages('include=7&title_li=<h2>Triathlon Sprint Quimper</h2>'); ?>
<!-- End Flickr Photostream -->
</div>

J'ai modifié la feuille de style comme ci dessous: Mais j'ai encore des pages sur la meme ligne et du coup l'image de fond à disparu alors que je souhaitais simplement que l'image soit décalé par rapport à celle-ci.

/* Photostream 
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SR .photostream { overflow: hidden; background: #9ed5e1 url(images/photostream-bkg.png) no-repeat bottom left; padding: 15px 0px 25px 15px;}
/**/ *html .SR .photostream { height: 1%;} /**/ 
.SR .photostream h3 { font-size: 24px; letter-spacing: -1px; color:#102a30;}
.SR .photostream ul { padding: 5px 10px;  margin: 0px 3px 5px 0px;}
.SR .photostream li { background: url(images/photostream-li-bkg.png) no-repeat fixed left top transparent;  list-style-type: none; display: inline; padding: 5px; float: left; margin: 0px 3px 5px 0px;}
.SR .photostream li a img , .SR .photostream li a:visited img { border: solid 1px #fff; width: 54px; height: 54px;}
.SR .photostream li a:hover img { border: solid 1px #000;}

Ah ok, j'avais pas pensé que tu passais par les fonctions de Wordpress.

Alors dans ce cas il faut que tu rajoutes ceci dans ta feuille de style :

.SR .photostream li ul li {
 display: block;
 float: none;
 padding-left: 10px;
 background: url(images/photostream-li-bkg.png) no-repeat fixed left top transparent;
}

Comme ça, normalement, tu appliques bien le bon style aux bons li.
Modifié par hchtot (15 Dec 2010 - 18:05)

yes!!!!!
cela fonctionne.
merci