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

Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics

tgst04
Nouveau WRInaute
 
Messages: 2
Inscription: Ven Mar 26, 2004 17:43

[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 accro
WRInaute accro
 
Messages: 1923
Inscription: Ven Juin 06, 2003 7:57

Message le Ven Mar 26, 2004 18:26

Joue sur le margin et le padding.

Fred


Monique
WRInaute accro
WRInaute accro
 
Messages: 1545
Inscription: Lun Sep 16, 2002 10:50

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: Mer Sep 24, 2003 11:49

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 accro
WRInaute accro
 
Messages: 2138
Inscription: Sam Oct 11, 2003 12:35

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


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 Julien Coquet, expert certifié officiellement par Google Analytics.

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