[CSS 2] Problème de CSS pleine page [Résolu]

balsamique · 13/07/2011, 13h39

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 html :

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
    </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 :

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
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;
}

12monkeys · 20/07/2011, 12h52

Bonjour

On peut voir une page en ligne pour constater de visu ?

Sinon ton problème c'est que l'image d'arrière plan est cachée en partie par ton header ? Alors c'est normal puisque tu lui appliques un background-attachment: fixed;. Dans ce cas l'image sera toujours positionnée par rapport à la zone de visualisation et ce quelque soit l'élément dans lequel on l'a déclaré.

Candygirl · 20/07/2011, 21h33

Hello,

Je n'ai pas vraiment pris le temps de comprendre ce que tu souhaites faire mais:

Citation:

Envoyé par balsamique

Code :

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

1
2
3
4
 
#content {
	z-index: 99;	
}

La propriété z-index n'est appliquée qu'aux éléments positionnés, ce qui n'est pas le cas ici. Tu dois rajouter un position:relative si tu souhaites qu'il soit effectif:

Code :

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

1
2
3
4
5
 
#content {
        position:relative;
	z-index: 99;	
}

balsamique · 20/07/2011, 23h11

Merci pour vos réponses.
J'ai finalement opté pour une solution différente qui permet à l'image de fond de s'adapter à la taille de l'écran (en insérant l'image dans mon body et en y appliquant une classe).

Code :

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

1
2
3
4
5
6
7
8
	<img src="images/a0_sfumato.jpg" class="bkgimage" />
.bkgimage { 
	position:absolute; 
	height:100%; 
	width:100%; 
	z-index: 1;
	bottom: 100px;
}

Maintenant j'ai deux soucis (dont un seulement en ligne que je n'ai pas en local sur mon pc):
- l'image est coupée soit en haut soit en haut (selon que je met bottom ou top à 100 px (hauteur des mes header et footer).
- en ligne j'ai une barre de défilement et un bout de body apparait sous l'image en se déplaçant vers le bas (je n'ai pas ce problème en local...).
Vous pouvez voir le code ici

Candygirl · 21/07/2011, 00h11

Ta barre de défilement est tout à fait normale puisque ton image à une hauteur de 100%+100px du top ou bottom. Pour l'éviter, tu peux ajouter un div autour de ton image que tu positionneras en absolute top:100px et bottom:100px (ce qui te permet d'avoir la surface utile). Tu placeras alors ton image en 100% de large et hauteur:

Code html :

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

	<div class="bkgimage"><img src="images/a0_sfumato.jpg" /></div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.bkgimage { 
	position:absolute; 
	bottom: 100px;
        top:100px;
        width:100%;
}
 
.bkgimage img { 
        width:100%;
        height:100%;
}

de même, tu dois virer le height:100% de ton #content et il te faudra un correctif si tu souhaites la compatibilité IE6.

Sur un écran très large ton image de est terriblement étirée ce qui n'est pas du meilleur effet... Du moment qu'elle possède un dégradé tirant sur le noir, je lui garderais ses proportions en mettant un max-width/height à 100% et en la centrant horizontalement:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.bkgimage { 
	position:absolute; 
	bottom: 100px;
        top:100px;
        width:100%;
	background:black;
	text-align:center;
}
 
.bkgimage img { 
        max-height:100%;
	max-width:100%;
}

Limite tu peux lui donner aussi un height de 100% si tu préfères une déformation plutôt qu'elle ne soit pas centrée verticalement dans le cas éventuel d'un écran plus haut et étroit.

balsamique · 21/07/2011, 00h42

merci pour tes conseils.
Je vais regarder cela de plus près.

20/07/2011, 12h52	#2
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonjour On peut voir une page en ligne pour constater de visu ? Sinon ton problème c'est que l'image d'arrière plan est cachée en partie par ton header ? Alors c'est normal puisque tu lui appliques un background-attachment: fixed;. Dans ce cas l'image sera toujours positionnée par rapport à la zone de visualisation et ce quelque soit l'élément dans lequel on l'a déclaré. __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

21/07/2011, 00h42	#6
balsamique Candidat au titre de Membre du Club Inscription : novembre 2010 Messages : 49 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 49 Points : 10 Points : 10	merci pour tes conseils. Je vais regarder cela de plus près.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email