28173 sujets

CSS et mise en forme, CSS3

Problème de marge à cause d'un ul

Salut,

Ca fait quelques heures que je bloque là-dessus. J'ai un div avec une couleur de fond jaune. A l'intérieur de ce div, il y a un ul, qui a comme margin 10px 0.
Le problème vient du fait que le margin ne se fait pas sur le ul mais sur le div parent.
Avec un autre élément, h1, p, etc, le problème ne se pose pas. Même chose si j'ajoute de contenu avant ou après cet ul (comme j'ai du contenu qui commence ou se termine par une liste, ce n'est pas une solution)
Etrange non ? Smiley langue

http://64k.be/download/probleme-ul.html

http://64k.be/download/probleme-ul.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
<!--
* {margin: 0; padding: 0; list-style-type: 0}
body {background: gray}
div.a {background: red}
div.b {background: yellow}
div.b ul {margin: 10px 0}
-->
</style>
</head>
<body>
<div class="a">top</div>
<div class="b">
  <ul>
    <li>list element</li>
    <li>list element</li>
    <li>list element</li>
  </ul>
</div>
<div class="a">bottom</div>
</body>
</html>

Modifié par cedb3 (04 May 2006 - 15:49)
Bonjour !

Rassure-toi, la propriété margin s'applique bien à ton élément ul et non sur son élément parent.

margin définit une marge externe (donc un espacement avant l'élément), et non une marge interne ou padding qui est un espacement entre l'élément et son contenu.

En remplaçant margin par padding dans ton code CSS, tu devrais rectifier ce léger souci.
Modifié par Ladytron (04 May 2006 - 15:50)
Merci pour ta réponse, mais je n'arrive pas à m'y faire Smiley biggrin
Regarde, j'ai mis mon exemple à jour, en mettant un fond vert au ul.
Pourquoi est-ce qu'on ne voit pas le fond jaune du div, 10px au dessus et 10px en dessous du ul ?
Imagine si j'avais une image de fond à cet ul, et que je voudrai un padding de 10px pour que le texte ne colle pas au bord de l'image de fond. Comment définir une marge à cet ul pour qu'il ne soit pas collé au reste du contenu alors ?
Bonjour,

Tu as un problème de fusion des marges entre ta liste et le div#b.
Pour tester ça, ajoute ceci :

<!--
* {margin: 0; padding: 0; list-style-type: 0}
body {background: gray}
div.a {background: red}
div.b {background: yellow;[#orange]padding:1px 0;[/#]}
div.b ul {margin: 10px 0; background: green}
-->
Donc pour corriger le problème, il faudrait mettre un padding en haut et en bas d'un pixel.
Modifié par Smiley neko (04 May 2006 - 16:39)
Ou comme ladytron te l'a expliqué tout a l'heure, remplacer ton margin: 10px; par un padding:10px ;

les marges externes sont considerees "en dehors" de ton élément, donc le fond n'apparait pas.

<style type="text/css">

<!--

* {margin: 0; padding: 0; list-style-type: 0}

body {background: gray}

div.a {background: red}

div.b {background: yellow}

div.b ul {padding: 10px 0}

-->

</style>


Resultat :

http://www.aj-crea.com/test_padding_ul.htm

[EDIT] encore grillé par neko.
Modifié par AymericJ (04 May 2006 - 16:33)
neko a écrit :

Tu as un problème de fusion des marges

Merci neko ! Il me semblait bien qu'il y avait un truc bizarre dans cet exemple.

J'avais jamais entendu parlé de cette fusion des marges avant. Je ne comprend pas pourquoi c'est voulu par le W3C Smiley eek
a écrit :
Lorsque deux boîtes de type "bloc" se suivent, et qu'elles sont toutes deux dotées de marges externes hautes et basses, la distance entre deux boîtes successives n'est pas égale à la somme de ces marges externes, mais à la plus grande des deux.

Modifié par cedb3 (04 May 2006 - 16:57)
Certains te parleront de stupide bug sur internet, mpop te dira que c'est pratique dans les éditeurs de textes (comme Word)...

En me rendant compte que j'allais m'embarquer dans une explication alambiquée, je me suis dis "cherchons un peu d'aide pour expliquer ça clairement", et je suis tombé sur ça : http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
(c'est de mpop justement). Smiley cligne

(De manière simple, il arrive que des marges équivalentes sur des blocs imbriqués ne se cumulent pas normalement, mais fusionnent : par exemple, deux marges de 20px ne créeront pas un espace de 40px, mais uniquement de 20px... ça se règle souvent à coup de paddings ou bordures d'un pixel sur un des blocs.)
Modifié par Smiley neko (04 May 2006 - 19:45)
Sujet clos
Aller à