28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis en train de faire un template tableless pour joomla.
Je le teste au fure et à mesure.
Je viens de tomber sur un problème sous firefox.
J'ai un graphisme qui s'allonge en fonction de la taille du contenu.
Lorsque ce contenu est du texte, il n'y a pas de souci, le graphisme s'allonge bien par contre lorsque le contenu est un ensemble d'autres div, c'est div passe par dessus le graphisme et il ne s'agrandit pas. Ce problème se produit seulement sous firefox.

Voici un peu de code si ça peut vous aider:

HTML:
<body>

<div id="conteneur">
		
		<div id="haut_conteneur"></div>
		
		<div id="milieu_conteneur">
		
				<div id="parties">
					<div id="col_gauche"><img src="<?php echo $mosConfig_live_site; ?>/templates/templatetest/images/bt_map_g.png" />
					</div>
				
					<div id="contenu"><?php mosMainBody();?></div>
				
					<div id="col_droite"><?php mosLoadModules('right');?><br />
										<img src="<?php echo $mosConfig_live_site; ?>/templates/templatetest/images/acheter.png" />
					</div>	
				</div>
		</div>
		
		<div id="bas_conteneur"></div>

</div>

</body>


CSS:

body {
background-image:url(../images/fond_body.png);
background-repeat:repeat-x;
background-color:#cb4521;
}

#conteneur{
margin-top:0px;
margin-left:auto;
margin-right:auto;
width:930px;

}

#haut_conteneur{
background-image:url(../images/haut_conteneur.png);
background-position:top;
background-repeat:no-repeat;
height:151px;
width:930px;
}



#milieu_conteneur{
width:930px;
background-image:url(../images/milieu_conteneur.png);
background-repeat:repeat-y;
}



#bas_conteneur{
background-image:url(../images/bas_conteneur.png);
background-position:top;
background-repeat:no-repeat;
height:14px;
width:930px;
}


#parties{
margin-left:auto;
margin-right:auto;
width:890px;

}

#col_gauche{
margin-right:10px;
float:left;
width:180px;
}

#contenu{
float:left;
width:510px;
background-image:url(../images/contenu_fond.png);
background-position:top;
background-repeat:no-repeat;
}

#col_droite{
margin-left:10px;
float:left;
width:180px;
}



Si vous voulez voir le problème voici le lien: http://www.izi-pass.com/v1/
Ne tenez pas compte du problème de PNG sous IE, je ne l'ai pas encore réglé.
Merci beaucoup pour votre aide.
Bonjour,

le rajout de :


overflow:auto;


dans les propriétés CSS de #milieu_conteneur devrait régler le problème Smiley smile

Regarde cette page pour plus d'informations Smiley cligne