[CSS] Améliorer le style des listes à puces

tgst04 · 26 Mars 2004

Bonjour,
J'ai remarqué qu'il y a souvent un interligne trop grand qui précède mes listes à puces.
Il m'arrive d'écrire du code de ce type :

Code:

<p>Voici un exemple :</p>
<ul>
<li>ligne1</li>
<li>ligne2</li>
<li>...</li>
<li>ligneN</li>
</ul>

Je ne sais pas si c'est bien comme ça qu'il est prévu d'utiliser les 3 balises p, ul et li.
J'imagine qu'il est possible de personnaliser l'affichage en utilisant les CSS mais je ne m'y connais pas assez.

Si quelqu'un a une idée... je suis preneur !

George Abitbol · 26 Mars 2004

Joue sur le margin et le padding.

Fred

Monique · 26 Mars 2004

Bonjour,

Tu peux modifier l'espace entre un paragraphe et la liste avec une feuille de style.
Dans l'en-tête (entre les balises <head></head>)

Code:

<style type="text/css">
.interligne {
	margin-bottom: -15px;
}
</style>

et dans le code de ta page

Code:

<p class="interligne">Le texte</p>
<ul>
  <li>un</li>
  <li>deux</li>
</ul>

A toi de donner la valeur qui te convient à margin-bottom (la marge du bas)

Amicalement,
Monique

Americas · 26 Mars 2004

Génial Monique !

Je dois mettre du CSS partout sur mon site... je t'embauche :lol:

yannouk · 26 Mars 2004

vu que les padding, margin et compagnie sont interpretes de maniere tres differentes suivant le navigateur, je me suis resolu a une solution simple mais ô combien efficace:

utiliser le selecteur universel pour mettre tous les padding et magin de toutes les balises de toutes les pages, a 0

* {
padding:0;
margin:0;
}

ensuite, tu n'as plus qu'à mettre du padding / margin la ou ca t'interresse, et uniquement la!!!