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

Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics

tgst04
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 2
Inscription: 26 Mar 2004

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

Message le Ven Mar 26, 2004 17:48

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: Tout sélectionner
<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
WRInaute passionné
WRInaute passionné
 
Messages: 1923
Inscription: 6 Juin 2003

Message le Ven Mar 26, 2004 18:26

Joue sur le margin et le padding.

Fred


Monique
WRInaute passionné
WRInaute passionné
 
Messages: 1545
Inscription: 16 Sep 2002

Message le Ven Mar 26, 2004 18:31

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: Tout sélectionner
<style type="text/css">
.interligne {
   margin-bottom: -15px;
}
</style>


et dans le code de ta page
Code: Tout sélectionner
<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
WRInaute accro
WRInaute accro
 
Messages: 3380
Inscription: 24 Sep 2003

Message le Ven Mar 26, 2004 19:29

Génial Monique ! :)

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


yannouk
WRInaute passionné
WRInaute passionné
 
Messages: 2142
Inscription: 11 Oct 2003

Message le Ven Mar 26, 2004 21:07

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!!!


Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Formation recommandée sur ce thème :

Formation Google Analytics : en 2 jours, apprenez comment exploiter l'essentiel des possibilités de l'outil de mesure d'audience de Google. Formation animée par les experts Google Analytics de Ranking Metrics.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités