Marge ignorée dans une liste décalée par un objet avec "float"

Le
Claude Schneegans
Bonjour,

J'ai disons une table, ou une image, ou n'importe quoi qui a le style
"float:left"

Lorsque dans le texte qui coure à droite de cet objet on a une liste UL,
sa marge de gauche
est ignorée, et ce chez tous les navigateurs (comment ils font pour tous
reproduire le même bogue,
ça ça me les coupe, mais enfin bon)

Voir par exemple : http://www.contentbox.com/claude/test/test.htm
Voir la deuxième liste qui devrait être comme la première décalée à droite.

J'ai lu qqpart que le fait d'ajouter "overflow: auto" à la liste UL
réglait le problème
chez tous SAUF IE. (qu'est-ce que l'overflow a à voir là dedans est un
autre mystère, mais enfin re-bon)

Dans mon exemple, la troisième liste a l'air correcte, sauf dans IE.

Est-ce que qqun aurait une explication, et encore mieux, une solution ?
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Gilles ---
Le #18922831
Bonjour à Claude Schneegans qui, ce mardi 17/03/2009,
a écrit ce qui suit :

Bonjour,



J'ai disons une table, ou une image, ou n'importe quoi qui a le style "float:left"



Lorsque dans le texte qui coure à droite de cet objet on a une liste UL, sa marge de gauche
est ignorée, et ce chez tous les navigateurs (comment ils font pour tous reproduire le même bogue,
ça ça me les coupe, mais enfin bon)



Voir par exemple : http://www.contentbox.com/claude/test/test.htm
Voir la deuxième liste qui devrait être comme la première décalée à droite.



J'ai lu qqpart que le fait d'ajouter "overflow: auto" à la liste UL réglait le problème...
chez tous SAUF IE. (qu'est-ce que l'overflow a à voir là dedans est un autre mystère, mais enfin re-bon)



Dans mon exemple, la troisième liste a l'air correcte, sauf dans IE.



Est-ce que qqun aurait une explication, et encore mieux, une solution ?



Pour mieux comprendre comment les divers interpréteurs gèrent ton code, il peut être
utile, pendant la phase de mise au point, de matérialiser l'emplacement des divers
conteneurs à l'aide d'un peu de CSS, comme ça :

<style>
TD{border:1px solid red}
UL{border:1px solid green}
</style>

De la sorte, tu peux repérer lesd endroits où IE (ou FF ...) a positionné la cellule
de ton tableau et le conteneur des listes à puces.

Pour les listes à puces n° 2 et 3, tu vas avoir une surprise.

Personnellement, mais je ne suis pas grand spécialiste de ce genre de problème,
j'aurais tendance à créer un tableau à deux colonnes, et à placer les listes n° 2 et
3 dans la colonne de droite, comme ceci :

----------
<html>
<head>
<style>
TD{border:1px solid red}
UL{border:1px solid green}
</style>
</head>
<body>
<UL>
<LI>Aliqua stratum in centra benedicto,</LI>
<LI>recondus terrestra duis al ordina tuamem,</LI>
</UL>
Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia
felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut
suscipe melioram veritas.Dolore illum ex commodio consequat, qui nostra magna senza
pomodoro ut studia felicitas in minim veniam. Portuna lorem ipsum dolor sit amer,
quid mestra ut suscipe melioram veritas.
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="2">
<TR>
<TD style="width:300">Aliqua stratum in centra benedicto, recondus terrestra duis al
ordina tuamem, nerus philema lux in gratia gratianem. Iusto odio dignissim qui
blandit praesent luptatum duis dolore te felavit nulla facilisi.
Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia
felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut
suscipe melioram veritas.
</TD>
<TD>
<UL>
<LI>Aliqua stratum in centra benedicto,</LI>
<LI>recondus terrestra duis al ordina tuamem,</LI>
</UL>
<UL>
<LI>Aliqua stratum in centra benedicto,</LI>
<LI>recondus terrestra duis al ordina tuamem,</LI>
</UL>
</TD>
</TR>
</TABLE>
Dolore illum ex commodio consequat, qui nostra magna senza pomodoro ut studia
felicitas in minim veniam. Portuna lorem ipsum dolor sit amer, quid mestra ut
suscipe melioram veritas.
</body>
</html>
----------

Bon courage. :-)

--
Gilles ---
http://www.leblaisois.fr
Claude Schneegans
Le #18923261
>>il peut être utile, pendant la phase de mise au point, de




matérialiser l'emplacement des divers conteneurs à l'aide d'un peu de
CSS, comme ça :

Vi vi vi, c'est exactement ce que j'ai fait, avant de me décourager et
venir demander de l'aide. ;-)
Mais dans mon example, je simplifie au maximum.

>>j'aurais tendance à créer un tableau à deux colonnes, et à placer les
listes n° 2 et 3 dans la colonne de droite, comme ceci :

Ouais, ça c'est la méthode forte !
Mais ça vient briser l'idée d'un texte flottant autour d'un objet.
Gilles ---
Le #18923391
Bonjour à Claude Schneegans qui, ce mardi 17/03/2009,
a écrit ce qui suit :

>>il peut être utile, pendant la phase de mise au point, de
matérialiser l'emplacement des divers conteneurs à l'aide d'un peu de CSS, comme ça :



Vi vi vi, c'est exactement ce que j'ai fait, avant de me décourager et venir demander de l'aide. ;-)
Mais dans mon example, je simplifie au maximum.



>>j'aurais tendance à créer un tableau à deux colonnes, et à placer les
listes n° 2 et 3 dans la colonne de droite, comme ceci :



Ouais, ça c'est la méthode forte !
Mais ça vient briser l'idée d'un texte flottant autour d'un objet.



Désolé, mais sur ce domaine je manque d'expérience.
Bon courage, tu vas trouver ! :-)

--
Gilles ---
http://www.leblaisois.fr
Claude Schneegans
Le #18923621
>>Bon courage, tu vas trouver !





Mouais, ça fait depuis ce matin que je fouille le web et que je ne
trouve rien.
Ça me paraît pourtant assez évident et grossier comme bogue, non ?
Claude Schneegans
Le #18923611
>>Désolé, mais sur ce domaine je manque d'expérience.





En fait, j'avais trouvé ce groupe qui me semblair approprié :
microsoft.public.fr.ccs
Mais il a l'air plutôt désert. ;-/
MCI
Le #18928131
Bonjour !

Lorsque dans le texte qui coure à droite de cet objet (flottant) on a
une liste UL, sa marge de gauche est ignorée



Nope ; la marge (de gauche) est à gauche de l'objet flottant (et
s'ajoute à l'éventuelle marge intrinsèque au flottant). Le contenu est
donc, ensuite "collé" à l'objet flottant. On pourrait dire que l'objet
flotte sur le contenu, et non sur la marge.
S'il le contenu qui enveloppe le flottant et une liste, il faut voir si
les marqueurs sont "inside" ou non.

--
@-salutations
--
Michel Claveau
Claude Schneegans
Le #18928661
>>la marge (de gauche) est à gauche de l'objet flottant





Euh... c'est une façon de voir les choses, si la marge n'appartenait pas
à l'objet.
Mais la marge de gauche appartient à l'objet et en fait partie. Elle ne
peut donc pas se trouver à sa gauche.
Elle appartient à l'objet, pas à celui autour duquel il flotte (celui-ci
a déjà sa propre marge de droite.)
Donc si l'objet a une marge, elle doit s'appliquer de la même façon, que
l'objet soit seul à gauche, ou qu'il flotte à droite d'un autre.
En d'autres termes, si l'objet flotte, il flotte AVEC sa marge.

Dans mon exemple, les boulets sont en retrait quand le texte ne flotte
pas, et on n'a plus de retrait quant il coure autours de la table, ce
n'est absolument pas normal.

En ajoutant "overflow: auto" à la liste UL, le texte y compris les
boulets paraît normal.
Je ne comprends pas non plus ce que la propriété "overflow: auto" peut
avoir comme influence sur le phénomène.

C'est quand même curieux que 5 navigateurs présentent exactement le même
bogue, et que 4 permettent de contourner le même bogue avec le même
artifice qui n'a aucun rapport.

Ça me rappelle quand j'étais prof, et que certains copieurs avaient les
mêmes erreurs dans leur copies d'examen ;-))
Publicité
Poster une réponse
Anonyme