Discussion :

[olivier136978]

Bonjour,

Je sèche un peu sur une problématique css. Je souhaite créer une liste du type :

1. texte1
2. texte2

Les contenus sont tirés d'une requête PHP/SQL.

Ma difficulté porte sur le retour à la ligne pour du texte long. Je voudrais que ce retour se fasse avec un retrait sous texte1 ou texte 2 mais pas sous le 1 ou le 2. Un peu comme les notes de bas de page de wikipedia : https://fr.wikipedia.org/wiki/Pollution (par exemple).

Merci de vos suggestions !

Olivier

[Invité]

Bonjour,

• <ol> : l'élément de liste ordonnée
• CSS : list-style

[olivier136978]

Merci !

J'avais essayé sans succès.
Je ne demande pas à css de gérer la numérotation, je le fais par une boucle php. Mon vrai problème est d'aligner le texte lorsque celui-ci est long. Dans mes essais le texte de la seconde ligne vient se placer sous la numérotation

[NoSmoking]

Bonjour,

J'avais essayé sans succès.

c'est dommage car les listes sont simple à gérer.

Dans mes essais le texte de la seconde ligne vient se placer sous la numérotation

Dans ce cas tu peux passer par un pseudo-élément :before que tu décales.

Quelque chose dans le style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
p {
  position: relative;
  margin-left: 1.5em;
}
p:before {
  content: attr(count);
  display: inline-block;
  position: absolute;
  left: -2em;
  width: 1.75em;
  text-align: right;
}

avec des <p> ressemblant à

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p count="1">Lorem ipsum dolor sit amet, consectetur adipisicing eli...

[Invité]

Bonjour,

Je plussois NoSmoking pour le :before, d'autant que la numérotation n'a rien à faire dans le "contenu texte" (ce n'est pas du texte "significatif", mais "décoratif").

Néanmoins, pour "coller" à la numérotation avec un point :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
p:before {
  content: attr(count)'.';
...

CELA DIT, avec une liste <ol><li>, ça fonctionne très bien sans fioritures (comme c'est le cas sur Wikipedia !).

Et je ne vois (à priori *) pas l'intérêt de "gérer la numérotation en PHP".

* A moins que celle-ci ne soit pas forcément "ordonnée".

[olivier136978]

J'ai testé l'idée de nosmoking et ca marche nickel ! Merci ! (j'ai rajouté le point effectivement).

Il s'agit en fait de notes de pages. Ces notes sont stockées dans une table mysql. Dans mon template de page je lance une requête qui va cherchez les notes de la page en question et je descends de de fait une numéro de note qui figure dans ma table.
J'ai testé <ol><li> et chez moi ca ne marche pas. De plus je ne connais pas à priori le nombre de notes pour une page donnée (qui peut être nul) et donc je ne sais pas à priori quand fermer la balise <ol>. Je m'y prends peut être mal mais je voulais éviter un plugin de plus (le site est en wordpress).

Les notes étant numérotées en base je peux également les utiliser ailleurs...

merci à tous en tous cas pour votre aide, je ne connaissais pas du tout le contenu attr(count).