28173 sujets

CSS et mise en forme, CSS3

[RESOLU] 3 colonnes avec fonds différents

Bonjour à toutes et à tous,

J'ai eut beau chercher sur ce forum et d'autres, mais je n'ai pas trouvé la solution à mon problème.

J'ai ma page qui est divisée en 3 colonnes : celle du centre a une largeur fixe et est centrée sur la page, tandis que la gauche et la droite ont des largeurs variables.

Tout serait très simple si le fond de gauche était le même que celui de droite, mais ce n'est pas le cas...

Voici à quoi doit ressembler ma page:
upload/9816-exemplelayo.jpg

Je ne peux pas faire une image de fond qui engloberait tout car elle serait beaucoup trop lourde.

J'ai beau essayé, et je galère bien...
Quelqu'un pourrait-il m'aider svp?

Par avance merci
Modifié par coulb (25 Oct 2007 - 08:59)
Bonjour MademoiselleL,

En effet, désolé pour le manque de précisions...

En fait pour mon div central il n'y a pas de problème.

Là où ça coince, c'est pour les largeurs variables de mes div qui sont sur la gauche et la droite (l'image se répète bien en fond, no prob) : je n'arrive pas à ce qu'elles soient fluides pour coller à mon div central.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="description" content=""
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="left">gauche</div>
<div id="center">centre</div>
<div id="right">droite</div>
</body>
</html>



CSS
html, body {
	height: 100%;
	width: 100%;
}

body {
	padding: 0;
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #4a4949;
}

div#left {
	height: 400px;
	background: url(./images/bg_left.jpg) #4a4949 top repeat-x;
	float: left;
}

div#center {
	height: 500px;
	width: 1000px;
	text-align: left;
	margin-left: 50%;
	left: -500px;
	position: absolute;
	background: url(./images/bg_page.jpg) #979797 repeat-y;
	float: left;
}

div#right {
	height: 400px;
	background: url(./images/bg_right.jpg) #979797 top repeat-x;
	float: right;
}

Modifié par coulb (25 Oct 2007 - 08:58)
J'ai résolu mon problème grâce à un autre post sur ce forum...

Pour mes div de gauche et de droite, j'ai simplement rajouté une largeur de 50% et tout est nickel!

Merci
Sujet clos
Aller à