pied de page qui remonte en haut...

**gazelle** · 28/04/2008, 10h22

Bonjour,

Voilà, sur mon site, je possède un entête et un pied de page.
Entre les deux, je possède un menu a gauche et après, j'ai le corps du site à la droite.

petit schéma :

****** entete *******
menu..............corps
menu..............corps
menu..............corps
menu..............corps
******* pieds ********

Je dois avoir un problème dans ma css puisque le pied du site remonte et se place juste en dessous de l'entête. Ainsi le menu et le corps passe au dessus.
Et j'obtiens ceci :

****** entete *******
menu pieds corps
menu..............corps
menu..............corps
menu..............corps
menu..............corps

Comment faire pour qu'il y ait une hauteur minimum entre l'entête et le pied et pour que l'auteur s'ajuste automatiquement dans le cas où le contenu dans le corps du site dépasse cette hauteur?

J'utiliserais bien height bien sûr mais dans le cas où le corps dépasse cette hauteur, ça dépasserais quand même... Et je ne pense pas que ce soit un problème de height, car même si je met une hauteur au menu ou au corps, ca dépasse quand même...

Avez vous une idée?

Merci d'avance.

**Er3van** · 28/04/2008, 10h58

A mon avis tu as du écrire ça dans ton fichier html :

<div id="entete"> Ton Entete </div>
<div id="menu"> Mon Menu </div>
<div id="pieddepage"> Mon Pied de Page </div>
<div id="corps"> Mon Corps </div>

Sinon y a pas de raison pour que ça fasse ça.

Enfin si, y a d'autres raisons, notamment si t'as fait un mix entre positionnement relatif et absolu....

En tout cas, fait voir ton code html et ton css associé qu'on puisse t'aider.

**gazelle** · 28/04/2008, 11h10

Non je n'ai pas fait ça.

voici mes div tels que je les ai mis dans mon fichier html :

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
 
<html>
 
<head></head>
 
<body>
<div id="entete"></div>
 
<!-- Menu verticale juste après lentete -->
<div id="backmenu">
<ul id="menu1">
<!-- lien1 lien2 ,..... -->
</ul>
</div>
 
<!-- Menu de gauche -->
<div id="menu">
</div>
 
<div class="corps">
Corps du site
</div>
 
<!-- Re menu vertical, cest le même -->
<div id="backmenu2">
<ul id="menu12">
<!-- lien1 lien2 ,..... -->
</ul>
</div>
 
<div class="foot"></div>
</body>
 
</html>

Et voici ma 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
 
body
{
margin-left: auto;
margin-right: auto;
width:800px;
background-color:#D0E3FA;
}
 
#entete
{
background-image:url("images/reds.gif");
text-align:center;
width:750px;
height:160px;
margin-top:1%;
margin-bottom:1%;
}
 
#backmenu, #backmenu2
{
background-image:url("images/barre-haut.gif");
width:797px;
height:43px;
}
 
#menu1, #menu12
{
margin:0;
padding:0;
list-style:none;
text-align:center;
}
 
#menu1 li, #menu12 li
{
display:inline;
margin-right: 20px ;
color:blue;
}
 
#menu1 li a, #menu12 li a
{
padding: 4px 20px;
color:blue;
font-family:georgia, "Times New Roman", Times, serif;
font-weight: bold;
font-size:13px;
line-height:2.6em;
text-align: center;
text-decoration:none;
}
 
#menu
{
border:1px solid #000000;
float:left;
width:25%;
height:400px;
}
 
.corps
{
border:1px solid #000000;
float:right;
width:70%;
height:400px;
}
 
.foot
{
margin-top:15px;
text-align:center;
}

Je n'ai aucun attribut position dans ma css, et moi non plus je sais pas, je sèche un peu sur le positionnement des div en css...

**Er3van** · 28/04/2008, 11h22

C'est bien d'avoir simplifier le code html, mais pour tester c'est moins pratique lol.

A mon avis c'est juste le "float:left;" que t'as oublié pour le footer.

**gazelle** · 28/04/2008, 11h29

Oui désolé... ^^

Je te remercie c'était bien ça, mais je ne comprends pas pourquoi il faut mettre cette attribut "float:left;" on essaye pas de le mettre a gauche pourtant...

Est-ce à cause de mon menu sur lequel j'ai fait un "float:left;" ?

Je comprends pas trop...

**Candygirl** · 28/04/2008, 11h43

Bonjour,

Tu dois ajouter la propriété clear à ton footer qu'il viennet se positionner au-dessous des flottants:

Code :

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

1
2
3
4
5
6
.foot
{
margin-top:15px;
text-align:center;
clear:both;
}

**Er3van** · 28/04/2008, 11h45

Il me semble que c'est par rapport au flux.
Si tu ne précise pas le float, il se met un peu n'importe où, là où il y a de la place, alors que si tu précise le float, left ou right peut importe, il va le mettre dans le flux à la suite.

J'suis pas vraiment sûr de ce que j'annonce, mais il me semble que c'est ça l'idée. QQun viendra corriger si c'est une absurdité de toute façon ^^

**gazelle** · 28/04/2008, 11h59

Ok, les deux méthodes fonctionnent nikel, merci...

**Er3van** · 28/04/2008, 12h08

Ca revient au même, mais c'est vrai que d'un point de vue logique, "clear:both" c'est prévu pour les footers, donc c'est à privilégier. J'avais juste zappé ^^'

pied de page qui remonte en haut...

CSS

Discussions similaires

Partager

Partager