28173 sujets

CSS et mise en forme, CSS3

Marge négative en dessous d'un flottant

Bonjour,

Je cherche à comprendre pourquoi j'obtiens des résultats différents (entre IE6, Opera et FF) pour le bout de code suivant :

<style>
#cadre1 {
background-color:green;
width:400px;
height:100px;
float:left;
}
#cadre2 {
clear:left;
border:20px solid blue;
margin-top:-40px;
}
</style>
</head>

<body>
<div id="cadre1"></div>
<div id="cadre2"></div>
</body>


Dans FF, la marge négative du cadre 2 ne semble pas être prise en compte,
Dans Opera, cette marge négative est prise en compte mais le cadre 2 passe en arrière plan,
Dans IE6 tous s'affiche normalement.

Si je supprime la propriété float:left pour le cadre 1, alors j'obtiens le même affichage dans les 3 navigateurs (comme dans IE6). Pourquoi ?

merci d'avance pour votre aide Smiley smile
Modifié par mathmax (03 May 2006 - 23:28)
Bonjour,

Pour Firefox, ça doit venir de la règle "clear: left;". Avec ceci, le texte ne supporte pas d'être repoussé depuis le coté gauche. La marge négative l'amenant à hauteur du bloc vert, cette règle s'y oppose ; en la supprimant, la marge négative est prise en compte.

Puisque le but est ici, sauf erreur, de superposer les deux blocs, tu peux tester autre chose.

Utiliser une position absolue sur le premier (avec left:0 et top:0 pour le placer bien en haut et à gauche). La règle le sort du flux du document, donc il ne gêne plus le bloc 2 qui n'a plus besoin de marge négative.

(ATTENTION: top et left:0 correspond bien à l'angle supérieur gauche de la fenêtre, sans les marges par défaut des navigateurs, qui ici ne sont pas désactivées dans le body, donc, le bloc 2 apparaîtrait un peu plus bas que le bloc 1 si on ne les met pas à 0.)


body {
	margin: 0;
	padding: 0;
	}

#cadre1 {
	position: absolute;
	left: 0;
	top: 0;
	background-color: green;
	width: 400px;
	height: 100px;
	}

#cadre2 {
	border: 20px solid blue;
	}
Voici le rendu du code dans ces trois navigateurs :
upload/5688-blocs.png
Modifié par Smiley neko (04 May 2006 - 00:59)
Sujet clos
Aller à