Forum Astuces.divers css

Posté par  . Licence CC By‑SA.
Étiquettes : aucune
1
14
mar.
2018

Bonjour,

j'aurais besoin d'aide pour un fichier .css.

Je suis en train de faire un blog avec Pelican https://github.com/getpelican/pelican et j'ai ajouté un plugin, "neighbors", https://github.com/getpelican/pelican-plugins/tree/master/neighbors qui permet en bas de chaque article de naviguer vers l'article suivant ou précédent.

Pour ce faire j'ai mis le code nécessaire dans article.html. 

     <ul>
     {% if article.prev_article %}
         <li>
             <a href="{{ SITEURL }}/{{ article.prev_article.url}}">
                 {{ article.prev_article.title }}
             </a>
         </li>
     {% endif %}
     {% if article.next_article %}
         <li>
             <a href="{{ SITEURL }}/{{ article.next_article.url}}">
                 {{ article.next_article.title }}
             </a>
         </li>
     {% endif %}
    </ul>

Mais le texte dans la page web "article suivant, article…" est ramassé sur lui-même et illisible.
Voir copie d'écran et blog ici :

Titre de l'image

mon blog en construction.

Je ne sais pas comment modifier mon fichier .css pour que le texte soit lisible.

Merci des conseils.

  • # flex and space

    Posté par  . Évalué à 3. Dernière modification le 14 mars 2018 à 20:08.

    On dirait qu'il y a un problème avec le letter-spacing qu'il faut mettre à normal. Aussi il faut peut-être enlever la liste de son parent qui est display:flex, car elle n'a pas la place (en tout cas sur mon petit écran), avec un position:absolute par exemple.

  • # mon css

    Posté par  . Évalué à 1.

    je mets en lien mon fichier css :
    https://arnauld.org/zerobin/?4fee7f8ac8c08017#D3PFW3OFNKe47+QRGrs36YddvQXEJ98kkjDN4R+oi/Y=

    arnauld

  • # "letter-spacing: normal;"

    Posté par  (site web personnel) . Évalué à 3.

    Le problème, c'est que le code ci-dessus est imbriqué dans un div sur lequel est appliquée une classe CSS nommée pure-g-r. Or, cette classe, définie dans https://cdnjs.cloudflare.com/ajax/libs/pure/0.3.0/pure-min.css, fixe letter-spacing à -.31em, d'où l'apparence du texte. Une solution serait de placer un attribut style="letter-spacing: normal;" directement dans le code ci-dessus, par exemple dans l'élément ul, ou alors de définir dans un fichier CSS une classe définissant cette même propriété et de l'appliquer à ce même élément ul. Je suis plutôt un béotien en matière de CSS, donc je ne garantis pas que ce soit la bonne façon de procéder pour résoudre ce genre de problème…

    Zelbinium, la programmation ludique

    • [^] # Re: "letter-spacing: normal;"

      Posté par  . Évalué à 1.

      Merci.

      ou alors de définir dans un fichier CSS une classe définissant cette même propriété et de l'appliquer à ce même élément ul

      C'est effectivement ce que je veux faire, mais je ne sais pas comment…

      arnauld

      • [^] # Re: "letter-spacing: normal;"

        Posté par  (site web personnel) . Évalué à 3.

        Dans ton message, la première ligne de ton code c'est :

        <ul>

        Il faut simplement la remplacer par : 

        <ul style="letter-spacing: normal;">

        (l'attribut avant le > fermant, pas après…).

        C'est le plus simple. Dans ce cas de figure, passer par une classe n'apporte vraiment pas grand chose…

        Zelbinium, la programmation ludique

        • [^] # Re: "letter-spacing: normal;"

          Posté par  . Évalué à 1.

          Cela a marché. Maintenant je vais essayer de le placer correctement sur la page. Je devrais y arriver. Merci encore du coup de main.

          arnauld

  • # [HS] record de tabulations ouvertes

    Posté par  (site web personnel) . Évalué à 2.

    Juste pour dire que je suis impressionné par le nombre de tabulations ouvertes dans le navigateur. :-)

    C'est un bug ou un script qu'à fait ça ?

    Parce que sinon je vois pas l'intérêt: comment on fait pour s'y retrouver ?
    Enfin bon ça me regarde pas…

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.