[Résolu]Probleme de mise en page

Bonjour,
j'essaie de faire une mise en page avec :
- un bandeau
- un element "central"
- un pied de page

L'element central serait divisé en deux : à gauche le contenu en lui meme et à droite un menu.

Actuellement mon code donnerait en gros ca :

<div id="page">
		<div id="bandeau">
			Joli bandeau !	
		</div>		
		<div id="milieu">			
			<div id="droite">menu droite!				
			</div>
			<div id="contenu">
				Contenu avec du blablablablabla
			</div>						
		</div>
		<div id="piedpage">
			blabla du pied de page
		</div>


	</div><!-- FIN PAGE -->

avec en comme css :

#page {
	width : 800px;
	margin : auto;
}

#bandeau {
	background-image : url(bandeau.png);
}

#milieu {
	background-image : url(milieu.png);
}

#contenu {		
	float : left;	
	border : 1px solid;
	width : 620px;
}
#droite {	
	float : right;
	border : 1px solid;
	width : 140px;	
}

#piedpage {	
        background-image : url(piedpage.png);	
	clear : both;
}

Tel quel, l'image de fond de #milieu disparait et #contenu et #droite recuperent la couleur de fond de la page.

Existe il un moyen de remedier à ça ou faut il que je cherche dans une autre direction? Par exemple supprimer #milieu et mettre des images de fond appropriées sur #contenu et #droite?
Modifié par Nbdeb (09 Feb 2006 - 22:15)

Bonjour

Normalement il n'y a aucune contre-indication au fonctionnement correct de ta page si ce n'est le non-présence de paragraphes <p> pour encadrer ton texte.

Essaye d'intégrer ton pied de page à ton #milieu pour voir s'il ne s'agit pas d'un problème dû aux floats.
As-tu vérifié le lien relatif vers l'image de fond de ton div #milieu ?
Essaye de fixer une largeur à ton #milieu, sait-on jamais. En plus, vu qu'elle est fixe, elle sera facile à déterminer.

teste comme ça

css:

#contenu {		

	

	border : 1px solid;

	width : 620px;

}

#droite {	

	float : left;

	border : 1px solid;

	width : 140px;	

}

html:

<div id="milieu">			

			<div id="contenu">

				Contenu avec du blablablablabla

			</div>		
                        <div id="droite">menu droite!				

			</div>				

		</div>

En essayant ta solution Phillipe le je me retrouve avec #droite à gauche et le texte de #contenu qui "coule" le long de #droite.

Il s'agit effectivement d'un probleme lié au float (comme tu le suggeres Deeder).

J'y suis allé pas à pas et en fait faisant:

<div id="milieu">			
			<div id="contenu">
				Contenu avec du blablablablabla
			</div>		

                        <div id="droite">menu droite!				
			</div>	
			<div style="clear:both;">&nbsp</div>
</div>

le div de fin (celui avec la propriete clear à both) règle mon probleme, mais je ne suis pas sur que ca soit très "propre" comme procédé.

Merci du coup de main
Modifié par Nbdeb (09 Feb 2006 - 22:53)

C'est ce que je pensais : tu n'as aucun clear qui permet de délimiter la hauteur de #milieu, les floats n'étant pas pris en compte.

Essaye d'appliquer ton background à ton #page et de supprimer le #milieu tout en gardant les floats. Ensuite, les styles de ton header et de ton footer viendront se superposer au style de #page, ce qui donnera au final le même résultat...

Ce qui donnera :

<div id="page">

		<div id="bandeau">
			Joli bandeau !	
		</div>		
			
		<div id="droite">menu droite!				
		</div>
		<div id="contenu">
			Contenu avec du blablablablabla
		</div>						

		<div id="piedpage">
			blabla du pied de page
		</div>

</div><!-- FIN PAGE -->

#page {
	width : 800px;
	margin : auto;
	background-image : url(milieu.png);
}

#bandeau {
	background-image : url(bandeau.png);
}

#contenu {		
	float : left;	
	border : 1px solid;
	width : 620px;
}

#droite {	
	float : right;
	border : 1px solid;
	width : 140px;	
}

#piedpage {	
        background-image : url(piedpage.png);	
	clear : both;
}