Positionnement basic

Bonjour à tous
j'ai un petit pb de positionnement ...qui pourtant est assez basique
J'ai en fait une image header , puis 2 image de dégradé sur chaque coté (menu et menu2),et enfin au centre le contenu de mon site.
j'aimerai que les images sur les côtés se repete , en fonction du contenu principal, en d'autre therme que les dégradé des colonnes s'allonge proportionellement au contenu...

Voici mon css simplifiée
merci d'avance

/* Paramètres principaux de la page*/

html, body {
	margin: 0 auto;
	font: 12px Comic Sans MS,Tahoma,Georgia,Arial,Verdana,sans-serif;
	background-color: #2a2a28;
	position:relative;
}

/* Div conteneur principal */
div#cadre {
	position:relative;
	margin:0 auto;

	width:1000px;
	height:100%;	
}
div#cadrepage 
{
	background-color:yellow;
	position:relative;
	
	width:100%;
	height:100%;
	top:105px;

}
/* Div Bannière + menu du haut */
div#header {
	position:absolute;
	width:100%;
	height:105px;
	top:0px;		
	background-color:blue;
	
/*	background-image: url(../Img/background_1000.jpg);*/
/*	background-repeat: repeat-y;*/

	text-align:center;	
	padding-top:2px;
	

 }


div#page {
	float:left;	
	width:605px;	

	min-height:590px;	
	text-align:left;  
	
	padding:5px;	
	color:black;
	background-color: white; 	

}
 
/* Div (Menu) */
div#menu {	
	
	float:left;
	width:180px;	
	color:white;
	padding-left:20px;
	background-color:green;
	

/*	background-image: url(../Img/background_200_left.jpg);
	background-repeat: repeat-y;
*/
}
div#menu2 {	
	float:right;
	width:180px;
	color:white;
	padding-left:5px;	

	background-position: right;
/*	background-image: url(../Img/background_200_right.jpg);*/
background-color:#6633CC;
	background-repeat: repeat-y;
}

/* Div pied de page */
div#footer {
	position:fixed;
	height: 20px;	
	width:1024px;
	
	top:100%;
	

	left:50%;
	margin-left:-512px;

	background-image: url(../Img/background_1000.jpg);
	background-repeat: repeat-y;

	
	text-align:right;	
	color:white;	

	z-index:3;	
}

Bonjour,

Rien à voir, mais: ne pas utiliser d'entités HTML (è) dans le code CSS, y compris dans les commentaires CSS.

OK je vais les retirer.
Voici un screen de ce que j'obtiens.


J'ai remplacé mes img , par des couleurs , pour bien voir mes blocs.
Et ce que je veux , cest donc les bloc vert et violet qui s'étire , et ne s'arrete pas a la longueur de leur propre contenu...mais plutot au contenu global de la page centrale.
je sais pa si je suis clair...

Avez vous une petite idée ?

rockt13 a écrit :
OK je vais les retirer.
Voici un screen de ce que j'obtiens.
upload/12239-reflet.gif

J'ai remplacé mes img , par des couleurs , pour bien voir mes blocs.
Et ce que je veux , cest donc les bloc vert et violet qui s'étire , et ne s'arrete pas a la longueur de leur propre contenu...mais plutot au contenu global de la page centrale.
je sais pa si je suis clair...

Avez vous une petite idée ?

Tu cherches donc le saint graal de la mise en page CSS

Ce que je demande est impossible?

rockt13 a écrit :
Avez vous une petite idée ?

Tu peux faire une recherche du côté de la technique des colonnes factices. Le principe est qu'on ne va pas forcer nos colonnes à prendre toutes la même hauteur (seules les colonnes de tableaux, c'est à dire les «colonnes» à proprement parler, et les éléments en display: table-cell ont ce type de comportement). Par contre, on va faire du «trompe-l'oeil» en se servant du conteneur des colonnes, et d'une image de fond répétée en hauteur sur ce conteneur qui va dessiner le fond de toutes les colonnes d'un seul coup.

Maintenant que ceci est dit, j'aimerais signaler que dans la ligne de CSS suivante il y a trois bêtises:

font: 12px Comic Sans MS,Tahoma,Georgia,Arial,Verdana,sans-serif;

- un problème d'accessibilité;
- un problème de syntaxe CSS;
- un problème de design;
- et encore un problème de design.

Une version corrigée (en prenant en compte ces quatre points) donnerait:

body {
	font-size: 75%;
	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
	/* ou autre "font-family" un peu décente... */
}

Modifié par Florent V. (28 Aug 2008 - 23:40)

Olivier a écrit :
Tu cherches donc le saint graal de la mise en page CSS

Non non, là on est en largeur fixe (1000px, d'ailleurs c'est trop large d'au moins 10px...), donc ça devient très simple à gérer. Et même en largeur fluide, on peut généralement gérer assez facilement des colonnes factices (de largeur fixe en pixels, par contre).

Le saint graal de la mise en page CSS, c'est la boite décorée (coins arrondis, bordures en images, etc.), avec ombre portée translucide, extensible en largeur et en hauteur. (Et ça se résoud avec un tableau de mise en forme à 4 cellules, par exemple.)

-- Indiana CSS

Merci pour la correction de mes erreus.
Quand au colonne , je vais tout simplement redecouper mon design , en faisant une ligne horizontal , comprenant les 2 colonnes et le centre , ainsi cest l'image entiere qui s'agrandira en fonction du contenu

Ca sera bcp plus simple ^^
merci pour vos conseils , bonne soirée et à bientot