Suivi — Feuilles de style (CSS) Chevauchement des liens sur les icônes de section

#983 Posté par  (site Web personnel) . État de l’entrée : corrigée. Assigné à Bruno Michel.
Étiquettes : aucune
2
15
août
2012

Dans la feuille de style par défaut, les liens qui apparaissent en début de billet présentent souvent un défaut d'alignement par rapport au reste du texte et envahissent l'icône de la section.

Un exemple parmi d'autres :
https://linuxfr.org/news/calligra-2-5-est-sortie
Titre de l'image

Un correction simple à mettre en œuvre consisterait à rajouter dans la css quelque-chose comme ce qui suit :

.content .links li {
    list-style-position: inside
}

Ce qui donnerait :
Titre de l'image

[EDIT]

En fait le problème se pose pour toutes les listes à puces.
Par conséquent, c'est .content ul li qui est concerné, et pas seulement .content .links li.
cf. https://linuxfr.org/news/xfce-gnome-ubuntu-linux-et-debian-sont-dans-le-nautilus

  • # Emplâtre sur une jambe de bois…

    Posté par  (site Web personnel) . Évalué à 1 (+0/-0).

    Bon, en fait, c'est une demi bonne idée.

    list-style-position: inside
    
    

    a un effet de bord (hem…) : au retour à la ligne, le texte est aligné avec la puce et non plus le texte.

    Une possibilité testée pourrait être d'augmenter le padding-left par défaut des balises ul.
    Ce n'est pas optimal, parce que les puces sont de tailles variables et que le padding à un effet direct sur le texte des balises li, celles-ci ayant par défaut une puce alignée list-style position: outside.

    La moins mauvaise solution pourrait alors être d'augmenter la margin-left de .content ul li, mais l'alignement avec le texte du message pourrait ne pas être optimal suivant les polices qui affichent le texte…

    0. Assume good faith 1. Be kind to other people 2. Express yourself 4. Apply rule 0

  • # Corrigé

    Posté par  (site Web personnel) . Évalué à 4 (+0/-0).

    J'ai trouvé un hack CSS qui semble faire l'affaire. Cf https://github.com/nono/linuxfr.org/commit/1d35eed8a1bfa62401ae78b5440ef6bf21805aa9

Envoyer un commentaire

Suivre le flux des commentaires

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