Formater un champ en liste

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Formater un champ en liste

    Bonjour,
    Je souhaite appliquer une classe CSS sur un champ texte pour formater mon texte en liste.

    Code:
    .ul{
    list-style-type:none;
    padding: 0;
    margin: 0;
    }
    .li{
    padding-left: 16px;
    }
    .li::before{
    list-style-type: circle;
    padding-right: 8px;
    color: #123856;
    }
    Je suppose que la classe se place dans l'onglet paramètres du champ : classe de la valeur.
    Je sais faire pour un format usuel, mais par pour un format en liste.
    Pouvez-vous me donner un petit coup de main SVP ?
    Alain
    Dernière édition par Alain_56 à 27/06/2022, 16h23

  • #2
    Hello,
    Je suis pas sûr de t'avoir compris, un champ texte est un champ de formulaire, c'est bien de ça qu'il s'agit ?
    Tes styles ne sont pas corrects, 2 choses :
    - Pas de . devant les ul et li, ce sont des balises html
    - La propriété "list-style-type" s'applique à "li" mais pas à "::before", je ne sais pas pourquoi tu utilises ce dernier ? Et si tu veux quand même appliquer une puce à "::before" il te faut écrire cela avec "content" en mettant un point médian comme dans l'écriture inclusive...
    Code:
    li::before {
    color: #123856;
    content: "•";
    padding-right: 8px;
    }
    Dernière édition par sarki à 23/06/2022, 19h59
    Support FR de l'éditeur JCE: télécharger JCE en français, aide & forum - www.sarki.ch/jce

    Commentaire


    • #3
      Bonjour sarki,
      Effectivement, je ne suis pas clair
      Le champ personnalisé est ajouté à l'article, dans mon cas c'est un champ texte.


      Le code ci-dessous est le format souhaité :
      Code:
      <p><span style="...;">TITRE</span></p>
      <ul style="list-style-type: circle;">
      <li><span style="...;">mon activité</span></li>
      </ul>
      Le CSS est inclus dans un fichier user.css
      Mes questions :
      • quelle est l'écriture du format dans la feuille de style ?
      • où placer la classe du champ personnalisé dans le formulaire ci-dessous ?
      https://ibb.co/G0d0SCq
      Alain
      Dernière édition par Alain_56 à 24/06/2022, 07h11

      Commentaire


      • #4
        ​ Comme indiqué sur ta capture, il y a la classe du label et la classe du champ.
        Je ne suis toujours pas sûr de te comprendre...
        Tu veux que le contenu du champ personnalisé de type texte apparaisse comme un élément d'une liste à puce ?
        Si oui pourquoi ? As-tu d'autres champs qui suivent et l'ensemble doit-il former une liste ?

        Tes labels sont-ils affichés ou non ? Et si oui, comment par rapport aux champs ?

        Les balise de liste (ul, li) existent-elles autour du contenu du champ comme tu l'écris ? Perso j'en doute... Si non tu ne peux pas les créer avec du CSS car ce sont des balises HTML !
        Donc ta question serait : comment afficher le contenu d'un champ comme un élément d'une liste alors que ce n'en est pas un, qu'il n'y a aucune liste ?

        Mets par exemple la classe "champtexte1" dans "Classe du champ".
        Dans la feuille de style "user.css" ajoute les styles suivants en utilisant la propriété "::before" car les attributs "liste-style" et "list-style-type" ne s'appliquent qu'aux listes :
        Code:
        .champtexte1 {
        display: inline-block;
        }
        .champtexte1::before {
        content: "•";
        display: inline-block;
        }
        Si ton site est en ligne mets son URL que je puisse voir le contexte ​​​
        Support FR de l'éditeur JCE: télécharger JCE en français, aide & forum - www.sarki.ch/jce

        Commentaire


        • #5
          Bonjour sarki,
          Désolé, le site n'est pas en ligne.

          A la lecture de tes nombreuses interrogations, j'abandonne cette solution au profit d'un champ éditeur qui répond par défaut à mon besoin immédiat.
          Merci quand même pour ton aide précieuse
          Alain
          sarki aime ceci.

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X