28173 sujets

CSS et mise en forme, CSS3

Bonjour

je suis actuellement entrain de coder un site mais j'obtiens un résultat au niveau du contenu que je ne comprend pas...

en effet j'ai cela comme code :

			<div class="cadre_medium">

					<div id="contenu_left">blablablablablab
bkllbalbalbalbalbalablabalaalalalbalbalalblbalbalbalabalbalbalalbalbal
bbllbalbalbalbalbaalbalbalbabbaallabalblbaalblbalbalbalbalbalbalb</div>
					
					<div id="contenu_right">
					
						<div id="cadre_essais"></div>
						
						<div id="cadre_coeur"></div>
						
						<div id="cadre_select_header"></div>
						
						<div id="cadre_select_medium"></div>
						
						<div id="cadre_select_footer"></div>
						
					</div>
				
			</div>


et le CSS suivant :

#contenu_left
{
	padding-left:70px;
	float:left;
	height:auto;
	width:400px;
}

#contenu_right
{
	width:400px;
	float:left;
	height:auto;
}

#cadre_essais
{
	background-image:url('../../images/cadre_essais.jpg');
	background-repeat:no-repeat;
	height:114px;
	width:388px;
}

#cadre_coeur
{
	background-image:url('../../images/cadre_coeur.jpg');
	background-repeat:no-repeat;
	height:122px;
	width:388px;
}

#cadre_select_header
{
	background-image:url('../../images/cadre_select_header.jpg');
	background-repeat:no-repeat;
	height:65px;
	width:388px;
}

#cadre_select_medium
{
	background-image:url('../../images/cadre_select_medium.jpg');
	background-repeat:repeat-y;
	width:388px;
}

#cadre_select_footer
{
	background-image:url('../../images/cadre_select_footer.jpg');
	background-repeat:no-repeat;
	height:41px;
	width:388px;
}

.cadre_medium
{
	background-image:url('../../images/cadre_medium.jpg');
	background-repeat:repeat-y;
	font-family:Verdana, Arial, Tahomas;
	font-size:12px;
	width:950px;
}


mais l'image de "cadre_medium" ne se repète pas en Y ce qui fais que le contenu de "contenu_left" et "contenu_right" passe par dessus...

(c'est bon sous IE7 et IE6, cela le fait que chez FF... :'( ) quelqu'un peut-il m'aider ?

Merci.

Au revoir
Modifié par newsmatique (07 Jul 2007 - 01:53)
Voici une image pour mieux comprendre :

http://img176.imageshack.us/img176/6942/screenam0.th.png

sachant que les deux blocs blanc sont tous les deux les mêmes juste les premier est encadré par :

<div id="contenu">


avec un "padding-top" et le deuxième par

<div id="footer">


avec un "text-align"

je rappel que cela ce fait que sur FF et Opéra... IE7 et IE6 son niquel !

Je vous remercie.
Au revoir
Modifié par newsmatique (07 Jul 2007 - 13:12)