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

Discussion dans 'Administration d'un site Web' créé par tgst04, 26 Mars 2004.

  1. tgst04
    tgst04 Nouveau WRInaute
    Inscrit:
    26 Mars 2004
    Messages:
    2
    J'aime reçus:
    0
    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 !
     
  2. George Abitbol
    George Abitbol WRInaute passionné
    Inscrit:
    6 Juin 2003
    Messages:
    1 519
    J'aime reçus:
    0
    Joue sur le margin et le padding.

    Fred
     
  3. Monique
    Monique WRInaute passionné
    Inscrit:
    16 Septembre 2002
    Messages:
    1 153
    J'aime reçus:
    0
    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
     
  4. Americas
    Americas WRInaute accro
    Inscrit:
    24 Septembre 2003
    Messages:
    2 574
    J'aime reçus:
    0
    Génial Monique ! :)

    Je dois mettre du CSS partout sur mon site... je t'embauche :lol:
     
  5. yannouk
    yannouk WRInaute passionné
    Inscrit:
    11 Octobre 2003
    Messages:
    1 559
    J'aime reçus:
    0
    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!!!
     
Chargement...
Similar Threads - [CSS] Améliorer style Forum Date
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
[CSS] Overflow, float:right, et internet explorer Développement d'un site Web ou d'une appli mobile 10 Août 2009
[css] <li> image en vertical-align:bottom Développement d'un site Web ou d'une appli mobile 18 Juillet 2009
[CSS] bouton non cliquable Développement d'un site Web ou d'une appli mobile 16 Juillet 2009
[CSS] IE8 Développement d'un site Web ou d'une appli mobile 15 Juillet 2009
[CSS] decalage image et texte Développement d'un site Web ou d'une appli mobile 18 Juin 2009
[CSS] : scroller overflow et ie6 :-( Développement d'un site Web ou d'une appli mobile 12 Mai 2009
[CSS] bouton submit + image arriere plan Développement d'un site Web ou d'une appli mobile 20 Avril 2009
[CSS]Positionner la colonne centrale en haut du source Développement d'un site Web ou d'une appli mobile 29 Mars 2009
[Résolu] [CSS] Lien sur tout un div Développement d'un site Web ou d'une appli mobile 23 Février 2009
[CSS] L'élément body Développement d'un site Web ou d'une appli mobile 21 Décembre 2008
[CSS] : menus déroulants Développement d'un site Web ou d'une appli mobile 15 Décembre 2008
[CSS] : problème de mise en page FF3 Développement d'un site Web ou d'une appli mobile 31 Août 2008
[CSS] (encore!) pas compatible FF Développement d'un site Web ou d'une appli mobile 30 Juin 2008