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/>
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Laurent vilday
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 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.
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
Dans l'article <4720b3e0$0$20720$, Laurent vilday 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 - <URL:http://www.cadichonne.net/>
Dans l'article <4720b3e0$0$20720$426a74cc@news.free.fr>, Laurent vilday
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 - <URL:http://www.cadichonne.net/>
Dans l'article <4720b3e0$0$20720$, Laurent vilday 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 - <URL:http://www.cadichonne.net/>
Laurent vilday
Mathieu Goutelle a écrit :
Dans l'article <4720b3e0$0$20720$, Laurent vilday 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 : <http://cjoint.com/data/kzrEIpqf1p.htm>
Et je pensais que tu voulais obtenir ceci : <http://cjoint.com/data/kzrFaheYPY.htm>
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 : <http://cjoint.com/data/kzrPPku82Q.htm>
-- laurent
Mathieu Goutelle a écrit :
Dans l'article <4720b3e0$0$20720$426a74cc@news.free.fr>, Laurent vilday
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 :
<http://cjoint.com/data/kzrEIpqf1p.htm>
Et je pensais que tu voulais obtenir ceci :
<http://cjoint.com/data/kzrFaheYPY.htm>
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 :
<http://cjoint.com/data/kzrPPku82Q.htm>
Dans l'article <4720b3e0$0$20720$, Laurent vilday 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 : <http://cjoint.com/data/kzrEIpqf1p.htm>
Et je pensais que tu voulais obtenir ceci : <http://cjoint.com/data/kzrFaheYPY.htm>
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 : <http://cjoint.com/data/kzrPPku82Q.htm>
-- laurent
Mathieu Goutelle
Dans l'article <4720b944$0$11354$, Laurent vilday 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 : <http://cjoint.com/data/kzrPPku82Q.htm>
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/
Dans l'article <4720b944$0$11354$426a74cc@news.free.fr>, Laurent vilday
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 :
<http://cjoint.com/data/kzrPPku82Q.htm>
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/
Dans l'article <4720b944$0$11354$, Laurent vilday 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 : <http://cjoint.com/data/kzrPPku82Q.htm>
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
Bonsoir,
Dans l'article <4720b944$0$11354$, Laurent 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/
Bonsoir,
Dans l'article <4720b944$0$11354$426a74cc@news.free.fr>, Laurent
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/
Dans l'article <4720b944$0$11354$, Laurent 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 25/10/2007 21:26, Mathieu Goutelle a écrit :
<http://cjoint.com/data/kzrPPku82Q.htm>
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à :
<http://www.yoyodesign.org/doc/w3c/css2/visuren.html#block-formatting> 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). </>
<http://www.w3.org/TR/REC-CSS2/visuren.html#block-formatting> 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...
Le 25/10/2007 21:26, Mathieu Goutelle a écrit :
<http://cjoint.com/data/kzrPPku82Q.htm>
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à :
<http://www.yoyodesign.org/doc/w3c/css2/visuren.html#block-formatting>
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).
</>
<http://www.w3.org/TR/REC-CSS2/visuren.html#block-formatting>
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...
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à :
<http://www.yoyodesign.org/doc/w3c/css2/visuren.html#block-formatting> 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). </>
<http://www.w3.org/TR/REC-CSS2/visuren.html#block-formatting> 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
Bonjour,
Dans l'article <472124ae$, Olivier Miakinen a écrit :
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 - <URL:http://www.cadichonne.net/>
Bonjour,
Dans l'article <472124ae$1@neottia.net>, Olivier Miakinen a écrit :
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 - <URL:http://www.cadichonne.net/>
Dans l'article <472124ae$, Olivier Miakinen a écrit :
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 - <URL:http://www.cadichonne.net/>
