Forum Astuces.divers css

Posté par arnauld le 14 mars 2018 à 19:03. Licence CC By‑SA.

Étiquettes : aucune

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 nnamrok le 14 mars 2018 à 20:05. É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 arnauld le 14 mars 2018 à 20:47. Évalué à 1.

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

arnauld
# "letter-spacing: normal;"

Posté par Claude SIMON (site web personnel) le 15 mars 2018 à 08:01. É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…

Pour nous émanciper des géants du numérique : Zelbinium !
- [^] # Re: "letter-spacing: normal;"
  
  Posté par arnauld le 15 mars 2018 à 16:11. É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 Claude SIMON (site web personnel) le 15 mars 2018 à 16:29. É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…
    
    Pour nous émanciper des géants du numérique : Zelbinium !
    - [^] # Re: "letter-spacing: normal;"
      
      Posté par arnauld le 15 mars 2018 à 18:27. É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 solsTiCe (site web personnel) le 17 mars 2018 à 13:36. É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.