28173 sujets

CSS et mise en forme, CSS3

Problème d'espacement de div.

Bonjour,
Dans l'image ci-dessous est expliqué ce que je veux obtenir via ma feuille css.
J'ai essayé avec les paramétre de padding et de margin mais je n'arrive pas à un résultat satisfaisant. voir ici : http://www.izi-pass.com/v1/

http://bondon.src.free.fr/alsacreation/exemple.jpg

Voici mon code html :
	<div id="milieu">
			
			<div id="gauche">&nbsp;gauche</div>
			<div id="centre">&nbsp;centre</div>
			<div id="droite">&nbsp;milieu</div>
			
		</div>


Voici mon code css :

#milieu{
margin-left:0px;
margin-right:0px;
width:930px;
overflow:auto;
background-image:url(../images/ff/milieu_conteneur.png);
background-repeat:repeat-y;
}

#gauche{
margin-left:15px;
float:left;
width:180px;
height:500px;
background-color:#0000FF;

}

#centre{
margin-left:15px;
float:left;
width:510px;

}

#droite{
margin-left:15px;
margin-right:15px;
float:left;
width:180px;
height:500px;
background-color:#0000FF;
}


J'aimerai que mais 3 div soient centrer et avec des marges égales entre elle et par rapport au bord de la div dans laquelle elles se trouves.
PS: il y a une différence aussi entre IE et (Firefox,Safari)
Merci pour votre aide.
Modifié par NO73 (29 Jul 2007 - 15:22)
Salut,

Et si tu positionnais #milieu en position relative et tes 3 divs en position absolute ?
Modifié par papyjo (28 Jul 2007 - 17:23)
Bonjour,

Il y aussi la solution en float ...
	   <style type="text/css">
#milieu{
width:930px;
overflow:auto;
background-image:url(../images/ff/milieu_conteneur.png);
background-repeat:repeat-y;
border: 1px solid black;
}

#gauche{
margin: 0 15px 0 15px;
width:180px;
height:500px;
background-color:#0000FF;
float:left;
display: inline;/* pour ie6 double margin bug */
}

#centre{
margin: 0 210px 0 210px;
height:500px;
background: lime;
background-repeat:no-repeat;
}

#droite{
margin: 0 15px 0 15px;
width:180px;
height:500px;
background-color:#0000FF;
float:right;
display: inline;/* pour ie6 double margin bug */
}
       </style>
   </head>
 <body>
	<div id="milieu">
			<div id="gauche">&nbsp;gauche</div>
			<div id="droite">&nbsp;milieu</div>
			<div id="centre">&nbsp;centre</div>
		</div>
</body>
Problème résolu, j'avais beau utiliser toutes vos solutions, j'avais toujours une différence de marge sur IE6.C'est la ligne 

display: inline;/* pour ie6 double margin bug */


qui a résolu mon problème.
merci à tous.
Décidement je ne m'en sort pas avec mes div,
Cette fois j'ai un problème de padding.
J'ai une zone destiné a recevoir du contenu avec un fond image.
Je ne veux pas que le texte de contenu touche les bords donc j'ai mis cette ligne dans mon css:

#contenu{
padding:15px;
width:510px;
background-repeat:no-repeat;
background-image:url(../images/ff/contenu_fond.png);
}


Ce padding n'a pas l'air de bien fonctionner car il décale le texte en dehors de la div et il déplace même un autre div sous IE.

Voir: http://www.izi-pass.com/v1/
Re,

Pourquoi pas: 

#contenu p{
margin:15px;
}


Comme ça tu laisses les dimensions de #contenu inchangées Smiley biggrin
merci pour la réponse, ça marche nikel sous IE, j'ai plus le décalage de ma div par et les marge sont bien de 15px en haut, en bas, à droite et à gauche par contre sous safari et firefox j'ai l'impression que le margin est appliqué seulement à droite et à gauche mais pas en haut...bizare..
Re,

Je pense que pour FF et opera, le margin top et bottom ne rentre pas en ligne de compte pour le calcul de la hauteur du bloc, le padding oui, donc avec un padding top et bottom de 15px ce devrait rentrer dans l'ordre ou encore plus simple un overflow: hidden (auto) sur ton bloc contenu devrait régler l'affaire pour les deux navigateurs Smiley cligne

Si Florent V ou autres érudits pouvaient passer par là Smiley biggrin
Modifié par ghost (30 Jul 2007 - 23:14)
Merci beaucoup, le overflow:auto dans le bloc contenu à résolu le problème.
En revanche, la padding-top et bottom de 15px ne change rien sur safari et firefox.

merci encore...
Sujet clos
Aller à