J’aime pas les listes à côté des flottants, parce que ...

Dis pas bonsoir parce que suis pas content,

J’aime pas les listes qui suivent des flottants, parce que la puce ou le numéro (au choix et quand il y a) n’est pas sensible à la marge ou à la bordure du flottant comme l’est le texte des éléments de la liste.

Mais pourquoi n’ont-il pas pensé à faire réagir les puces ou les numéros comme du texte ?

Exemple : une boite flottante à gauche, suit dans le flux, une liste. Le texte des éléments de la liste est sensible à la marge du flottant et n’y entre pas. Mais ce n’est pas le cas des puces et numéro, qui eux se trouve à gauche du texte, et comme le texte colle à la marge droite du flottant... ben les puces et numéro rentre dans dans la marge, et si la marge droite du flottant est moins large que le padding gauche de la liste, ben les numéros de la liste rentre dans le flottant.

Mauvaises solution #1 : augmenter la marge droite du flottant de sorte à ce qu’elle soit au moins aussi large que la padding gauche des liste. Nul : si c’est autre chose qui suit le flottant, on goutera à la beauté d’une marge beaucoup trop large.

Mauvaise solution #2 : faire la même chose que #1 mais avec le padding droit du flottant. Nul pour les mêmes raisons que #1.

La solution qui aurait géniale : que CSS traite les puces et numéros comme du texte.
Modifié par hibou57 (11 Jul 2010 - 05:12)

Bonne nuit,

Ça m'énerve aussi. Dans certains cas particuliers, la solution pourrait être d'utiliser :

list-style-position:inside

Tony Monast a écrit :
# 11 Jul 2010 - 06:08:16
Bonne nuit,

Ah, ta journée a été longue

Tony Monast a écrit :
Ça m'énerve aussi. Dans certains cas particuliers, la solution pourrait être d'utiliser :

list-style-position:inside

Tiens, je n’y avais pas pensé à ça, je vais essayer pour voir si je peux en tirer quelque chose qui me plait.

Sinon j’avais à défaut fait un

position: relative;
z-index: -1;

sur la liste, pour que les numéro passent en dessous du float, pour les zone concerné (les numéros des éléments suivant redevenant visible pour ceux plus bas que le float). C’est un peu dégueu... mais je préférai ça plutôt qu’un chevauchement, et les numéo ne sont pas d’une extrème importance dans ce cas, même si la liste doit une liste ordonnée, alors qu’à l’inverse, le chevauffement d’un autre contenu sur le float posait un réel problème.

Mais comme la liste contiens des liens, je me suis aperçu que les liens contenus dans la liste devenaient alors non-cliquable sur FireFox (un phénomène que j’avais déjà remarqué à une autre occasion) ; j’ai donc finalement fait

position: relative;
z-index: 1;

sur le float

Sinon, pour en revenir à cette histoire de considérer les numéros et puces comme tu texte : il y a pourtant quelque chose qui serait tout bien pour ça en CSS... les textes générés. Ça aurait put être traité comme du texte généré par le CSS, et CSS connait déjà ça (même si question accessibilité, ça n’est pas du tout recommandé et que je ne l’utilise donc pas).

Et puis au passage, ça aurait aussi fait que lorsque l’on sélectionne une liste sur une page web, on pourrait copier les numéro des items dans la foulée, alors que comme les choses sont actuellement, on ne copie que le texte des items.
Modifié par hibou57 (11 Jul 2010 - 07:29)

hibou57 a écrit :

Ah, ta journée a été longue

Plus ou moins, il était minuit quand j'ai écris le message.

Sinon concrètement, concernant les floats et les listes, en général je m'en sors assez bien en utilisant le padding-left sur le ul. Je fais des tests et je finis par trouver la bonne distance pour que ça sorte bien.