Positionnement d'un bloc dans conteneur ne fonctionne pas sous mozill

Bonjour,
je voudrais savoir comment positionner un bolc div dans un conteneur de facon à ce que ca marche ds plusieurs navigateur.

j'ai suivi le tutorial du site
qui à mon grand étonnement ne fonctionne pas dans mozilla qui decalle le conteneur et le bloc vers le bas avec margin-top: ( et non pas seulement le bloc)

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


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

Merci d'avance

Bonsoir eddy974 et bienvenue ici.

Au vu de ton code qui n'est pas affiché comme le demandent les Règles du forum, j'ai bien l'impression que tu n'as pas pu lire le sujet important, placé tout en haut du salon et qui est destiné aux débutants sur le forum.

Cette annonce n'apparaît-elle pas chez toi ?

Pour répondre à ta question, il s'agit d'un problème de "fusion de marges" (faire une recherche dans le forum).
Il faut utiliser un padding plutot qu'un margin dans ton cas.
Modifié par Raphael (03 Oct 2005 - 17:59)

désolé oui j'ai sauté une étape
mais c'est le code de votre tutorial ca voudrais dire qu'il n'est pas bon ? ou qu'il manque quelques choses " ou que j'ai encore sauté quelques choses ?
Modifié par eddy974 (03 Oct 2005 - 18:07)

eddy974 a écrit :
désolé oui j'ai sauté une étape
mais c'est le code de votre tutorial ca voudrais dire qu'il n'est pas bon ? ou qu'il manque quelques choses " ou que j'ai encore sauté quelques choses ?

En fait cela dépend de quel tutoriel tu parles.
J'ai peut-être moi aussi fait des erreurs.
En tout cas, je viens de vérifier le tutoriel sur le positionnement et ça me semble correct.

oui c'est bien celui la dans la partie intitulé "Un bloc contenu dans un autre :"

pourquoi je n'arrive pas à avoir le meme résultat que l'illustation dans mozilla ?

Bonsoir,

L'illustration du tutoriel correspond effectivement à un rendu erroné: celui d'IE Windows.

Le rendu réel obtenu dans Mozilla (ou Firefox, Opera, Safari...) est le rendu normal, conforme à CSS2.

En effet, les règles de fusion des marges CSS font qu'en l'absence de bordure autour du bloc bleu, séparant sa marge supérieure (même nulle) et celle du bloc jaune, les deux marges fusionnent et décalent l'ensemble vers le bas.

Dans IE Windows, le fait de dimensionner le bloc bleu le dote de l'état très particulier de layout, qui fausse ici la fusion des marges. Il suffit de supprimer les dimensions de ce bloc pour voir IE respecter le comportement normal.
Modifié par Laurent Denis (03 Oct 2005 - 19:05)

ok merci " petit détail cette bordure mais quelle perte de temps "
merci encore

Au fait, voudrais-tu bien modifier le code que tu as affiché dans ton premier message, comme je te l'ai signalé et conformément aux règles de ce forum ?

Merci d'avance