Background-image qui ne s'affiche pas

Version imprimable

Bonjour,

La question a déjà du être posé mais même en cherchant, je n'ai pas trouvé la solution a mon problème. En plus ça doit être tout bête ...

J'ai un code html avec les div suivant :
Code:

1 2 3 4 5 6 7 8 9 10 <div class="header"> <img src="images/logo.png" width="400" height="200"><br> </div> <div class="contenu"> </div> <div class="footer"> <img src="images/footer.png" width="300" height="250" border="0" align="right"> </div>
Et le code css correspondant :
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 #header { height:200px; width:6px; background-image: url("images/barre_data.png"); background-repeat:repeat-x; } #contenu { position: relative; min-height: 100%; height: 100%; voice-family: "\"}\""; voice-family: inherit; height: auto; } #footer { height:250px; width:4px; background-image: url("images/barre_footer.png"); background-repeat:repeat-x; position: absolute; bottom: 0; }
- J'ai bien mis le hauteur.
- Les images se trouvent bien dans le répertoire images.

Qu'est-ce qui cloche ?

Merci pour votre aide.
Johan.

03/09/2010, 08h27
ptilemare
Bonjour,
Code:

1 2 3 #contenu { ... }
C'est pour les id !
Code:

1 2 3 .contenu { ... }
C'est pour les classes !

Donc soit tu change dans ton css, soit tu met dans tes divs :

Code:

<div id="header">

etc ...

Bien cordialement.

EDIT : Petite précision : La difference entre les id et les class c'est que les id sont utilisés une seule fois dans la page. On préférera les classes pour de multiples utilisations.
03/09/2010, 11h49
polymorphisme
Bonjour,
Code:

1 2 3 <div class="header"> <img src="images/logo.png" width="400" height="200"><br> </div>
Code:

1 2 3 4 5 6 #header { height:200px; width:6px; background-image: url("images/barre_data.png"); background-repeat:repeat-x; }
Tu met dans ton en-tête une image de dimensions 400x200,
et (en dehors du problème d'identifiant et de classe évoqué plus haut)
tu dimensionne ton en-tête en 6x200 pixels, est-ce bien cohérent ?

Ok merci, avec le code suivant ça fonctionne bien :
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 .header { height:200px; background-image: url("images/barre_data.png"); background-repeat:repeat-x; } .contenu { position: relative; min-height: 100%; height: 100%; voice-family: "\"}\""; voice-family: inherit; height: auto; } .footer { height:250px; background-image: url("images/barre_footer.png"); background-repeat:repeat-x; position: relative; bottom: 0; }
Mais maintenant lorsque le contenu est inférieur à la page le footer se retrouver en milieu de page ... comment fixer le footer en bas quelque soit la taille du contenu ?

http://img819.imageshack.us/img819/7143/sanstitre2n.gif

Merci encore !
J.

Un truc du genre :

Code:

1
2
3
4
5
6
7
8
9
10
#bfooter {
height: 50px;
clear: both;
}
 
#footer {
height: 50px;
position: relative;
background:#F00;
}

Et dans ton html :

Code:

1
2
<div id="bfooter"></div>
<div id="footer"></div>

???
Bien cordialement.

06/09/2010, 09h18
Mahefasoa

Footer at the bottom?

Bonjour,

Voici une bonne référence en la matière.
http://ryanfait.com/resources/footer...ottom-of-page/

En espérant de t'avoir aidé.

Bien cordialement,

Bonjour,

Avec le code correspondant, ça fonctionne à moitié :

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
  * {
	margin: 0;
 }
 
 html, body {
	height: 100%;
 }
 
 .wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -250px;
}
 
.header {  
	height:200px;  
	background-image: url("images/barre_data.png"); 
	background-repeat:repeat-x;
}
 
.footer {
	height:250px;
	background-image: url("images/barre_footer.png");
	background-repeat:repeat-x;
	position: relative;
    bottom: 0;
}
 
.push {
	height: 250px;
}

Le footer se trouve bien en bas de page mais quand la liste des données n'est pas importante, il y a un grand blanc entre le wrapper et le footer !

07/09/2010, 07h06
Mahefasoa

Bonjour,

Peux-tu nous transmettre une capture d'écran ici? Sinon, qu'est-ce qui devrait faire office de remplissage pour la partie qui est blanche? Et enfin, ne peux-tu pas utiliser le body pour placer une image qui comblera ce "vide blanc"?

Bien cordialement,