Histoire de cadres

**Unkof** · 06/07/2010, 21h31

Il y a quelques petites choses que j'ai dû rater sur les cadres.

Le cadre vert (du milieu) et le cadre bleu de droite, peuvent avoir un hauteur qui varie. La taille des cadres peut doubler en hauteur, voir tripler ou quadrupler pour le bleu.

Je voudrais que mon footer soit positionné systématiquement en dessous tel qu'il est sur l'image, quel que soit la hauteur du cadre vert ou du cadre bleu avec un espace de 10px.

Le footer peut être inclus dans le conteneur, ce n'est pas un problème, mais je ne sais pas comment "agrandir le conteneur gris en fonction du cadre vert ou bleu, pour pouvoir positionner le footer en dessous. Si j'agrandi le cadre vert par exemple, mon conteneur ne change pas

Je ne sais pas si je suis très clair ... :s

En gros, que le cadre vert ou le cadre bleu Double sa hauteur, je voudrais pouvoir positionner le footer en dessous.

Il y a certainement quelque chose que je n'ai pas compris ... si quelqu'un veut bien m'éclairer.

Est-ce possible uniquement en css, ou faut-il utiliser du javascript ?

Si je positionne le footer en relative, ca ne fonctionne pas non plus, vu que si je double la hauteur de mon cadre vert, il depasse du cadre du conteneur, et le footer se cale par rapport au conteneur.

Bref, j'essai de faire quelque chose d'impossible en css ou c'est moi qui ne sait pas faire ?

Mon code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test de cadres</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#conteneur {
position:absolute;
left: 50%;
top: 10px;
width: 980px;
height: 550px;
margin-left: -490px;
border: 1px solid #333;
background-color: #eee;
}
#cadrehaut {
	position:relative;
	left:10px;
	top:0px;
	width:960px;
	height:100px;
	border: 1px solid #000000;
	background-color: #FFFF00;	 
}
#cadregauche {
	position:absolute;
	left:10px;
	top:130px;
	width:190px;
	height:300px;
	border: 1px solid #000000;
	background-color: #FF0000;
}
#cadremilieu {
	position:absolute;
	left:210px;
	top:130px;
	width:550px;
	height:400px;
	border: 1px solid #000000;
	background-color: #00FF00;
}
#cadredroite {
	position:absolute;
	left:770px;
	top:130px;
	width:200px;
	height:200px;
	border: 1px solid #000000;
	background-color: #0000FF;
}
#footer {
	 position:absolute;
	 left:50%;
	 top:570px;
	 width:980px;
	 height:50px;
	 border: 1px solid #000000;
	 margin-left: -490px;
	 background-color: #00FFFF;
 
}
</style>
</head>
<body>
 
<div id="conteneur">Conteneur
<div id="cadrehaut">Cadre Haut</div>
<div id="cadregauche">Cadre Gauche</div>
<div id="cadremilieu">Cadre milieu</div>
<div id="cadredroite">Cadre droite</div>
</div>
<div id="footer">Footer</div>
 
</body>
</html>

**tsunamichups** · 07/07/2010, 10h48

Retire tes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
position:absolute;

et met toi au

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
float:left;
//ou
float:right;

le problème de la position absolute, s'est qu'elle sort tes div du flux de la page et coups ton conteneur ne comprend pas qu'elles sont dedans et ne prend plus en compte leur taille

je ne vois pas de meilleur solution pour faire ce que tu as montrer sur l'image

A plus

**Unkof** · 07/07/2010, 16h58

Merci tsunamichups ... ^^ .... je n'avais pas compris que les position:absolute sortaient les div du flux ....

Ca fonctionne nickel maintenant ...

**tsunamichups** · 07/07/2010, 17h25

Y a pas de quoi

a plus

Histoire de cadres

CSS

Discussions similaires

Partager

Partager