Bonjour,

Je vous expose plus bas mon problème :

Cahier des charges :

Puisque qu'un schéma vaut mieux que de longues explications :



Donc comme on le voit, j'aimerais avoir :
  1. 3 colonnes
  2. Celle de droite et de gauche contiendront une image se repétant verticalement, elles font 50px de large et prennent au minimum 100% de la fenêtre
  3. Le contenu contiendra tous les autres éléments du site (articles, banniere, footer, menus, ...) et fait donc 100% de la page avec une marge à droite et à gauche de 50px (donc 100% - 100px plus exactement) et prend au minimum 100% de la fenêtre
  4. Les 3 colonnes doivent avoir la même hauteur


Bord gauche :


Bord droit :


Réalisation :

1. Les poupées russes

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html>
	<head>
		<style type="text/css">
                        html, body
                        {
                                margin:auto;
                                font-size:12px;
                                height:100%;
                                font-family: Verdana, Helvetica, Arial, sans-serif;
                        }
                        #page
                        {
                                background:url("../bord_gauche.png") repeat-y;
                                min-height:100%;
                        }
                        #page_bis
                        {
                                background:url("../bord_droit.png") repeat-y top right;
                                min-height:100%;
                        }
                        #contenu
                        {
                                margin:0px 50px;
                                background-color:#8B99FF;
                                min-height:100%;
                        }
                </style>
	</head>
	<body>
		<div id="page">
			<div id="page_bis">
				<div id="contenu">
					<script language="javascript">
					<!--
						for(var i=0; i<50; i++)	document.write('Blabla<br />');
					//-->
					</script>
				</div>
			</div>
		</div>
	</body>
</html>
Problèmes :
  • Sur Opera ça marche nickel, quand le texte ne fait pas arriver la fenêtre à 100%, elle y arrive quand même grâce à la propriété "min-height:100%"
  • Avec IE et Firefox, le même problème : lorsque la page dépasse les 100%, tout marche nickel mais lorsque le div contenu fait moins de 100% de la page, la 1ère colonne arrive à 100% mais pas les autres

2. Le tiercé gagnant

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html>
	<head>
		<style type="text/css">
                        html, body
                        {
                                margin:auto;
                                font-size:12px;
                                height:100%;
                                font-family: Verdana, Helvetica, Arial, sans-serif;
                        }
                        #page
                        {
                                background:url("../bord_gauche.png") repeat-y;
                                position:absolute;
                                width:50px;
                                min-height:100%;
                        }
                        #page_bis
                        {
                                background:url("../bord_droit.png") repeat-y top right;
                                position:absolute;
                                width:50px;
                                min-height:100%;
                                right:0;
                        }
                        #contenu
                        {
                                margin:0px 50px;
                                background-color:#8B99FF;
                                min-height:100%;
                        }
                </style>
	</head>
	<body>
		<div id="page">
		</div>
		<div id="page_bis">
		</div>
		<div id="contenu">
			<script language="javascript">
			<!--
				for(var i=0; i<70; i++)	document.write('Blabla<br />');
			//-->
			</script>
		</div>
	</body>
</html>
Problèmes :
  • Sur les 3 navigateurs, tant que le design prend moins de 100% de la page ça va, mais dès que ça dépasse les 100%, le div contenu descend alors que les deux div de droite et de gauche ne bougent pas.

Conclusion :

Manifestement, je ne cherche pas dans la bonne direction. Si toutefois vous voyiez une solution ou des remarques, je vous serais reconnaissant de me les faire connaître.

Merci d'avance pour votre patience et votre réponse