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...

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

Envoyé par Strix

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

Oui, je sais

S'il n'y pas de solution, il faudra que je change la composition d'ailleurs, mais je trouverais ça dommage. D'autant que la maquette a été approuvé par le président du club.

Encore merci à toi pour ton aide !

**Strix** · 29/06/2007, 23h19

Salut.

J'vais pas avoir le tps de regarder ce soir mais je te conseille le remaniement de tes divs sans pour autant perdre la maquette

on verra ce week-end si j'ai le temps de me pencher dessus.

Bonne soirée

**gibet_b** · 30/06/2007, 09h09

Envoyé par Strix

Salut.

J'vais pas avoir le tps de regarder ce soir mais je te conseille le remaniement de tes divs sans pour autant perdre la maquette

on verra ce week-end si j'ai le temps de me pencher dessus.

Bonne soirée

Tu veux dire créer un grand div dans lequel il y aurait deux autres sous div à droite, et de autre sous div à gauche ? C'est possible ça ?

Ou alors tu veux dire qu'il faut que je revoie le découpage de ma maquette ?

Merci

**Strix** · 30/06/2007, 10h36

Salut. Tu trouveras en pièce jointe ta compo comme elle est aujourd'hui et une nouvelle compo que je te propose.

Quelques conseils :

Évite les effets ombrés sur des divs qui peuvent s'étendre, c'est pénible à gérer
Il en est de même pour les textures ! (je fais référence à ta div "info")
Étant donné qu'il va te falloir faire une grosse image pour ton fond (batiment/photo/morceau de scotch etc) Je te propose de travailler d'abord avec une image entière mais ensuite il faudra la segmenter sinon elle va avoir un poids assez conséquent)

N'hésite pas (les autres aussi d'ailleurs) à me dire ce que tu en penses, je ne suis pas infaillible (Quoi que...

).

Nom : tacompo.jpg
Affichages : 60
Taille : 77,1 Ko

Nom : nouvcompo.jpg
Affichages : 53
Taille : 80,5 Ko

A toute

**gibet_b** · 30/06/2007, 10h51

Merci de t'être penché sur mon problème, je vais regarder cela et tacher de l'appliquer.

En effet, le fond texturé est une excellente mauvaise idée

Je vais vois si je peux l'enlever.

Je te tiens au courant en milieu de semaine prochaine.

Merci encore !

**gibet_b** · 03/07/2007, 17h44

Tout d'abord milles mercis à Strix pour ses précieux conseils

Le résultat est visible ici.

Cela marche parfaitement avec Safari et FireFox.
Presque parfaitement avec IE 7 (il ne semble pas gérer le min-height).
Plus mal avec IE 5 (en plus du min-height, la transparence de l'image de fond n'est pas gérée) : quelqu'un aurait-il la solution ?

Sinon, un petit truc pour simuler un mapping en 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
<html >
<head>
<title>image maps en CSS</title>
<style type="text/css">
.image { /* bloc concernant l'image en arrière-plan */
width : 576px;
height: 432px;
background: url(monimage.jpg) top left no-repeat;
}
.zone1 { /* zone cliquable */
float: left; /* permet de donner une dimension à la balise a qui est une balise en ligne */
width : 150px;
height: 100px;
margin-left: 220px;
margin-top: 30px;
border: 1px dotted white; /* ajouté pour visualiser la zone*/
}
 
</style>
</head>
<body>
 
<div class="image">
     <a class="zone1" href="#" title="zone 1 zoom"></a>
     </div>
<p>La zone cliquable a été volontairement entourée d'une bordure pour pouvoir les visualiser.</p>
</body>
</html>

EDIT : j'ai trouvé une méthode pour le PNG sous IE 5&6, qui fonctionne très bien, qui est très simple à mettre en oeuvre et qui n'a pas été évoqué sur le forum me semble-t-il.

**Strix** · 04/07/2007, 07h16

Cool

Tu feras attention, tu n'as pas de Doctype.

Et ça Gilbert_b, c'est pas bien

**gibet_b** · 04/07/2007, 08h37

Envoyé par Strix

Tu feras attention, tu n'as pas de Doctype.

Vi, vi, je sais.

Envoyé par Strix

Et ça Gilbert_b, c'est pas bien

C'est marrant, tu n'es pas le premier à le faire, mais c'est gibet_b et non gilbert_b, à cause de mes initiales (jbb) : je ne m'appelle pas du tout Gilbert

**Strix** · 04/07/2007, 08h46

Pardon gibet_b

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

CSS

Discussions similaires

Partager

Partager