Discussion :

[CaLeDo]

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 :

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

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 :

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
#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.

[ptilemare]

Bonjour,

Code :

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

1
2
3
#contenu {
...
}

C'est pour les id !

Code :

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

1
2
3
.contenu {
...
}

C'est pour les classes !

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

Code :

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

<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.

[polymorphisme]

Bonjour,

Code :

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

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

Code :

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

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 ?

[CaLeDo]

Ok merci, avec le code suivant ça fonctionne bien :

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
.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 ?



Merci encore !
J.

[ptilemare]

Un truc du genre :

Code :

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

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 :

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

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

???
Bien cordialement.

[Mahefasoa]

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,