Probleme de Hauteur

Bonjour à tous ! je suis nouveau sur le forum !

En général j'embête personne et je trouve les solutions dans mon coin , mais la j'aurais besoin d'un petit coup de main !
Je sens que je vais me faire taper sur les doigts , mais j'ai cherché pendant un moment sur le net et j'ai trouvé aucune solution
correspondant à mon problème.

voici la page de mon probleme : http://www.mint-production.com/temp/

je voudrais comme résultat final avoir un cadre ombré qui entoure le site.
une ombre a gauche (png transparent qui se repete dans la hauteur) , une ombre a droite (png transparent qui se repete dans la hauteur)
une ombre en bas avec les coin decoupé aussi (png transparent qui se repete dans la largeur)
Bref l'histoire de trasparence avec IE6 est reglée, et l'ombre du bas ne me posera pas de probleme , enfin jespere pas lol ...


Jai donc une DIV qui englobe le tout (conteneurInterface):

une DIV pour lombre gauche en background , ensuite une DIV pour le site , et enfin une div pour l'ombre droite
et j'aimerais que les DIV OMBRES ... suivent la taille de la DIV CONTENU en hauteur , en gros si le site s'agrandi en hauteur , alors les DIV OMBRE doivent suivre

Avant je nutilisais que les <table> donc pas de souci , mais la avec les DIV .. pfiou galere les histoires de HEIGHT

Voici le code de ma CSS principale : ( adresse : http://www.mint-production.com/temp/styles/ )

html{
	height:100%;
}

body{
	background:url(../imgs/ap.gif);
	margin-top:0px;
	margin-right:0px;
	margin-left:0px;
	margin-bottom:0px;
	height:100%;
}

#global{
	width:100%;
	background-color:#CC9900;
	height:100%;
}

#conteneurInterface{
	width:994px;
	background-color:#FF0000;
	overflow:inherit;
}
#content{
	width:972px;
	background-color:#FC5687;
	float:left;
	height:auto;
}

OMBRE POUR IE :

#ombre_gauche{
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./imgs/ombre_gauche.png', sizingMethod='scale');
	zoom: 1;
	float:left;
	width:11px;
}

#ombre_droite{
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./imgs/ombre_droite.png', sizingMethod='scale');
	zoom: 1;
	float:left;
	width:11px;
}

OMBRE POUR LES AUTRES NAV :

#ombre_gauche{
	background:url(../imgs/ombre_gauche.png);
	background-repeat:repeat;
	background-color:#33FFFF;
	float:left;
	width:11px;
}


#ombre_droite{
	background:url(../imgs/ombre_droite.png);
	background-repeat:repeat;
	width:11px;
	float:left;
}

Merci d'avance a ceux qui se pencheront sur mon probleme !
Modifié par Gust (17 Jun 2007 - 17:19)

paf, un coup sur les doigts ! Effectivement ca devait arriver, il faut mettre ton code dans la balise prévue à cet effet (voire le bouton [code], quand tu édites, ton message, il est pas trop tard tu peux encore réparer ton erreur).
Modifié par zzzazzz (17 Jun 2007 - 16:25)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Maintenant,

Compte-tenu du fait que ton bloc rose que tu veux "ombrer" à une largeur fixe, je te conseilles de mettre en arrière plan de ce bloc une image répétée verticalement de 1px de haut et de n px de large (n=largeur de ton bloc le plus près du contenu, cad #content dans ton cas). Cela règle l'ombré droite gauche, voire aussi technique des colonnes factices sur Pompage.

Pour le haut. Tu peux mettre un background sur le div parent le plus proche (#conteneurInterface) et pour le bas, tu peux éventuellement utiliser la div suivante s'il y en a une, genre #footer.

C'est une technique simple, mais qui fait ses preuves.

Sorry !!

Voila c'est arrangé !