Afficher le pied de page en bas de l'écran

**yfchauer** · 17/07/2013, 23h46

Bonsoir à tous,

Commençant dans la réalisation de site Web,
J'ai un souci pour mettre le pied de page en bas de l'écran lorsqu'il y a peu de contenu sur la page.

J'ai suivi plusieurs solutions, mais aucune ne fonctionne dans mon cas, je suis désespéré.

Voici donc mon code HTML, ici.

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
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
97
98
99
100
101
102
103
104
105
<!DOCTYPE HTML >
<html>
  <head>
        <meta charset="UTF-8" />
        <meta >
 
        <!-- 
        <link rel ="stylesheet" href="./Css/AssoDesigner.css" />
        -->
        <link rel ="stylesheet" href="./Css/majpage.css" />
        <title>Bienvenue sur le site </title>
 
 
        <!--[if lt IE 9]>
             <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->   
  </head>
 
  <body>
      <div id="affiche"><!-- Affichage de la date et éventuellement dee la partie de la recherche -->
          <p>
                Nous sommes, Mercredi 17 Juillet 2013, il est 22h 54 min 41sec | Bonsoir ! <!-- Partie pour afficher la date -->
          </p>
 
      </div>
 
  <div id="global"><!-- Contenaire de la page -->
 
      <div id="header_main">
 
      <img src ="./Images/***********" alt="***********" title="Le logo de l'association"  width="187" height="137" /> 
      <!--<h1>*********</h1>-->
 
      <h2>Association pour la Solidarité des Frères Handicapés d'Ici et d'Ailleurs</h2>
 
      </div>
      <!-- BARRE DE  NAVIGATION HORIZONTALE------------------------>
      <div id="navhor">
 
      <ul class="level1">
          <li><a href="./">Accueil</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Historique</a></li>
          <li><a href="#">Activités</a></li>
          <li><a href="#">Projets</a></li>
          <li><a href="#">Partenariat</a></li>
          <li class="submenu"><a href="#">Galérie</a>
              <ul class="level2">
                  <li><a href="#">Vidéo</a></li>
                  <li><a href="#">Photos</a></li>
              </ul>
          </li>
          <li><a href="#">Livre d'Or</a></li>
      </ul>
 
      </div>
      <!-- FIN DE LA BARRE DE NAVIGATION HORIZONTALE -->
 
      <div id="main">
 
 
      <h1>bla************</h1>
 
      <P>
      </p>
 
	  <p>
 
	  </p>
 
		<p class="signature">Claude </p>
 
 	  
 </div>
     <div id="bas">
      <div id="footer"><!-- Début du pied de page -->
 
         <p id="lien">
             <a href="./">Accueil </a>| <a href="#">Contact </a>| <a href="#">Historique </a>|<a href="#"> Activités </a>|<a href="#"> Projets </a>|<a href="#"> Partenariat </a>|<a href="#"> Galérie </a>|<a href="#"> Livre d'Or </a> |
         </p>
 
 
      <h1>**********</h1>
      <p>Siège Social : </p>
      <p>Tél / Fax </p>
 
      Copyright &copy; 2013 All Rights 
 
 
      </div> <!-- FIN DU PIED DE PAGE --->
 
  <div id="weblink">
          <p>**********------------p>
          <p>The Ultimate funny Website by The Big One</p>
 
 
 
  </div>   
	</div>
 
  </div><!-- FIN de ID="global"         -->
 
 
  </body>
</html>

et ici le code 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
body 
{
	margin: 0;
	padding: 0;
	background: #f4f4f4;
	behavior: url(csshover.htc); /*WinIE behavior call */
}
 
 
 
#global /* Contenaire de la page*/
{
	margin: auto;
	width: 1100px;
	border: 1px solid #c96;
	margin-bottom: 0;
 
}
 
#main h1
 
{
	Color: #fb5;
	border-bottom:1px solid #fb5;
	margin:25px 0 0 5px;
	padding: 0;
 
}
 
 
#main p
{
	padding: 15px 0 5px 1em;
	margin: 0;
	font-size: 1.25em;
	color: #55f;
}
 
 
#main p.signature
{
	text-align: right;
	padding: 5px 0;	
}
 
#main a
{
	text-decoration: none;
	color: #9102a3;
}
 
#main a:hover
{
	color: #fb5;
}
 
#footer
{
	clear: both;
	position: relative;
	background: #9102a3;
	border-radius: 25px;
	text-align: center;
	color: #fff;
	font-size: 1.25em;
	margin-top: 10px;
	clear: both;
	padding: 10px 0 5px 0;
	bottom:0;
 
}
 
 
 
#footer p
{
	margin:0; padding: 0;
}
 
#footer p#lien a
{
	text-decoration: none;
	color: #fb5;
 
}
 
 
#footer h1
{
	padding: 15px 0 15px 0; margin: 0;
}
 
#weblink 
{
	background: #192bff;
	margin-top: 3px;
	text-align: center;
	color: #fff;
	border-radius: 15px;
 
}
 
#weblink p
{
	padding: 0; margin:0;
}
 
#weblink a
{
	color:#6fc;
	text-decoration: none;
	font-family: "old english text mt";
	font-size: 1.05em;
}
 
#weblink a:hover
{
	color: #dbd;
	font-family: arial;
}

Merci d'avance pour votre aide

**dev14** · 18/07/2013, 03h24

Bonjour, as tu testé la position fixed sur ton pied de page?

**Muchos** · 18/07/2013, 03h35

Il vous manque les bases de la page "pleine" (*). Voici une démo simple :

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
<!doctype html>
<html dir="ltr" lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Page pleine</title>
	<style type="text/css">
html, body {
        height : 100%;
        margin: 0;
}
#global {
        position: relative;
        min-height : 100%;      /* La page est toujours pleine */
}
footer {
        position: absolute;
        bottom: 0;
        background: gray;
}
</style>
</head>
<body>
<div id="global">
	<header>Mon titre</header>
	<main>Mon contenu</main>
	<footer>Mon pied de page</footer>
</div>	
</body>
</html>

(*): C'est moi ou il n'y a pas d'exemple dans la FAQ CSS ?

**rodolphebrd** · 18/07/2013, 09h30

Envoyé par Muchos

(*): C'est moi ou il n'y a pas d'exemple dans la FAQ CSS ?

Comment positionner un footer en bas de page ?

**yfchauer** · 19/07/2013, 00h25

Merci rodolphebrd,
L'exemple du tuto a fonctionné, mais j'ai un souci si le contenu de "contenair" est assez important, cela descend sous "footer"
Le footer ne descend pas en fonction du contenu du container.
Comment peut-on y remédier ?

**Bisûnûrs** · 19/07/2013, 08h29

L'exemple de la FAQ est censé fonctionner correctement, si ce n'est pas le cas c'est que tu l'as mal repris. Par exemple, tu as peut-être oublié de mettre un padding-bottom sur ton container.

Afficher le pied de page en bas de l'écran

CSS

Vue hybride

Discussions similaires

Partager

Partager