Bonjour.
Voilà, je tente d'accorder ensemble un div top qui a pour height 120px et un div field qui a pour height 100%. Evidemment, sous firefox en tout cas, la dimension du div field n'est pas "le reste libre de l'écran" mais l'écran (100%) + 120px. Ce qui fait que je me retrouve avec un champs field de 100%+120px.
Comment accorder ces deux oiseaux ?
Voici mon code HTML :
Code :
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
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Fragments</title>
<style type="text/css" media="screen">
@import url( style.css );
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="top">
<div id="logo"></div>
<div id="france"></div>
</div>
<div class="field">
<div id="text">
Paris change! mais rien dans ma mélancolie<br/>
N'a bougé! palais neufs, échafaudages, blocs,<br/>
Vieux faubourgs, tout pour moi devient allégorie<br/>
Et mes chers souvenirs sont plus lourds que des rocs.<br/>
Aussi devant ce Louvre une image m'opprime:<br/>
Je pense à mon grand cygne, avec ses gestes fous,<br/>
Comme les exilés, ridicule et sublime<br/>
Et rongé d'un désir sans trêve! et puis à vous,<br/>
Andromaque, des bras d'un grand époux tombée,<br/>
Vil bétail, sous la main du superbe Pyrrhus,<br/>
Auprès d'un tombeau vide en extase courbée<br/>
Veuve d'Hector, hélas! et femme d'Hélénus!<br/><br/>
Je pense à la négresse, amaigrie et phtisique<br/>
Piétinant dans la boue, et cherchant, l'oeil hagard,<br/>
Les cocotiers absents de la superbe Afrique<br/>
Derrière la muraille immense du brouillard;<br/><br/>
A quiconque a perdu ce qui ne se retrouve<br/>
Jamais, jamais! à ceux qui s'abreuvent de pleurs<br/>
Et tètent la Douleur comme une bonne louve!<br/>
Aux maigres orphelins séchant comme des fleurs!<br/><br/>
Ainsi dans la forêt où mon esprit s'exile<br/>
Un vieux Souvenir sonne à plein souffle du cor!<br/>
Je pense aux matelots oubliés dans une île,<br/>
Aux captifs, aux vaincus!... à bien d'autres encor!
</div>
</div>
</body>
</html> |
Et voici mon CSS:
Code :
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
107
108
|
html,body {
font:12px 'Lucida Grande', 'Gill Sans', Verdana, 'Trebuchet MS', Helvetica, sans-serif;
background-image: url(img/flower.jpg);
background-repeat: repeat;
height: 100%;
width: 100%;
border: none;
margin:0%;
padding:0%;
}
#logo {
background-image: url(img/paris.png);
float: left;
display: inline;
width: 46px;
height: 120px;
}
#france {
background-image: url(img/france.png);
background-repeat: no-repeat;
float: left;
display: inline;
width: 615px;
height: 114px;
}
a:link {
background-color:inherit;
color:#FF9933;
}
a:visited {
background-color:inherit;
color:#FF9933;
}
a:hover {
background-color:inherit;
color:#FF6600;
}
#menu {
background-color:transparent;
color:#000;
margin-left:20%;
margin-right:20%;
}
#text {
background-color:transparent;
color:#000;
float: left;
margin-top: 2%;
margin-left:6%;
text-align:justify;
}
#title {
background-color:transparent;
color:#FF6600;
margin-top:1%;
text-align:center;
font-variant:small-caps;
text-decoration:underline;
font-weight: bold;
font-size:16px;
}
#name {
background-color:transparent;
color:#fff;
margin-left:80%;
font-weight: bold;
}
.top {
background-image: url(img/haut.png);
background-repeat: repeat-x;
float: center;
width: 100%;
height: 120px;
}
.prinh {
background-image: url(img/prinhaut.png);
width: 1200px;
height: 15px;
}
.field {
background-image: url(img/prin.png);
background-repeat: repeat-y;
width: 1200px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.perso {
background-image: url(img/perso.png);
vertical-align: bottom;
float: right;
width: 472px;
height: 656px;
} |
J'ai tenté de les inclure dans un div "global" :
Code :
1
2
3
4
|
#global {
height: 100%;
} |
Code :
1
2
3
4
5
| <body>
<div id="global">
... ...
</div>
</body> |
Mais mon div "field" occupe toujours 100% + 120 px (120 px étant le div top).
Je pense qu'il s'agit clairement d'un problème de compatibilité entre l'utilisation d'un valeur height: 120px dans mon div "top" et d'une valeur en pourcentage dans mon div field.
J'ai tenté diverses configuration, par exemple height: 16% dans "top" et height: 84% dans "field". Mais évidemment ça ne s'ajuste pas parfaitement, il y a un espace dans les deux div.
Comment concilier des valeurs dans des mesures différentes ?
Je suis amateur, merci de m'expliciter le plus possible ce que vous voulez dire ^^!
Cordialement !
09/02/2011, 10h40
Div, height, px et % sont dans un bâteau
00
