[RESOLU] Banniere avec div sur les coté de taille flexible.

BOnjour à tous, je suis sur un problème actuellement que je n'arrive pas à résoudre, je vous explique :

Voici tout d'abord mon code html :

<div id="test">
	
			<div id="cote_gauche"></div>
			<div id="centre"></div>
			<div id="cote_droit"></div>
	
	</div>

et voici mon code css

#test{height:200px; width:100%;}
#cote_gauche{ background-color:#990000; height:200px; width:50%; float:left;}
#centre{ background-color:#336699; height:200px; width:1024px; margin-left:auto; margin-right:auto;}
#cote_droit{background-color:#6600CC; height:200px; width:50%; float:right;}

Mon problème est que je n'arrive pas a placer une banniere (#centre) de taille fixe au centre de ma page avec des calques sur les cotés de taille flexible ( qui s'adpte a la résolution de mon écran ) A chaque fois mes calques se placent l'un en desous de l'autre mais pas sur la même "ligne", ce qui fait que la hauteur de mon conteneur (#test) n'est plus respecté.

Je ne trouve pas la solution

Merci d'avance pour votre aide
Modifié par alas (03 Apr 2008 - 11:09)

Ahhh j'ai enfin trouvé la solution, je vais donc vous mettre mon code HTML et CSS vous comprendrez comme ca;

C'est peut etre pas une bonne solution mais le principal c'est que ca marche

En fait j'ai modifier un peut l'architecture de mon HTML
Code :

<div id="conteneur">
			
			<div id="background">
				<div id="b_cote_gauche"></div>
				<div id="b_cote_droite"></div>
	
			</div>	
			<div id="banniere"></div>
			
	
	</div>
 

et voici mon code CSS :
Code :

#conteneur{height:200px; width:100%;}
 
#background{height:200px; width:100%}
 
#b_cote_gauche{background-color:#3300FF; width:50%; float:left; height:200px; z-index:1;}
#b_cote_droite{background-color:#6600FF; width:50%; float:right; height:200px; z-index:1;}
 
#banniere{ width:1024px; background-color:#006600; height:200px; margin-left:auto; margin-right:auto; margin-top:-200px; z-index:5; position:relative;}

Hello,

Difficile de proposer une solution sans exemple graphique du résultat voulu...

Est-ce que l'arrière-plan de #cote_gauche et #cote_droit est identique ?
Modifié par BeliG (03 Apr 2008 - 11:13)

À priori, ça n'est pas vraiment la meilleure solution, et c'est probablement une solution assez peu fiable. Mais rien de mieux à proposer sans voir le design exact à intégrer.

(C'est pas faute d'avoir averti que montrer le design était important pour tout problème d'intégration un peu avancé... )
Modifié par Florent V. (03 Apr 2008 - 11:26)

Non justement le coté gauche et coté droit sont différents, c'est pour cela que je ne pouvais pas faire un background unique (par exemple avec une couleur unique)

voici une image qui montre montre le rendu finale de ce que je voulais faire.

Si vous avez une meilleur solution je suis preneur.

Une image de fond sur body, en background-position: center top;.
L'image en question:

(Il faudra peut-être la refaire plus proprement.)

Placer correctement l'en-tête avec son image de fond ne devrait pas poser de problème.
Si on a besoin d'arrondis à l'une ou l'autre extrémité, il faudra envisager des petites div positionnées en absolu.