28173 sujets

CSS et mise en forme, CSS3

Positionnement Float

Bonjour, j'ai remarqué que lorsque l'on impose un positionnement float : cela modifie les marges.
Dans mon exemple les 3 parties devraient avoir des marges de 10 pixels et je suis obligé de mettre 5 pixels pour celle de gauche.

Normal ou pas ?

Code CCS :

#body {
	margin: 0;
	padding: 0;
}
#corps {
	height: 500px;
	width: 850px;
	background-color: #FFCC00;
	margin: auto;
}
#colonnegauche {
	background-color: #D9ECFF;
	width: 150px;
	float: left;
	margin-left: 5px;/*Normalement la marge devrait être de 10 pixels comme pour les autres*/
}
#partiecentre {
	background-color: #FFFFFF;
	width: 510px;
	float: left;
	margin-left: 10px;
}
#colonnedroite {
	background-color: #CCFFCC;
	width: 150px;
	float: left;	
	margin-left: 10px;
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-align: center;
}


Code HTML :

<body id="body">
<div id="corps">
<div id="colonnegauche">
<h1>Sommaire</h1>
</div>
<div id="partiecentre">
<h1>Les programmes</h1>
</div>
<div id="colonnedroite">
<h1>Annonces</h1>
</div>
</div>
</body>
Bien entendu, tu as testé avec divers navigateurs (au hasard : IE6, IE7, Opera, Firefox), pour vérifier qu'il ne s'agissait pas d'un bug spécifique à tel navigateur, voire à telle version de tel navigateur ?

Quoi qu'il en soit, une piste : « doubled margin bug » (dit aussi « doubled float-margin bug »).
J'ai testé sur différents navigateurs :

- Opéra : respect des marges signifiées dans le code.
- Netscape : respect des marges signifiées dans le code.
- IE : effectivement non respect de la marge gauche signifiée dans le code, lorsque j'annonce margin: 10px; il me met la moitié.

Donc, quoi faire dans mon exemple pour etre calé sur ces 3 navigateurs ?
Administrateur
renato a écrit :
Donc, quoi faire dans mon exemple pour etre calé sur ces 3 navigateurs ?

Hello,

As-tu pensé à faire une recherche sur le forum avec la piste que t'a donnée Florent ?
C'est une question souvent posée, tu trouveras forcément des sujets résolus.
Modifié par Raphael (07 Feb 2007 - 13:36)
Bah, disons que j'ai fait une recherche et je n'arrive pas à comprendre comment gérer : doubled float-margin bug
Si tu peux me filer un coup de main.... Je débute en CSS.
A +
Bonjour, merci du lien j'irai voir tout ça ce soir en rentrant du boulot.
Par contre, pour mon problème de marges différentes lorsque je positionne en Float, j'ai modifié mon choix en positionnant en absolu toujours avec des marges mais là il n'y a aucun écart entre ce que j'ai mis et des navigateurs comme :
- IE.
- Firefox.
- Opera.
- Netscape.
Donc, est-ce à dire que le plus simple pour être sûr de ne pas avoir d'écart entre les valeurs de position est de plutôt positionner en absolu, voire en relatif plutôt qu'en flottant ?


#body {
	margin: 0;
	padding: 0;
	background-color: #B9DCFF;
}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
	text-align: justify;
	margin: 10px;
}
#corps {
	height: 500px;
	width: 850px;
	background-color: #FFFFFF;
	margin: auto;
	margin-top: 10px;
	border: 1px dashed #000000;
}
#titre {
	width: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #003366;
	letter-spacing: 10px;/*Espacement des lettres*/
	text-align: center;
	margin: 0;
	padding-top: 3px;
	padding-bottom: 4px;
}
#colonnegauche {
	background-color: #D9ECFF;
	width: 150px;
	position: absolute;
	margin-left: 10px;
	margin-top: 10px;
	z-index: 3;
}
#partiecentre {
	background-color: #FFFFFF;
	width: 510px;
	position: absolute;
	margin-left: 170px;
	margin-top: 10px;
	z-index: 2;
}
#colonnedroite {
	background-color: #CCFFCC;
	width: 150px;
	position: absolute;
	margin-left: 690px;
	margin-top: 10px;
	z-index: 1;
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	text-align: center;
}
#formations {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #990000;
	text-align: center;
}


Je testerai en flottant avec le lien que tu m'as fourni.

A +
renato a écrit :
Donc, est-ce à dire que le plus simple pour être sûr de ne pas avoir d'écart entre les valeurs de position est de plutôt positionner en absolu, voire en relatif plutôt qu'en flottant ?

Surtout pas en relatif (c'est pas fait pour ça).

En absolu c'est envisageable, mais il y a des désavantages sérieux (en gros, si on doit afficher du contenu après un bloc positionné en absolu, par exemple si on veut afficher un pied de page... ben ça va pas le faire).
Modifié par Florent V. (09 Feb 2007 - 17:07)
Sujet clos
Aller à