[résolu]Background et position float

Bonjour,

Voila la page pour visualiser le problème :

http://www.studio20.info/v2

Ma page est organisé comme cela :

la div 'header' avec logo
la div 'haut' avec noms artistes et sondage
la div 'page' avec le contenu
la div 'footer'

chaque div a un background pour former le design découpé et fait sous photoshop.

Le problème c'est que depuis que j'ai mis la propriété float dans la div 'page' pour mettre 2 div l'une à coté de l'autre (l'une bordé bleu, l'autre rose) le background ne s'affiche plus !

Qu'est ce que j'ai fais de travers ?

je vous met la css :

* {margin: 0; padding:0;}


body {
	background: #dddddd;
	font-family: Verdana, Arial, sans-serif;
}

#header {
	width: 900px;
	height: 119px;
	background-image: url(design/header.png);
}

#haut {
	width: 900px;
	height: 217px;
	background-image: url(design/haut1.png);
}

#page {
	width: 900px;
	background-image: url(design/page.png) repeat-y;
}

#sondage {
	width: 200px;
	margin-left: 620px;
	padding-top: 50px;
}

#gauche {
	float: left;
	width: 450px;
	border: 1px solid #3c79e9;
	padding-left: 70px;
}

#droit {
	float: left;
	width: 200px;
	border: 1px solid #df3ce9;
}

#footer {
	clear: both;
	width: 900px;
	height: 63px;
	background: url(design/footer1.png);
}

h1 {
	font: bold 0.9em Arial, sans-serif;
	color: #ed6a6a;
}

h1 span {
	color: #6c6a6b;
}

p {
	font-family: Century Gothic;
	font-size: 0.7em;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	color: #828181;
}

.sondage {
	margin-top: 4px;
	font: bold 0.7em Verdana, Arial, sans-serif;
	color: #fff;
}

Modifié par fixyou (09 Jun 2006 - 22:50)

Bonsoir,

Deux choses dans ton code font que ça ne marche pas :

1/ les div "gauche" et "droit" sont en float:left; , c'est à dire qu'ils sont sortis du flux et donc ils n'occupent aucune hauteur dans ta page. Le div les contenant fait donc une hauteur de 0. Il faut donc que tu donnes une hauteur à ton div page.

2/pour ton div page tu utilises :

background-image: url(design/page.png) repeat-y;

soit c'est

background-image: url(design/page.png) 

soit c'est

background: url(design/page.png) repeat-y 

la forme contractée pour les propriétés affectées au background.

Et voilà ta page à maintenant un background !
Modifié par EricLB (09 Jun 2006 - 22:35)

Edit : grillé

Logique puisque si tes blocs flottent, ils ne sont plus contenus dans #page, donc il se passe exactement la même chose que si #page était vide... Par conséquent il n'a pas de hauteur et donc le fond n'est pas visible.

L'astuce consiste à rajouter un bloc qui contient tous les autres. Je vais l'appeler #conteneur. Il suffit maintenant d'appliquer le background de #page à #conteneur. Un petit shéma parce que ça me parait pas très clair :

http://img256.imageshack.us/img256/5329/shema11kx.jpg

Evidemment il faut que les fonds des autres blocs recouvrent completement #conteneur (en gros la transparence est à bannir dans ce cas là)...

Voilà j'espère avoir été clair. Bonne chance.
Modifié par mat_chab (09 Jun 2006 - 22:48)

Merci beaucoup