28173 sujets
CSS et mise en forme, CSS3
Je ne comprends pas bien la description du bug. Une page en ligne serait un plus.
Sinon, ça me fait vaguement penser à une histoire de fusion des marges :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
Sinon, ça me fait vaguement penser à une histoire de fusion des marges :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
beh, je ne peux pas vous fournir de page, car je bosse en interne pour ma société.
Le truc que je comprends pas c'est que sous IE (6.0 win 2000), je n'ai pas cette marge
et qu'elle disparait si je mets une bordure sur mon body..
voici quand meme une partie du code
En gros :
Un block (header) qui prends la largeur de toute ma fenetre, sans marge mais qui s'etends en hauteur en fonction de son contenu (normal)
J'ai une image qui (en thérorie) devrait touché le haut de ma fenetre.
Le bas du bloc correspond donc au bas de l'image.
J'ai donc bloc menu qui, en absolue, touche mon image (son bord droit, left 124px correspond à la largeur de mon image) et qui longe le bas du bloc header comme l'image
Si j'enleve mon 1px border dans mon body, je me retrouve avec une marge.. disons.. 2em a vu de nez..
En effet, ca ressemble à de l'ecrasement de marge, mais moi, c'est l'inverse, la marge apparait alors que je voudrais qu'elle n'apparaisse pas.
Et puis, ma border de 1px ne fait pas apparait mais disparaitre la marge ! (c'est tout le contraire quoi..)
Modifié par nORKy (21 Jun 2006 - 16:47)
Le truc que je comprends pas c'est que sous IE (6.0 win 2000), je n'ai pas cette marge
et qu'elle disparait si je mets une bordure sur mon body..
voici quand meme une partie du code
<body>
<div id="header">
<img src="truc" />
<div id="menu">
</div>
</div>
<div id="page">
</div>
</body>
body {
margin: 0px;
padding: 0px;
font-size: 77%;
border: 1px solid white;
}
#header {
float: left;
position: relative;
width: 100%;
margin: 0 0 1em 0:;
}
#header #menu {
postion: absolute;
bottom: 0;
left: 124px;
}
En gros :
Un block (header) qui prends la largeur de toute ma fenetre, sans marge mais qui s'etends en hauteur en fonction de son contenu (normal)
J'ai une image qui (en thérorie) devrait touché le haut de ma fenetre.
Le bas du bloc correspond donc au bas de l'image.
J'ai donc bloc menu qui, en absolue, touche mon image (son bord droit, left 124px correspond à la largeur de mon image) et qui longe le bas du bloc header comme l'image
Si j'enleve mon 1px border dans mon body, je me retrouve avec une marge.. disons.. 2em a vu de nez..
En effet, ca ressemble à de l'ecrasement de marge, mais moi, c'est l'inverse, la marge apparait alors que je voudrais qu'elle n'apparaisse pas.
Et puis, ma border de 1px ne fait pas apparait mais disparaitre la marge ! (c'est tout le contraire quoi..)
Modifié par nORKy (21 Jun 2006 - 16:47)
Dans le cas de la fusion des marges, comme tu peux le voir sur la page donnée en lien un peu plus haut, une bordure empêche la fusion des marges entre enfant et parent.
Si on suite le principe de la fusion des marges entre blocs parents et enfants, et que tu as un élément dans ton header qui a une marge (par défaut ou demandée explicitement), il est très possible que la marge de cet élément se transmette au bloc header, qui la transmet au body. Le body se retrouve donc avec une marge. À moins que la marge de body ne soit transmise à html, dans ce cas c'est html qui a une marge, je ne sais pas trop.
Au passage, dans ton code tu as un flottant en largeur 100%. S'il prend 100% de la largeur, ça ne laisse pas de place à côté du flottant pour un autre élément. Quel est alors l'intérêt d'utiliser le comportement flottant ?
Si on suite le principe de la fusion des marges entre blocs parents et enfants, et que tu as un élément dans ton header qui a une marge (par défaut ou demandée explicitement), il est très possible que la marge de cet élément se transmette au bloc header, qui la transmet au body. Le body se retrouve donc avec une marge. À moins que la marge de body ne soit transmise à html, dans ce cas c'est html qui a une marge, je ne sais pas trop.
Au passage, dans ton code tu as un flottant en largeur 100%. S'il prend 100% de la largeur, ça ne laisse pas de place à côté du flottant pour un autre élément. Quel est alors l'intérêt d'utiliser le comportement flottant ?
mpop a écrit :
Au passage, dans ton code tu as un flottant en largeur 100%. S'il prend 100% de la largeur, ça ne laisse pas de place à côté du flottant pour un autre élément. Quel est alors l'intérêt d'utiliser le comportement flottant ?
Parce que dedans, j'ai égélement une liste flottante (j'utilise des li flottant).
En fait, au début du code, il n"y avait pas de div menu et pas d'image.
Une fois l'image en place, je ne voulais pas laisser ma liste en dessous, mais la mettre à coter. j'ai donc utilser la position absolute pour position ma liste (par l'intermédiaire d'un bloc menu) pour la mettre a coté et aligner avec le bas.
Donc, il est vrai que je devrais plutot 'travailler' mon bloc menu plutot que le bloc header..
Bon, si faut que je remonte alors à la source de l'element qui transmet une marge donc.. je trouverais le coupable ! lol
nORKy a écrit :
Bon, si faut que je remonte alors à la source de l'element qui transmet une marge donc.. je trouverais le coupable ! lol
Oui, enfin si c'est la source du problème, hein !
Remarque, ça se vérifie facilement en mettant un petit padding ou border à un conteneur (le premier conteneur après body, par exemple).
Modifié par mpop (22 Jun 2006 - 01:35)
