28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous.
J'aimerais avoir la possibilité de personnaliser ma longue liste <UL><LI> en l'affichant sur plusieurs colonnes (3 je pense).
Voici mon exemple :
<ul>
<li>lien-1</li>
<li>lien-2</li>
<li>lien-3</li>
<li>lien-4</li>
....

<li>lien-xxx</li>
</ul>


et je voudrais (enfin j'aimerais Smiley cligne afficher cette longue liste en 3 colonnes.
J'ai trouvé une solution pour l'afficher de la façon suivante (en définissant display=inline et une largeur fixe ex. width=300px) :
lien-1 lien-2 lien-3
...
lien-xxx


mais y aurait-il possibilité de l'afficher dans l'autre sens :
lien-1 ... lien-xxx
lien-2 ...
lien-3 ...

MERCI à vous
J'opterais pour essayer avec la propriété CSS3 column-count, à tester sur une liste.

Après, si tu sais déjà en combien de listes tu veux l'afficher, pourquoi ne pas faire directement trois listes différentes ?
Modifié par Naemesis (11 May 2012 - 10:18)
Bonjour,
<edit> comme qui dirait ... c'est déjà dit Smiley smile </edit>
regarde du coté de
ul {
column-count:3;  /* avec si besoin le prefixe : -moz- ,-webkit- , ... */
column-gap:1em; /* idem */
/* etc .... */
list-style-position:inside; /* .... garde la puce ou n° visible sans reset des marges */
}

Cordialement,
GC
Modifié par gc-nomade (11 May 2012 - 10:22)
Merci pour vos réponses si rapides Smiley biggrin

Et encore un GRAND merci car cela fonctionne... je ne connaissais pas cette propriété.

P.S. : pour Naemesis, il s'agit de lister le contenu d'une base de données dont je ne connais pas la quantité d'éléments sachant qu'il s'agira d'un outil dupliqué pour X clients donc pour certains je mettrais 1 colonne, d'autres 2 ou 3. D'où la simplicité de le faire en CSS Smiley cligne

YOUPI !!!
Même clos, je me permets de répondre (je vais encore me faire lyncher par les grands de ce site, m'enfin) : Je ne pense pas qu'il y ait ici une manière de faire plutôt qu'une autre, le javascript se prêtant aussi très bien à une présentation dynamique au cas par cas.

De plus, le CSS n'est pas forcément plus simple à mettre en place qu'un javascript, tout dépend de ton niveau.