Partage
  • Partager sur Facebook
  • Partager sur Twitter

Listes à puces

Style arborescence

    26 novembre 2005 à 20:58:38

    Bonsoir,

    Je poste ce sujet sur le forum car j'aimerais apporter plus de clareté à mes menus. En effet, jusqu'à maintenant, les éléments de mes menus sont situés l'un en dessous des autres et avec un petit décalage par rapport au bloc où ils se trouvent. J'aimerais faire comme une sorte d'arborescence (un peu comme sur SdZv3, le menu "tutoriaux" où "C++, Site web" etc. sont décalés par rapport à "Cours (tous)". J'ai regardé dans le tutorial sur les listes à puces comment faire et je n'ai trouvé que cette forme :
    <dl>
       <dt>Chat</dt>
       <dd>Animal à 4 pattes qui fait "Miaou !"</dd>
       <dt>Chien</dt>
       <dd>Animal à 4 pattes qui fait "Ouaf Ouaf !"</dd>
       <dt>Prof de maths</dt>
       <dd>Extraterrestre venu d'une autre planète qui enseigne des choses que personne ne comprend</dd>
    </dl>
    Pourtant, j'ai regardé le code source du site et la liste dite "en arborescence" est faite comme une liste dite traditionnelle. Comment faire ?

    Merci d'avance.
    • Partager sur Facebook
    • Partager sur Twitter
      26 novembre 2005 à 21:03:35

      Salut !

      essai sa :


      <ul>
      <li>lien 1</li>
         <ul>
         <li>Sous lien 1</li>
         <li>Sous lien 2</li>
         </ul>
      <li>Lien 2</li>
          <ul>
          <li>Sous lien 1</li>
          </ul>
      </ul>



      Voila sa devrait marché normalemnt, dans ce code tu insere une liste dans une liste ^^
      • Partager sur Facebook
      • Partager sur Twitter
        26 novembre 2005 à 21:15:47

        Edit :

        Intéressant ... cependant, je voudrais savoir comment faire pour que le premier élément de la liste se colle au bord du bloc car il est espacé de quelques pixels chez moi et j'ai beau vérifier dans mon fichier css, je ne met en aucun cas de text-indent ou de chose comme ca à mes listes ...

        Merci d'avance.
        • Partager sur Facebook
        • Partager sur Twitter
          30 novembre 2005 à 21:00:15

          salut
          tu met dans le code css :

          li
          {
          margin-left:0px;
          padding-left:0px;
          }

          et normalement c'est bon.
          A plus!
          • Partager sur Facebook
          • Partager sur Twitter
          Anonyme
            1 décembre 2005 à 0:30:53

            Sinon il y a ca...

            list-style-position: inside;
            • Partager sur Facebook
            • Partager sur Twitter
              1 décembre 2005 à 5:01:24

              Salut.
              Semantiquement pour ce genre d'affichage la liste <dl> est la bonne solution pour avoir un decalage comme tu souhaites suffit d'ajuster le margin et le padding-left de <dt> et<dd>
              • Partager sur Facebook
              • Partager sur Twitter

              Listes à puces

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur
              • Markdown