[Résolu] Problème Div milieu de page qui empiète sur Div pied de page

Question

gkgsl

21 Oct 2012 à 21:46

Bonjour,

Merci d'avance de me lire et m'aider si vous le pouvez Smiley cligne

Le problème que je rencontre est que quand ma Div "Contenu" est trop rempli; elle crée un scroll (comme prévu) mais passe par dessous ma Div "Pieddepage" qui est censé toujours rester en bas de page (quelque soit la hauteur du navigateur) ET en dessous de la Div "Contenu".

Voici un screen pour plus de compréhension :

Voici comment un aperçu de mon code HTML :


<body>
<div id="global">

	<div id="entete">
        </div>
	
        <div id="navigation">
              <ul id="tabnav">
                     <li><a href="index.php"><span class=torange>Accueil</span></a></li>
                     <li><a href="presentation.php"><span class=torange>Pr&eacute;sentation</span></a></li>
                     <li><a href="realisations.php"><span class=torange>R&eacute;alisations</span></a></li>
                     <li><a href="devis.php"><span class=torange>Devis</span></a></li>
                     <li><a href="contact.php"><span class=torange>Contact</span></a></li>
              </ul>
        </div>
	
    <div id="contenu">
        <ul class=intcontact>	
Vous trouverez ci-dessous...
	</ul>
            <ul id="tableau">
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
            </ul>
        <br>
            <ul id="tableau">
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
        </ul>
        <br>
        <ul id="tableau">
            <li>
            </li>
            <li>
            </li>
            <li>
            </li>
        </ul>
     </div>
    
    <div id="pied">@Copyright
    </div>

</div>
</body>

Et voici un aperçu de mon code CSS (à noter que le Div "global" est en position relative et la Div "pieddepage" est en position absolute), j'ai beau chercher, je ne comprends pas pourquoi le pied de page ne reste pas en dessous la Div "Contenu" même avec le scroll :


/* Général */
body {
	color: #F0E39E;
	background: #FEFEFE;
	margin-top: 0; /*supprimer les 8px de blanc au dessus de l'entete*/
	margin-bottom: 0; /*supprimer les 5px de blanc au dessous du pied*/
}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}

/* Page */
#global {
	background-image:url(images/contenu.png); /*combler le background sous le div contenu lorsqu'il ne prend pas toute la page*/
	/*background: #181A10;*/
	background-repeat: repeat;
	 

}

#entete {
	background: #FEFEFE;	
}

/* Navigation */
#navigation {
	/*background: #FEFEFE;*/
	background-image:url(images/navigation.png);
}
#navigation a {
	color: #FF6533;
}
#navigation li:hover, #navigation a:focus {
	background: #FF3300;
	color: #0000CC;
	border-bottom: 2px solid #FF3300;
}

ul#tabnav
{
   font: bold 10px verdana, arial, sans-serif;
   list-style-type: none;
   padding-bottom: 25px;
   border-bottom: 2px solid #0000CC; /*trait bleu sous menu*/
   margin-left: 10px; /* marge tout à gauche du menu*/
}


ul#tabnav li
{
   float: left;
   height: 21px;
   background-color: #0000CC; /*bleu*/
   color: #FF3300; /*ajout*/
   margin: 2px 2px 0 25px; /*espace entre bloc du menu*/
   border: 2px solid #0000CC;
}

ul#tabnav li.active
{
   border-bottom: 2px solid #FF3300;
   background-color: #FF3300; /*orange*/
   color: #0000CC;
}

#tabnav a
{
   float: left;
   display: block;
   color: #FF3300;
   text-decoration: none;
   padding: 0;
}

ul#tabnav li:hover{
	background-color:#FF3300;
}
ul#tabnav li:hover a .torange{
	color: #0000CC;
}

#tabnav li
{
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
}
#tabnav a:link, #tabnav a:visited
{
   float: left;
   font-size: 15px;
   line-height: 14px;
   font-weight: bold;
   padding: 4px 70px; 
   text-decoration: none;
/*   color: #0200;*/
}

/*.torange
{
color: #FF3300;
}*/

.tbleu
{
color: #0000CC;
}

/* Contenu principal */
#contenu {
	height : 100%;
	color: #363B29;
	background-image:url(images/contenu.png);
	background-repeat: repeat; 
}
#contenu a {
	color: #332510;
}
#contenu a:hover, #contenu a:focus {
	color: #6E5122;
}
#contenu strong {
	color: #181A12;
}

/* Pied de page */
#pied {
	background-image:url(images/pieddepage.png);
	/*background: #cbd888;*/
	color: #000000;
}


/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	margin: 0;
	padding: 0;
	height: 100%; /* Voir -> Note 1 ci-dessous */
}
body {
	padding: 0;
	/*position: absolute;
  	top: 0;*/
}
#global {
	width: 1350px;
	margin: 0 auto;
	min-height: 100%;
	position: relative;
}

/* En-tête */
#entete {
	padding: 20px 20px 15px 20px;
	margin-top: 0;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 0 20px 10px 0;
}
#entete .sous-titre {
	margin: 0 0 15px 0;
}

/* Menu de navigation */
#navigation {
	padding: 8px 0 10px 15px; /*pour gérer le trait bleu sous le menu*/
}
#navigation h1 {
	margin: 0;
}
#navigation h1 img {
	float: left;
	margin: 0 20px 10px 0;
}
#navigation .sous-titre {
	margin: 0 0 15px 0;
}

/* Contenu */
#contenu {
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 35px; /* doit faire la meme taille que la hauteur du pied de page ! */
}
#contenu > :first-child {
	margin-top: 10px;
}
#contenu p, #contenu li {
	line-height: 1.5;
}

/* Pied de page */
#pied {
	text-align: center; /* centre tout le pied de page */
	font-size: .7em;
	height: 25px;
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	padding: 10px 0 0 0;
}

#pied p {
	margin: 0 0;
}

#copyright {
	text-align: center;
	font-size: 4px;
}

.intcontact
{
	position: relative; top: 20px;
	text-align: left;
	text-decoration: underline;
	margin-left: 0;
	margin-right: auto;
	width: 50em;
	/*border-top: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	border-left: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;*/
}

.contact
{

	position: relative; top: 20px;
	text-align: left;
	margin-left: 30px;
	margin-right: auto;
	line-height: 20px;
	width: 50em;
	list-style-image: URL(images/puces.GIF);
	/*border-top: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	border-left: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;*/
}

.centre
{
	text-align: center;
}

.text
{
	position: relative; top: 20px;
	text-align: left;
	margin-left: 0;
	margin-right: auto;
	width: 50em;
}

.ecart
{
	margin-left: 160px;
}


ul#tableau
{
   font: bold 10px verdana, arial, sans-serif;
   list-style-type: none;
   padding-bottom: 25px;
   margin-top: 100px;
   margin-left: 10px; /* marge tout à gauche du menu*/
}

ul#tableau li
{
   text-align: center;
   float: left;
   height: auto;
   width: auto;
   margin: 20px 80px 20px 90px; /*espace entre bloc du menu*/
   /*border: 2px solid #0000CC;*/
}

#tableau li
{
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
}

Modifié par gkgsl (24 Oct 2012 - 02:52)

Akhilleus

22 Oct 2012 à 08:23

Salut,

Un exemple en ligne ça aide à aider.
Modifié par Akhilleus (22 Oct 2012 - 08:33)

Sylverdragon

22 Oct 2012 à 15:50

Bonjour,
Je pense que c'est le

body {
height:100%;
}

qui pose problème.

Tu as une solution ici : http://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html

gkgsl

22 Oct 2012 à 23:14

@Sylverdragon Merci, je vais regarder.

@Akhilleus Merci également, pour avoir l'exemple en concret, voici un lien :

exemple
Modifié par gkgsl (22 Oct 2012 - 23:14)

gkgsl

22 Oct 2012 à 23:23

En mettant "min-height", l'effet est pire, le bas de page ne reste plus collé en bas du navigateur et remonte.

Je viens de remarquer que le même problème est aussi présent quand le contenu ne prend pas toute la page, et que l'on fait diminuer directement la hauteur du navigateur; au bout d'un moment, le "pied de page" passe par dessus le "contenu" alors qu'il ne devrait pas...
Cela est peut être dû à l'utilisation des position relative (pour la Div Global) / absolute (pour la div pied de page), mais dans ce cas, y a t il un autre moyen de maintenir un pied de page en bas de page et pour qu'il ne passe jamais sur mon contenu ? je suppose que oui mais je ne vois pas comment. Merci beaucoup pour votre aide Smiley sweatdrop

Sylverdragon

23 Oct 2012 à 10:21

Bonjour,
En fait, il n'y a pas besoin de positionner le footer en bas de page, normalement, il va s'y mettre tout seul... S'il est bien placé dans le code html (c'est à dire à la fin).

Donc pour moi pas besoin de :

	position: absolute;
	bottom: 0; left: 0;

Si ça ne fonctionne pas, peut-être jeter un coup d'oeil à

clear:both;

mais normalement c'est plus pour les flottants...

gkgsl

23 Oct 2012 à 10:40

Sylverdragon a écrit :
Bonjour,
En fait, il n'y a pas besoin de positionner le footer en bas de page, normalement, il va s'y mettre tout seul... S'il est bien placé dans le code html (c'est à dire à la fin).

Donc pour moi pas besoin de :
	position: absolute;
	bottom: 0; left: 0;

Tu veux dire si je sors la div pieddepage de la div "Global" mais que je laisse le tout dans la balise BODY ?

Sylverdragon a écrit :
Si ça ne fonctionne pas, peut-être jeter un coup d'oeil à
clear:both;
mais normalement c'est plus pour les flottants...

J'ai essayé de mettre un clear;both dans la div pied de page mais aucun effet Smiley ohwell

Sylverdragon

23 Oct 2012 à 13:35

Dans le div global ou non, peu importe (mais oui par contre dans le body of course).
Les div 's'empilent' par défaut donc ton footer sera placé naturellement tout en bas...

gkgsl

23 Oct 2012 à 13:49

Merci, oui, il sera forcément en bas des autres div, mais le problème sera alors que s'il n'y a pas assez de contenu, il remontera et ne restera pas collé en bas de page... peut-être qu'un position:absolute résoudra le problème... je teste...

gkgsl

23 Oct 2012 à 14:18

Je crois que je m'enfonce là :S

En sortant le pied de page de la div "Global", en laissant la position:absolute et quelques arrangements, ça donne le code css suivant :

#pied {
	text-align: center; /* centre tout le pied de page */
	font-size: .7em;
	height: 25px;
	position: absolute;
	bottom: 0; /*left: 0;*/
	/*width: 100%;*/
	padding: 10px 0 0 0;
	width: 1350px;
	margin-left: auto;
	margin-right; auto;
}

Mais ça ne règle pas du tout le problème, le pied de page contenu à avoir le même comportement, c'est vraiment bizarre (en plus de vouloir laisser le background collé à gauche...). J'ai mis un aperçu ici : aperçu

Sylverdragon

23 Oct 2012 à 14:41

a écrit :
mais le problème sera alors que s'il n'y a pas assez de contenu, il remontera et ne restera pas collé en bas de page

Désolé mais je comprend pas où est le problème.
La hauteur de div globale va s'ajuster à la hauteur du contenu, donc peu importe le contenu, la div qu'il y a en-dessous sera collée au bas de la page...

Pour moi, il n'y a donc pas besoin du position:absolute...qui sera plutôt utile si il y avait une hauteur (en px/em et non en % comme c'est le cas là) défini sur div globale...

Si tu fais (on peut d'ailleurs remplacé les div par n'importe quel élément bloc) :

<body>
<div id="contenu">Ceci est le contenu.</div>
<div id="footer">Ceci est le footer</div>
</body>

Le div#footer, sans CSS, sera toujours collé en bas de la page et ce, quelque soit la taille de la div contenu...(du moment, encore une fois, qu'on lui assigne pas une hauteur fixe).

Mais honnêtement, c'est la base du positionnement (html/css), je te conseille donc de faire un petit tour du côté des tuto!
Modifié par Sylverdragon (23 Oct 2012 - 14:54)

gkgsl

23 Oct 2012 à 14:48

Oui c'est vrai, je n'avais pas vu ça sous cet angle Smiley biggrin

Je fais la modif...

gkgsl

24 Oct 2012 à 02:48

Tout d'abord, merci à ceux qui m'ont aidé !
Donc finalement, j'ai entièrement repris la structure de mon HTML et CSS pour obtenir ce que je voulais et tout fonctionne impeccablement ! Pour ceux que ça intéresse, la structure ressemble maintenant à cela :


         <body> 
		<div class="global">
			<div class="header">
			</div>
			<div class="navigation">
			</div>
		Contenu...
			<div class="push">
			</div>
		</div>
		<div class="footer">
		</div>
	</body>


* {
margin: 0;
}
html, body {
height: 100%;
}
body {
}
.global {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -35px; /* the bottom margin is the negative value of the footer's height */
position: relative;
width: 1350px;
background: #00EA17; /*vert*/
}
.header {
height: 50px;
background: #2700EA; /*bleu*/
}
.navigation {
height: 50px;
background: #00EAEA; /* bleu ciel*/
}
.footer, .push {
height: 35px; /* .push must be the same height as .footer */
}
.footer {
position: relative;
width: 1350px;
margin: 0 auto;
background: #FDFD2A; /*jaune*/
text-align: center;
}

Modifié par gkgsl (24 Oct 2012 - 02:51)

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Problème Div milieu de page qui empiète sur Div pied de page