[Résolu] Problème de marges avec 2 blocs imbriqués (ben si)

Bonsoir à tous,

Je viens de recevoir un email m'indiquant que l'un des exemples des tutos d'Alsa ne fonctionne plus sur Firefox 1.0 (il fonctionnait sur 0.8, je l'avais testé).

Ce que je vaux faire est très simple : expliquer comment placer un bloc dans un autre bloc en restant dans le flux (juste avec les marges).

J'ai donc un conteneur bleu de 100x100 et un bloc jaune de 50x50 inclus dans le conteneur et sensé être placé à 40px du haut et 20px de la gauche.

HTML :
<div class="conteneur">
  <div class="bloc">bli bli bli</div>
</div> 

CSS : 
.conteneur {
background-color: blue;
height: 100px;
width: 100px;
}
.bloc {
background-color: yellow;
height: 50px;
width: 50px;
margin-left: 20px;
margin-top: 40px;
}

Ça s'affiche comme souhaité sur IE, mais le bloc reste collé en haut du conteneur sur FF1.0.

J'ai d'abord cru à un bug de fusion de marges, mais ce bug ne devrait pas s'appliquer ici :

a écrit :
C'est un phénomène qui s'applique lorsque deux éléments de type bloc sont placés selon le flux normal, l'un sous l'autre. Dans ce cas, les marges hautes et basses fusionnent : la largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes... ce qui peut poser certains problèmes de décalages verticaux.

Dans mon cas, les deux blocs ne se suivent pas, ils sont imbriqués.

Quelqu'un peut-il m'expliquer pourquoi ce code logique apparemment ne fonctionne pas sur FF ?

Merci d'avance.

a écrit :
Raphael a écrit :
Quelqu'un peut-il m'expliquer pourquoi ce code logique apparemment ne fonctionne pas sur FF ?

Alleliua, nous sortons du manichéisme binaire IE=mauvais, FF=bon! Firefox a aussi des défauts, que IE n'a pas, de surcroît! Merci Raphael!

Désolé pour le manque d'apport constructif. Cela dit je suis confronté à des problèmes du même genre avec Firefox 1, avec du code tout aussi apparemment logique. Il faudra que je fasse un post là-dessus.
Modifié le 05 Feb 2005 - 23:28

Mozilla, Netscape et Opera ayant le même comportement, on ne peux donc pas parler d'un bug de Firefox

Recommandation CSS2 du W3C a écrit :

8.3.1 La fusion des marges

Dans cette spécification, l'expression marges de fusion signifie que les marges adjacentes (sans qu'une aire d'espacement ou de bordure ne les séparent) de deux ou plusieurs boîtes (celles-ci pouvant être l'une à côté de l'autre ou imbriquées), ces marges se combinent pour n'en former qu'une seule.

En CSS2, les marges horizontales ne fusionnent jamais.

Les marges verticales peuvent fusionner entre certaines boîtes :

Les marges verticales de deux boîtes, ou plus, d'éléments de type bloc, placés dans un flux normal fusionnent.

(...)

Modifié le 06 Feb 2005 - 00:54

thierry a écrit :

Alleliua, nous sortons du manichéisme binaire IE=mauvais, FF=bon! Firefox a aussi des défauts, que IE n'a pas, de surcroît! Merci Raphael!

Et non, c'est encore IE qui est fautif
Modifié le 06 Feb 2005 - 00:46

OK, merci Stephan, je ne pensais pas que cela s'appliquait aussi aux blocs imbriqués.

Question subsidiaire alors : comment placer simplement, dans le flux, un bloc imbriqué dans un autre ?

Dans ce cas précis, à l'aide d'un padding-top appliqué au conteneur, à la place du margin-top du contenu.

Laurent Denis a écrit :
Dans ce cas précis, à l'aide d'un padding-top appliqué au conteneur, à la place du margin-top du contenu.

Certes, mais cela me pose deux problèmes :
1) jusqu'à présent, le plus simple pour apprendre à positionner les éléments dans le flux est d'utiliser les marges autour de l'élément. Rajouter la notion de padding complexifie les choses pour les débutants
2) un padding-top dans mon exemple précis (conteneur dimensionné en hauteur) aura des répercussions sur le modèle de boîte : sa hauteur ne sera pas la même sur IE et les autres (à moins que les différences ne se font que dans la largeur ?)

1) les marges n'ont jamais été destinées à positionner quoi que ce soit. Elles sont destinées... à faire des marges . Pour le positionnement, il y a beaucoup d'autres choses disponibles.

2) Et alors ? Le résultat aura au pire des espaces verticaux différents dans IE5.x. Si la lisibilité du document en dépend, c'est qu'il y a un problème de conception CSS/structure à revoir avant tout.

Laurent Denis a écrit :
1) les marges n'ont jamais été destinées à positionner quoi que ce soit. Elles sont destinées... à faire des marges . Pour le positionnement, il y a beaucoup d'autres choses disponibles.

Bien, disons que je voudrais expliquer simplement à un novice comment positionner les éléments simplement dans le flux.
Openweb n'explique pas comment placer les éléments dans le flux, il aborde la notion de flux, puis le positionnement (décalage) relatif.
Or j'aimerais parler de ce point non évoqué dans OW : apprendre à positionner simplement un objet dans le flux. Jusqu'à présent, utiliser les marges me semblaient être la solution la plus simple à utiliser et à comprendre.
De quels autres positionnements dans le flux parles-tu ?

Laurent Denis a écrit :

2) Et alors ? Le résultat aura au pire des espaces verticaux différents dans IE5.x. Si la lisibilité du document en dépend, c'est qu'il y a un problème de conception CSS/structure à revoir avant tout.

Sur IE6 la différence est présente aussi.
Bref, mon exemple très simple pour expliquer bêtement comment placer dans le flux... ne fonctionne pas à cause :
- soit d'un problème de marges fusionnées
- soit d'un modèle de boite différent

Sur cet exemple simple (je vois difficilement comment faire plus simple et plus clair), je ne vois pas ce que je pourrais revoir au niveau de la "conception CSS/structure".

Peux-tu me dépanner ?

.conteneur { 
   position: relative; 
   background-color: blue; 
   width: 100px; 
   height: 100px; 
}
.bloc { 
   position: relative; 
   background-color: yellow; 
   width: 50px; 
   height: 50px; 
   top: 40px; 
   left: 20px; 
}

@Stephan > ok, c'est ce que j'écrivais plus haut : on est obligé d'utiliser un positionnement relatif, c'est à dire un décalage, pour placer bêtement un élément dans le flux...

Cela signifie-t-il que :
- il n'est pas possible de placer les élement simplement dans le flux, sans les positionner ?
- il faudrait, en pratique, positionner tout le temps et tous les éléments en relatif, au minimum ? (ce qui changerait d'un coup beaucoup de choses dans ma vision du positionnement en flux)

Comment dire ?

"Placer", "positionner"... et "flux" sont redondants Le flux est en lui-même un mode de positionnement, auquel on peut effectivement ajouter un facteur supplémentaire avec la position relative.

Dans ce cadre, "placer" un élement un flux signifie faire agir les modes d'interaction des boîtes en bloc et des boîtes en lignes. Sans plus.

Dans ce cadre, les marges verticales fusionnent... Selon des règles qui te posent un problème, apparemment, dans ton exemple. D'où l'idée simple de recourir au padding du conteneur, propriété la plus logique en flux pour ménager cet espace vertical avant le contenu. C'est fait pour, le padding.

Je n'ai pas regardé le template d'Alsa qui est concerné. Mais peut-être que le flux n'est pas le mode de positionnement adapté dans ce cas, en effet.

Je ne sais pas quelle est ta vision du positionnement en flux. Je sais seulement n'avoir jamais rencontré de problème avec la mienne, qui est : laisser faire le flux, qui fait ça très bien sans moi
Modifié le 06 Feb 2005 - 18:16

Raphael a écrit :

- il faudrait, en pratique, positionner tout le temps et tous les éléments en relatif, au minimum ?

Non, surtout pas !


Au fait, de quel exemple ou tuto d'Alsa s'agit-il précisément ?
Modifié le 06 Feb 2005 - 18:21

Une autre solution

.conteneur { 
   background-color: blue; 
   width: 100px; 
   height: 100px; 
}
.bloc { 
   background-color: yellow; 
   width: 50px; 
   height: 50px; 
   border-top: 40px solid blue; 
   border-left: 20px solid blue; 
}

ou encore

.conteneur { 
   background-color: yellow; 
   width: 100px; 
   height: 100px; 
}
.bloc { 
   width: 50px; 
   height: 50px; 
   border: solid blue; 
   border-width: 40px 30px 10px 20px; 
}

Modifié le 06 Feb 2005 - 18:37

Laurent Denis a écrit :

Au fait, de quel exemple ou tuto d'Alsa s'agit-il précisément ?

Celui-ci :
http://www.alsacreations.com/articles/div/

Après avoir relu ton tuto, je confirme : l'utilisation du padding du conteneur est bien la solution "naturelle".

On peut trouver une référence à ce comportement dans la spé CSS 2.1 (en) :

a écrit :
If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.

* If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.

Maintenant faut réussir à comprendre ce qu'ils veulent dire par "If the top and bottom margins of a box are adjoining"... Apparement, c'est quand le top-margin d'un bloc touche le top-margin de son parent
Modifié le 08 Feb 2005 - 15:29

Xavier a écrit :
Eh, il faudrait peut-être suivre. Stéphan nous l'a déjà donné en français il y a 2 jours !

En fait non, je n'ai pas posté le même morceau ... J'ai regardé dans la traduction française, y'a moins de trucs que dans l'anglaise. Ou alors c'est parce que la française traduit la spé CSS2, là où l'anglaise est aux CSS2.1... Dans les 2.1, il est clairement spécifié que le bord supérieur du contenu va toucher celui du contenant