Problème de CSS pleine page
Bonjour,
J'ai un souci sans doute banal mais je bloque.
J'ai un container qui contient un header et un footer à dimension et position fixes et entre les deux j'ai mis un id content à dimension auto en hauteur pour occuper l'espace libre en fonction de la dimension de l'écran.
Voulant pouvoir mettre un background différent sur chaque page, j'ai crée une classe .home avec mon image en background pour la home page que j'applique à mon id content.
Le problème c'est que mon content disparaît derrière mon élément container.
Où est mon erreur?
Merci d'avance
Voici mon code
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
| </head>
<body>
<div id="container">
<div id="header">
<div id="header_logo"> <img src="images/logo_white_small2.png" width="100" height="90" alt="logo" />
</div>
<div id="title">
<img src="images/title.png"/>
</div>
<div id="selectlang">
<ul class="langSelect f16 white">
<li><a href="file:./test/index.html" title="Italia"><span class="flag it"></span>italiano</a></li>
<li style="display: none;"><a href="fra/home_fr.html" title="français"><span class="flag fr"></span>français</a></li>
<li style="display: none;"><a href="eng/home_gb.html" title="English"><span class="flag gb"></span>English</a></li>
<a href="fra/home_fr.html">TEST Home FR</a> </ul>
<!-- end .selectlang --></div>
<!-- end .header --></div>
<div class="home" id="content">
<h1 align="center">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<!-- end .content --></div>
<div id="footer">
<div id="footer_menu">
<span class="pagecourante">HOME</span> |
<a href="../test/ita/azienda.html">AZIENDA</a> |
<a href="../test/ita/metodo.html">METODO DI PRODUZIONE</a> |
<a href="../test/ita/abtm.html">ABTM</a> |
<a href="../test/ita/tour.html">TOUR VIRTUALE</a> |
<a href="../test/ita/prodotti.html">PRODOTTI</a> |
<a href="../test/ita/contatti.html">CONTATTI</a> |
<!-- end .footer_menu --> </div>
<div id="footer_address">
<h5> Az. Agr. Il Fienile - Via Commenda 28, 41013 Castelfranco Emilia (MO) Tel: +39 059 450932 - Fax: +39 059 8671113 - PI 02699720369</h5>
<!-- end .footer.adress --></div>
<!-- end .container --></div>
</body>
</html> |
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
| body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
font-family: "Gill Sans MT";
font-size: 100%;
line-height: 1.4;
z-index: auto;
}
#header {
top: 0px;
height: 100px;
width: 100%;
position: fixed;
background-image: url(images/bg_footer_black_h120.png);
background-repeat: repeat-x;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #FFF;
}
#header_logo {
z-index: 99;
height: 100px;
width: 160px;
left: 200px;
vertical-align: middle;
float: left;
text-align: center;
/*background-image: url(../images/logo_white_small2.png);*/
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
#title {
top: 0px;
height: 100px;
width: 100%;
font-family: "Gill Sans MT";
font-size: 25px;
text-align: center;
color: #FFF;
vertical-align: bottom;
float: none;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
#container {
width: 100%;
height: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#content {
background-attachment: fixed;
background-repeat: no-repeat;
height: auto;
width: 100%;
z-index: 99;
background-position: center center;
text-align: center;
vertical-align: middle;
margin-right: auto;
margin-left: auto;
background-color: #0F9;
float: left;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.home {
background-image: url(images/a0_sfumato2.jpg);
text-align: left;
vertical-align: middle;
float: left;
} |
