Liste à puce et float: left

Le
Mathieu Goutelle
Bonjour,

Pourquoi, dans l'exemple ci-dessous, les puces de la liste chevauchent
le cadre ? On a l'impression que le retrait qui doit apparaître
normalement en tête de ligne (par exemple en faisant passer du texte
sous le cadre) est ignoré.

Pour info, je m'en suis aperçu avec une image à la place du cadre. Le
« bug » apparaît dans FF2 et IE6.

Cordialement,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>

<body>
<div style="float: left; margin-right: 5px; border: 1px solid black;
width: 100px; height: 200px;"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming
id quod mazim placerat facer possim assum. Typi non habent claritatem
insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt
saepius.</p>

<ul>
<li>Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum.</li>
<li>Mirum est notare quam littera gothica, quam nunc putamus parum
claram, anteposuerit litterarum formas humanitatis per seacula quarta
decima et quinta decima.</li>
<li>Eodem modo typi, qui nunc nobis videntur parum clari, fiant
sollemnes in futurum.</li>
</ul>
</body>
</html>

--
Q: Connaissez-vous la différence entre l'ignorance et l'apathie ?
R: J'en sais rien et je m'en fous.
Mathieu Goutelle - <URL:http://www.cadichonne.net/>
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
Laurent vilday
Le #22088851
Mathieu Goutelle a écrit :
Pourquoi, dans l'exemple ci-dessous, les puces de la liste chevauchent
le cadre ?



Humm, à cause de la propriété "list-style-position" positionnée à
"outside" par défaut ? Tout du moins sous FX2, Opéra 9 et IE7 (pas testé
sous IE6), ce qui n'est pas un bug, je crois.

Avec l'exemple fourni, placer list-style-position du <ul> à inside.

ul { list-style-position:inside }

--
laurent
Mathieu Goutelle
Le #22088841
Dans l'article a écrit :
Avec l'exemple fourni, placer list-style-position du <ul> à inside.
ul { list-style-position:inside }



C'est ce que je croyais aussi, mais en y regardant de plus près, ça ne
change rien : le retrait du début de ligne est absent !

Sans le div, la liste est bien décalée vers la droite par rapport à la
marge alors que le float fait disparaître ce retrait (le début des
items coïncide avec le début des paragraphes).

Cordialement,
--
Q: Connaissez-vous la différence entre l'ignorance et l'apathie ?
R: J'en sais rien et je m'en fous.
Mathieu Goutelle -
Laurent vilday
Le #22088831
Mathieu Goutelle a écrit :
Dans l'article a écrit :
Avec l'exemple fourni, placer list-style-position du <ul> à inside.
ul { list-style-position:inside }



C'est ce que je croyais aussi, mais en y regardant de plus près, ça ne
change rien : le retrait du début de ligne est absent !



Oops, j'avais rien compris au problème.

Voila ce que je voyais avec l'exemple :

Et je pensais que tu voulais obtenir ceci :

Sans le div, la liste est bien décalée vers la droite par rapport à la
marge alors que le float fait disparaître ce retrait (le début des
items coïncide avec le début des paragraphes).



J'ai du mal à comprendre quel rendu tu désires obtenir, ce que je vois
me semble être "normal". Et surtout comment ça devrait se comporter
lorsque les <li> sont a moitié à droite du <div> flottant et à moitié en
dessous comme dans l'image suivante :

--
laurent
Mathieu Goutelle
Le #22088781
Dans l'article a écrit :
> Sans le div, la liste est bien décalée vers la droite par rapport à la
> marge alors que le float fait disparaître ce retrait (le début des
> items coïncide avec le début des paragraphes).

J'ai du mal à comprendre quel rendu tu désires obtenir, ce que je vois
me semble être "normal". Et surtout comment ça devrait se comporter
lorsque les <li> sont a moitié à droite du <div> flottant et à moitié en
dessous comme dans l'image suivante :



Dans ce cas, on voit bien qu'il y a un retrait entre les points du bas
et la bord de l'écran. Pourquoi je n'ai pas le même retrait entre le
div et les points ? Dès qu'il y a un float, les points sont alignés
verticalement avec les paragraphes. Sans le float, les points sont
décalés vers la droite. Ce que je voudrais, c'est que la présence du
float ne change pas la position relative horizontale entre le début des
lignes du paragraphe et les débuts des points.

Cordialemetn,
--
Q: Connaissez-vous la différence entre l'ignorance et l'apathie ?
R: J'en sais rien et je m'en fous.
Mathieu Goutelle - http://www.cadichonne.net/
Mathieu Goutelle
Le #22088771
Bonsoir,

Dans l'article vildaya écrit :
J'ai du mal à comprendre quel rendu tu désires obtenir, ce que je
vois me semble être "normal".



Pour être plus clair, voici ce que je trouverais "normal" d'avoir :
http://cjoint.com/?kzwuFMCUCr, i.e. que l'espace rouge soit aussi
présent lorsque le div est présent. J'ai du mal d'ailleurs à croire
que je sois le premier à m'apercevoir de ce comportement bizarre...

Cordialement,
--
Q: Connaissez-vous la différence entre l'ignorance et l'apathie ?
R: J'en sais rien et je m'en fous.
Mathieu Goutelle - http://www.cadichonne.net/
Olivier Miakinen
Le #22088761
Le 25/10/2007 21:26, Mathieu Goutelle a écrit :




Dans ce cas, on voit bien qu'il y a un retrait entre les points du bas
et la bord de l'écran. Pourquoi je n'ai pas le même retrait entre le
div et les points ? Dès qu'il y a un float, les points sont alignés
verticalement avec les paragraphes. Sans le float, les points sont
décalés vers la droite. Ce que je voudrais, c'est que la présence du
float ne change pas la position relative horizontale entre le début des
lignes du paragraphe et les débuts des points.



Je pense que la raison est là :

En contexte bloc, le bord externe gauche de chaque boîte touche le bord
gauche de son bloc conteneur (c'est le bord droit dans un formatage de
droite à gauche). Ceci reste vrai en présence de flottants (bien que le
contenu de l'aire de la boîte puissent rétrécir de ce fait).
</>

In a block formatting context, each box's left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch). This is true even in the presence of floats (although a
box's content area may shrink due to the floats).
</>

Tu t'attendrais à ce que le bord gauche de la marge de la liste à puces
touche le bord droit du float, alors qu'en réalité il touche le bord
gauche de son bloc conteneur (et donc aussi le bord *gauche* du float).
Du coup, la marge gauche n'est pas réduite comme tu le crois, elle est
même augmentée, mais tout le float se retrouve *dans* la marge.

Est-ce que tu ne peux pas t'en sortir avec un padding au lieu d'une
marge ? Ou alors avec une marge, mais en incluant artificiellement ta
liste à puces dans un div qui servira de bloc conteneur pour la marge...
Mathieu Goutelle
Le #22088751
Bonjour,

Dans l'article
Je pense que la raison est là : [...]



Merci pour l'explication : je comprends maintenant (d'ailleurs, ça se
voit bien en mettant des bordures partout ou avec Firebug), même si du
coup, l'offset des listes à puces est complètement ignoré et les puces
chevauchent le flottant. Je ne trouve pas ça très naturel...

Est-ce que tu ne peux pas t'en sortir avec un padding au lieu d'une
marge ? Ou alors avec une marge, mais en incluant artificiellement ta
liste à puces dans un div qui servira de bloc conteneur pour la marge...



On peut faire ça, mais du coup, la présence du float ne modifie pas la
position horizontale de la liste... En plus, c'est quand même assez
figé comme solution : la taille de l'écran de l'utilisateur modifie le
positionnement de la liste par rapport au flottant.

Cordialement,
--
Q: Connaissez-vous la différence entre l'ignorance et l'apathie ?
R: J'en sais rien et je m'en fous.
Mathieu Goutelle -
Publicité
Poster une réponse
Anonyme