Encore des problèmes de tailles de div liées

**gibet_b** · 29/06/2007, 16h54

Salut,

Je commence juste à utiliser les "div" et le "css", et je me heurte à un épineux problème. J'ai vu que d'autres avaient essayé de faire des choses quasi similaire, mais les solutions données ne semblent pas foncionner chez moi.

J'ai d'abord trois div les uns en dessous des autres : ContainerHaut, ContainerMilieu et ContainerBas.

Dans ContainerMilieu, j'ai également trois div = centre_gauche, centre_centre et centre_droite.

I------------------I-----------------I----------------I
I centre_gauche I centre_centre I centre_droite I
I------------------I-----------------I----------------I

Dans centre_gauche et centre_droit, j'ai deux deux div également, l'un en dessous de l'autre :
- centre_gauche_1 et centre_gauche_2 dans centre_gauche ;
- centre_droite_1 et centre_droite_2 dans centre_droite

J'aurai voulu que centre_gauche_2 centre_droite_2 s'allongent en fonction du texte contenu dans centre_centre. Est-ce possible ?

Voilà le code CSS :

Code :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
div#ContainerHaut{
	clear:both;
	}
 
div#ContainerMilieu{
	overflow:hidden;
	clear:both;
	}
 
div#ContainerBas{
	clear:both;
	}
 
div#haut_gauche{
	float: left;
	width:79px;
	height:499px;
	background-image: url('./images/gauche_haut.jpg');
}
 
div#haut_centre{
	float: left;
	width:469px;
	height:499px;
	background-image: url('./images/centre_haut.jpg');
}
 
div#haut_droite{
	float: left;
	width:284px;
	height:499px;
	background-image: url('./images/droite_haut.jpg');
}
 
div#centre_gauche{
	float: left;
	width:79px;
	background-image: url('./images/gauche_milieu.jpg');
	clear: both;
	}
 
div#centre_gauche_1{
	width:79px;
	height:165px;
	background-image: url('./images/gauche_centre_1.jpg');
	}
 
div#centre_gauche_2{
	width:79px;
	min-height: 127px;
	background-image: url('./images/gauche_centre_2.jpg');
	background-repeat: repeat;
	}
 
div#centre_droite{
	float: left;
 
	width:284px;
	background-image: url('./images/droite_centre.jpg');
	}
 
div#centre_droite_1{
	width:284px;
	height:165px;
	background-image: url('./images/gauche_droite_1.jpg');
	}
 
div#centre_droite_2{
	width:284px;
	min-height: 127px;
	background-image: url('./images/gauche_droite_2.jpg');
	background-repeat: repeat;
	}
 
div#centre_centre{
	float: left;
	min-height:292px;
	width:469px;
	background-image: url('./images/centre_centre.jpg');
	background-repeat: repeat;
	background-position: center;
	}
 
div#bas_gauche{
	float: left;
	width:79px;
	height:92px;
	background-image: url('./images/gauche_bas.jpg');
	}
 
div#bas_centre{
	float: left;
	width:469px;
	height:92px;
	background-image: url('./images/centre_bas.jpg');
	background-repeat: repeat;
	background-position: center;
	}
 
div#bas_droite{
	float: left;
	width:284px;
	height:92px;
	background-image: url('./images/droite_bas.jpg');
	}

Et le HTML :

Code :

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
<html>
	<head>
		<title>Echiquier Montlu&ccedil;onnais</title>
		<link rel="stylesheet" type="text/css" href="style_div.css">
		<link rel="stylesheet" type="text/css" href="style_other.css">
	</head>
	<body>
		<div id="ContainerHaut">
			<div id="haut_gauche">
			</div>
			<div id="haut_centre">
			</div>
			<div id="haut_droite">
			</div>
		</div>
		<div id="ContainerMilieu">
			<div id="centre_gauche">
				<div id="centre_gauche_1">
				</div>
				<div id="centre_gauche_2">
				</div>
			</div>
			<div id="centre_centre">
			</div>
			<div id="centre_droite">
				<div id="centre_droite_1">
				</div>
				<div id="centre_droite_2">
				</div>
			</div>
		</div>
		<div id="ContainerBas">
			<div id="bas_gauche">
			</div>
			<div id="bas_centre">
			</div>
			<div id="bas_droite">
			</div>
		</div>
	</body>
</html>

Merci d'avance !

**Strix** · 29/06/2007, 17h35

Tu peux donner le chemin complet de tes images s'il te plait ?
On vera mieux ce qui se passe, parce que là c'est tout blanc...

Édite ton premier post

**gibet_b** · 29/06/2007, 17h46

Je viens de mettre la page en ligne ici : http://www.bougnatware.com/repPartage/em/

Cela t'aide-t-il ? Car je ne comprends pas en quoi le chemin complet des images t'aiderait ? Sinon, c'est http://www.bougnatware.com/repPartag...omdelimage.jpg

EDIT : J'ai mis des <br> dans le div du milieu, pour allonger et faire ressortir le problème.

**Strix** · 29/06/2007, 17h48

[QUOTE=gibet_b]Car je ne comprends pas en quoi le chemin complet des images t'aiderait ?

Ben essayer de voir des div blanches c'est assez pénible

**gibet_b** · 29/06/2007, 17h51

Envoyé par gibet_b

Car je ne comprends pas en quoi le chemin complet des images t'aiderait ?

Ben essayer de voir des div blanches c'est assez pénible

Veux-tu que j'édite mon premier message en ajoutant le chemin complet, ou l'adresse de la page que je t'ai donné te suffit à te rendre compte du problème ?

Merci de t'intéresser à mon problème.

**Strix** · 29/06/2007, 17h59

Heu c'est bon par contra va me falloir un peu de temps, la compo de ta page est... hum... coriace...

Encore des problèmes de tailles de div liées

CSS

Vue hybride

Discussions similaires

Partager

Partager