[résolu]Ma partie de gauche en 3 parties

Bonjour,
Voila mon probleme:
j'ai un menu affiché à gauche, celui ci dans sa partie haute à une image sous la quelle s'affiche le menu, puis en deuxieme partie j'ai en principe une image de fond qui va se répliquer et enfin en derniere partie j'ai une image qui doit absolument se placer en fin de la colonne car c'est une partie du footer.
j'ai donc mis l'image replicable sur ma div principale.
Le probleme c'est que mon image ne se replique pas, si je fait un height a 100% elle se replique sur toute la page et du coup mon image qu'on va appellé guitare va etre poussé en dehors et mon menu va même "manger" mon footer.
sur mon html:

<div id="sidebar"><!-- Ceci est ma colonne latérale -->
	<ul class="menugauche"> <!-- Menu -->
	     <li><a href="">menu1</a></li>
	     <li><a href="">menu2</a></li>
             <li><a href="">menu3</a></li>
	</ul>
        <div class="guitare">guitare</div> <!-- mon image -->
</div>

sur les css :

#sidebar { /* toute la partie gauche*/
height:100%;
	float: left;
	width: 146px;
	background: url(images/replic.jpg) repeat-y;
}

.menugauche {
	height:100%;
	background: url(images/menu.jpg) no-repeat;
	list-style-type: none;
	margin : 0px; 
	padding-top : 35px;
	padding-left : 10px;	
}


.guitare {
	height:146px;
	margin : 0;
	background: url(images/guitare.jpg) no-repeat ;	
}

j'espére avoir été clair
Modifié par eagle84 (06 Feb 2008 - 16:41)

bonjour
tu peux t'inspirer de ceci qui est aussi un menu basé sur trois images dont une extensible : http://www.selenwebcreation.be/menuext/index.html

mais à mon avis ça va être compliqué de faire coïncider l'image du bas avec le footer: peut-être revoir tes images de façon à l'intégrer dans le footer.

met un lien si tu peux...

merci pour ton lien, en fait j'ai essayé mais mon modéle psd avait l'air trop compliqué donc j'ai fait en sorte de plus avoir la class guitare, donc en gros ma page est comme ca
http://img502.imageshack.us/img502/193/maquetebb7.jpg
alors le 1 c'est mon menu qui a une image de fond >> ca marche
mais en 2 il doit y avoir mon image repliqué chose qui est affiché mais le probleme c'est que ca n'arrive pas j'usqu'au footer (en fait ca depend du texte du menu, si il yen a beaucoup ca arrive) alors que je voudrait qu'il arrive automatiquement sur au footer.
j'ai poursuivi pourtant le tuto des 2 colonnes.
voici mon code:

html:

<div id="conteneur">
		<div id="header"><!-- Ceci est mon haut de page --></div>
			<div id="center">
				<div id="sidebar"><!-- Ceci est ma colonne latérale -->
					<ul id="menugauche">
						<li><a href="">lien</a></li>
						<li><a href="">lien</a></li>
						<li><a href="">lien</a></li>
						<li><a href="">lien</a></li>
						<li><a href="">lien</a></li>
						<li><a href="">lien</a></li>
					
					</ul>
				</div>
				<div id="contenu"><!-- Ceci est mon contenu principal -->
partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />
partie avec du contenu occupant le reste de la largeur
partie avec du contenu occupant le reste de la largeur
				</div>
			</div>
		<div id="footer"><!-- Ceci est mon pied de page --> Footer</div>
	</div>	

css

div#conteneur { /*le conteneur global du site, qui sera centré*/
	min-height: 100%;
	width: 920px;
	padding: 0 10px;
    margin : 0 auto;
	position: relative; /*définit les frontières de l'élément #conteneur */
	background: #333;
}

div#center {	/* Pour éviter la superposition du pied de page et du contenu : */
	padding-bottom: 73px;
	overflow: auto; /*obliger la division #center à englober les flottants dans le calcul de sa hauteur*/
	}

div#footer{ /*footer du site*/
	position: absolute;
	height: 73px;
	width: 100%;
	bottom: 0;
	background: url(images/footer.jpg) no-repeat;
}
div#header{ /*le header global du site*/
	height : 130px;
	background: url(images/header.jpg) no-repeat;
}

div#sidebar { /* toute la partie gauche*/
	float: left;
	width: 146px;
	background: url(images/replic.jpg) repeat-y;
}

ul#menugauche {
	margin: 0;
	padding: 0;
	list-style-type: none;
	background: url(images/menu.jpg) no-repeat top left;
}

div#contenu {
	float: right;
	width:774px;
	background: #265322;
}

Merci

il me semble que le tuto met height:100% à #conteneur et min-height:100% à #center (si je me souviens bien)

mais je sais que c'est pas évident d'avoir tout le hauteur remplie si on ne peut pas fixer cette hauteur.

j'ai essaye ca marche pas :s
le soucis c'est que le menu dessend selon le contenu

http://img502.imageshack.us/img502/5586/azhq9.jpg

je pense avoir trouvé une solution de rechange en mettant un arriere plan plutot dans ma classe parente vu que elle elle "sen fou" de la taille du contenu de la classe enfant.
Merci pour tout

exact, je me suis trompé.
alors voici ce que j'ai trouvé et qui marche du moins chez moi :

html, body{height:100%;}
div#conteneur { /*le conteneur global du site, qui sera centré*/
	min-height: 100%;
	width: 920px;
	padding: 0 10px;
    margin : 0 auto;
	position: relative; /*définit les frontières de l'élément #conteneur */
	background: #333 url(images/replic.jpg) 10px 0 repeat-y;
}

je met les 100% à html et body
je met l'image qui se réplique à #conteneur
à retirer de sidebar évidemment...

faut encore voir si tes images de header et footer se mettent bien car j'ai testé sans image.

PS on a trouvé la même chose ?
Modifié par verdan (06 Feb 2008 - 15:08)

exacte même chose il suffit juste de pas oublier d'ajouter un div vu qu'on va enlever le div de la partie gauche pour que le float marche.
Modifié par eagle84 (06 Feb 2008 - 15:29)

heu je sais pas, je n'ai rien enlevé ni rajouté... enfin tu verras...

Merci en tout cas