28173 sujets

CSS et mise en forme, CSS3

Bakground incomplet avec IE6 >> RESOLU

Bonjour

Je cherche à afficher intégralement une image de fond qui se répète à l'arrière d'un menu du coté gauche de ma page en s'adaptant à la hauteur du texte de la partie centrale.
J'ai essayé de piocher de ci de là des idées pour obtenir le design souhaité.
Le résultat est très satisfaisant pour IE7, Firefox et Opera mais pas sous IE6 !!
J'ai essayé plein de possibilités mais rien n'y fait ! Je séche...
Si quelqu'un a une idée, je suis preneur...
Merci beaucoup.

La maquette est visible ici :

Voici le code HTML :

<body>
<div id="entete1">
	entete
</div>
<div id="entete2">
	<div id="entete3">
	</div>
</div>

<div id="conteneur">
	<div id="groupe">
		<div id="gauche">
			<ul class="menugauche">
			<li><a href="">Accueil</a></li>
			<li><a href="">Recherche</a></li>
			<li><a href="">Ventes</a></li>
			<li><a href="">Locations</a></li>
			<li><a href="">Estimer un bien</a></li>
			<li><a href="">Contacts</a></li>
			<li><a href="">Liens</a></li>
			</ul>
	  </div>
		
		<div id="droite">
			<p>test</p>
		</div>
		
		<div id="centre">
			<p>partie centrale</p>
			</div>
		
		<div class="clear">
		</div>
	</div>
</div>

<div id="pied1">
</div>
<div id="pied2">
	pied de page
</div>
</body>


Et voici le code CSS :

* {
	margin:0px;
	padding:0px;	
}

/* Balises HTML */

html, body {
	font-family:"Trebuchet MS", verdana; 
	font-size:1em;
	}

/* div  */

#entete1 {
	display: block;
	height: 80px;
	color: #fff;
	text-align: center;
	padding: 5px;
	background-image: url(../z_images/degrade_haut.gif);
	background-color: #9D0C0F;
	background-position: top left;
	background-repeat: repeat-y;
}

#entete2 {
	display: block;
	height: 40px;
	color: #fff;
	text-align: center;
	background-image: url(../z_images/fond_bandeau1.jpg);
	background-repeat: repeat-x;
	background-position: top left;
	background-color: White;
}

#entete3 {
	display: block;
	height: 40px;
	width: 186px;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 115px;
	left: 0px;
	background-image: url(../z_images/coinhaut.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

#conteneur {
	position:relative;
	display:block;
	border-left:160px solid White;
	border-right:160px solid White;
}

#groupe {
	display: block;
	margin-left: -160px;
	margin-right: -160px;
	margin-top: 23px;
	padding: 0px;
	background-color: White;
	background-image: url(../z_images/fond_menu.jpg);
	background-repeat: repeat-y;
	background-position: top left;
}

#gauche {
	float: left;
	position: relative;
	width: 160px;
	left: 0px;
	background-image: url(../z_images/fond_menu.jpg);
	background-repeat: repeat-y;
	background-position: top left;
}

#droite {
	float: right;
	position: relative;
	width: 150px;
	right: 0px;
	background-color: White;
}

#centre {
	margin-left: 160px;
	margin-right: 160px;
	position: relative;
	display: block;
	height: 1%;
	background-color: White;
	padding: 15px;
}


#pied1 {
	display: block;
	height: 38px;
	color: #fff;
	text-align: center;
	background-image: url(../z_images/fond_bandeau2.jpg);
	background-repeat: repeat-x;
	background-position: top left;
}

#pied2 {
	display:block;
	height:30px;
	color:#fff;
	text-align:center;
	padding:5px;
	font-size:1em;
	background-image: url(../z_images/degrade_haut.gif);
	background-color: #9D0C0F;
	background-position: top left;
	background-repeat: repeat-y;
		}

#cointhaut {
	position: absolute;
	top: 115px;
	left: 0px;
	/*display: block;*/
}		
		
		
/* class */

.clear {clear:both;}


Merci !!
Modifié par Blue James (11 May 2007 - 14:17)
Bingo !!!
J'étais parti dans cette idée mais pas en appliquant le fond répétitif sur body...
Et ça marche... Smiley biggrin

Merci beaucoup....
Sujet clos
Aller à