CSS : puces et alignement

[pitidev]

Bonjour

Je profite du concours mangeur de cigogne plus pour m'habituer aux standarts du web et notamment les feuilles de style.

mais je me heurte a un probleme :

je n'arrive pas a afficher une puce et du texte a coté sur plusieurs lignes

du genre :

---------

- image - mon item numero 1

- de ma - mon item numero 2

- puce - mon item numero 3

---------

il me mets

---------

- image - mon item numero 1

- de ma -

- puce -

---------

mon item numero 2

mon item numero 3

probleme visible sur le site de mon mangeur de cigogne

[20cent]

Cette solution contourne le problème :

ul.puces
{
     list-style-type:none;
}
.puces li
{
     background:transparent url(puce.jpeg) no-repeat top left;
     padding-left:45px;
     height:10ex;
}

J'espère avoir bien compris ta demande et que cela te conviendra.

[pitidev]

ca marche très bien !

j'ai compris l'astuce.

je cherchais a tout prix a utiliser list-style-image, mais ce n'etait pas la bonne solution, la tienne fonctionne a merveille, je vais m'arranger a decaler les date dans un futur proche ...

.... car le futur encore plus proche me dit, que je dois aller me coucher !

[LaurentDenis]

C'est un problème de HTML, en fait. Tu utilises des <br /> là où il y a en fait (sémantiquement) deux listes imbriquées :

<ul class="puces">

<li>

<ul>

<li>19-04-2004 : ajout du...</li>

<li>debut de la feuille de style</li>

<li>ajout du lien vers Rico</li>

</ul>

</li>

<li>15-04-2004 : ajout des premiers liens sur le sujet mangeur de cigogne</li>

<li>14-04-2004 : création de la page d'accueil</li>

</ul>

Il suffit ensuite, pour la présentation, d'aligner les marges et les padding gauche des deux listes.

[pitidev]

vu, j'essayerais lors de la prochaine mise a jour

[LaurentDenis]

D'une manière générale, quand on se retrouve à faire un <br> ou un <br />... c'est qu'il faudrait structurer autrement le contenu en question.

Bien-sûr, il y a des exceptions (une strophe de poème, par exemple). Mais pas bcp