28173 sujets

CSS et mise en forme, CSS3

[Résolu] position de Pied de page

Pages :
Bonjour,
j'expose mon problème, j'aimerais que mon pied de page soit coller au bas de la page et ceci même avec très peu de contenu sur la page comme il est indiqué ici : http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
Le problème c'est que j'utilise un margin-top négatif pour placer mon texte de contenu a l'endroit souhaiter..

Voici mon code source :

Xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Guizmo Story</title>
<meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-15" />
	  <link rel="stylesheet" type="text/css" href="styles.css"
	  media="screen" />
</head>
<body>

<div id="global">




    <div id="header">

	</div>
	
	
	
	


	<div id="contenu">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
	It has survived not only five centuries, but also the leap into electronic typesetting, 
	remaining essentially unchanged. It was popularised in the 1960s with the release of 
	Letraset sheets containing Lorem Ipsum passages, 
	Letraset sheets containing Lorem Ipsum passages, 
	and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</div>	  
		  
		  

 
    <div id="footer">
	<div class="copy">Copyright</div>
	</div>
	<div id="bgbas">

<div id="imgbas">
</div>
</div>
</div>
</body>
</html>



Css

Body {
background-image:url(images/bg.png);
margin : 0 auto 0 auto;
height:100%;
}



#global {
background-image: url(images/corp.png);
background-repeat : repeat-y;
min-height: 100%;
}




#header {
width : 567px;
height : 316px;
background-image:url(images/header.png);
background-repeat : no-repeat;
}

#contenu {
border:1px solid black;
margin-top:-60px;
margin-bottom: 20px;
width: 460px;
margin-left: 60px;
}


#footer {
clear : both;
background-image:url(images/footer.png);
width: 567px;
height:125px;
}


#imgbas {
background-image:url(images/corner-bas-gauche.png);
width: 214px;
height:190px;
}
#bgbas {
background-image:url(images/bg-bas.png);
background-repeat: repeat-x;
height:190px;

}






.copy {
text-align:center;
padding-top:35px;
}


Merci d'avance pour vos réponses.
Modifié par Romaric (13 Jun 2007 - 00:11)
Hello,

Qu'est-ce qui pose problème avec le margin-top négatif ?
On peut voir la page en ligne ?

Romaric a écrit :
Merci d'avance pour vos réponses.

Sauf que tu n'as pas posé de question. Smiley cligne
J'ai tout en local pour le moment,
a vrai dire j'ai utilisé un margin-top négatif sur le contenu afin qu'il empiete sur le bas du header, donc en suivant le tuto sur le lien que j'ai donner plus haut, ça fonctionne si j'enleve le margin-top:-60px; et ne fonctionne plus si je le remet, a première vu ca me met une marge de 60px en dessous de mon footer
(c'est à dire en dessous de ma div <div id="imgbas">)
Hmm... toujours pas compris.

Tout fonctionne sans marge négative, mais si tu fais remonter ton bloc de contenu de 60px vers le haut avec une marge négative tu te retrouves avec un vide de 60px entre le bloc de contenu et le pied de page ?

Je vois pas trop là.

Romaric a écrit :
J'ai tout en local pour le moment

Ben voilà, c'est le moment de sortir de ce « pour le moment »-là. Smiley cligne
Si c'est un site dynamique avec système de template, on peut toujours enregistrer la page en statique avec un navigateur, et mettre en ligne cette version statique.
L'espace ce forme entre le footer et le bas de la page internet, en gros il ne colle plus en bas.


Edit: Finalement j'ai réussi a faire ce que je voulais, j'ai mis mes deux derniere div (celle qui doivent coller au bas de page) en position fixed, ca passe nickel sous FF et Ie

#imgbas {
position:fixed;
bottom:0;
left:0;
background-image:url(images/corner-bas-gauche.png);
width: 214px;
height:190px;
}
#bgbas {
position:fixed;
bottom:0;
left:0;
background-image:url(images/bg-bas.png);
background-repeat: repeat-x;
height:190px;
width:10000px;
}

Modifié par Romaric (11 Jun 2007 - 23:37)
Hum reflexion faite c'est pas le meilleur moyen, car si mon contenu s'agrandi, les bg fixe passe par dessus Smiley ohwell
Bonjour,

Une piste :

<style type="text/css">
body, html{/*-- voir  http://forum.alsacreations.com/faq/faq-57-Appliquer-une-hauteur-de-100-a-un-element.html  --*/
height:100%;
}

Body {
background: lime;
margin : 0 auto 0 auto;
}

#global {/*-- Ne pas oublier ie6 voir  http://forum.alsacreations.com/faq/faq-81-Min-width-max-width-min-height-et-max-height-sur-Internet-Explorer.html  --*/
background: yellow);
min-height: 100%;
position: relative;
}

#header {
width : 567px;
height : 50px;
background: red;
}

#contenu {
border:1px solid black;
margin-bottom: 20px;
width: 460px;
margin-left: 60px;
padding-bottom: 80px;
}

#footer {/*-- voir  http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html  --*/
background: pink;
width: 567px;
height: 80px;
position: absolute;
left: 0;
bottom: 0;
}

#imgbas {
background: green;
width: 214px;
height:50px;
}

#bgbas {
background: blue;
height:50px;
}

.copy {
text-align:center;
}
</style>
</head>
<body>
<div id="global">
    <div id="header">
	</div>
	<div id="contenu">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin gravida, est sollicitudin auctor hendrerit, dui tortor tincidunt eros, vitae varius nunc nulla rutrum erat. Donec nec sapien. Integer egestas egestas lacus. Vivamus id tortor. Fusce accumsan. Morbi at elit. Etiam ac urna. Nullam lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin in libero. Pellentesque eu leo vel elit bibendum sagittis. Pellentesque tincidunt, lectus vel pharetra gravida, purus dolor lobortis magna, non dapibus felis justo in odio. Donec porttitor rhoncus velit. Duis tempus. Curabitur at velit vehicula mauris rhoncus fermentum. Aenean porttitor lorem ac nibh. Maecenas est odio, interdum et, scelerisque eget, rutrum tempus, mi.
	</div>	  
    <div id="footer">
		<div class="copy">Copyright
		</div>
		<div id="bgbas">
			<div id="imgbas">
			</div>
		</div>
	</div>
</div>
</body>


J'ai arrangé les blocs à ma sauce pour visualiser.
Les liens explicatifs sont dans le code Smiley cligne
Bon courage
Re,

Oui et alors, ça ne change rien au comportement de la page si tu mets un margin-top: -60px; à #contenu Smiley cligne

Ou alors, j'ai rien compris Smiley biggol
Modifié par ghost (12 Jun 2007 - 01:53)
Avec tes modifications donc :
body, html{

height:100%;

}
Body {
background-image:url(images/bg.png);
margin : 0 auto 0 auto;
}



#global {
background-image: url(images/corp.png);
background-repeat : repeat-y;
min-height: 100%;
position:relative;
}




#header {
width : 567px;
height : 316px;
background-image:url(images/header.png);
background-repeat : no-repeat;
}


#contenu {
margin-top:-60px;
margin-bottom: 20px;
width: 460px;
margin-left: 60px;
padding-bottom: 80px;
}


#footer {
background-image:url(images/footer.png);
width: 567px;
height:125px;
position: absolute;

left: 0;

bottom: 0;
}


#imgbas {
background-image:url(images/corner-bas-gauche2.png);
width: 214px;
height:132px;
}
#bgbas {
background-image:url(images/bg-bas2.png);
background-repeat: repeat-x;
height:132px;
width:100%;
}




.copy {
text-align:center;
padding-top:35px;
}


j'ai le imgbas et bgbas (ce qui doit coller au bas de la page) qui ce retrouve entre le footer et le contenu, enfin pour être précis il est dans le contenu et le footer ce trouve en dessous. Smiley confus
Salut,

Ce doit être l'age mais, je ne te suis pas, un petit schéma peut être pour mes vieux neurones Smiley murf
Modifié par ghost (12 Jun 2007 - 09:49)
Romaric a écrit :
dans mon code j'ai un margin-top:-60px qui est indispensable Smiley ohwell

Indispensable, indispensable, c'est vite dit... Smiley rolleyes

Sinon : une page en ligne ou une capture d'écran, et un schéma de ce que tu veux obtenir. Parce que là pour l'instant tu es mal barré pour te faire comprendre...
Modifié par Florent V. (12 Jun 2007 - 10:22)
Merci pour les schémas, mais... ça reste trop vague pour qu'on puisse t'aider. Qu'est-ce qui est de la déco ? qu'est-ce qui est du contenu ? à quoi ressemble le design en vrai ?

En l'état, on ne peut que te proposer des solutions un peu à l'aveuglette, avec 90% de chances que tu nous répondes « Oui mais non je peux pas parce que mon design est comme ça ou parce que j'ai telle contrainte », et là on répondra « Ben il aurait été utile de le dire avant... bon, tu peux essayer comme ça », et là tu répondras « Ah merci mais ça marche pas parce que telle autre contrainte »...

Je pense qu'on peut s'épargner ce genre de chasse-croisé peu productif, non ?


Bref, une page en ligne ou un écran du design souhaité (de préférence : les deux !), parce que là on ne va pas s'en sortir...
Re,

Le principe,
Un bloc global contenant la page positionné en relative pour pouvoir placer le bloc apres_footer en absolute et en min-height: 100%.

un bloc contenant qui contient (!) le header, le contenu et le footer dans le flux avec un padding-botton pour ne pas recouvrir le bloc apres_footer.

Le bloc apres_footer: positionné en absolute bottom: 0 pour coller au bas de page quoiqu'il arrive.

 <style type="text/css">
body, html{
height:100%;
}

Body {
background: lime;
margin : 0 auto 0 auto;
}

#global {
background:yellow;
background-repeat : repeat-y;
min-height: 100%;
position:relative;
}

#contenant {
width : 567px;
background:blue;
padding-bottom: 132px;
}
 
#header {
height : 80px;
background:red;
}

#contenu {
margin-top:-60px;
margin-bottom: 20px;
width: 460px;
margin-left: auto;
margin-right: auto;
background:green;
}

#footer {
background: #fff;
width: 567px;
height:125px;

}

#apres_footer {
width: 100%;
height: 132px;
position: absolute;
left: 0;
bottom: 0;
}

#imgbas {
background:pink;
width: 214px;
height:132px;
}

#bgbas {
background: orange;
background-repeat: repeat-x;
height:132px;
width:100%;
}

.copy {
text-align:center;

}
</style>
</head>
<body>
<div id="global">
	<div id="contenant">
		<div id="header">
		</div>
		<div id="contenu">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eget est eget nunc tempor molestie. Nulla elementum nisi id mauris blandit semper. Integer eget nisi. Donec placerat. Donec quis nisl. Integer purus. Sed aliquet luctus enim. Nunc quam pede, molestie a, feugiat sit amet, porta ac, mi. Phasellus vel lorem. Donec tincidunt sapien sit amet dolor. Mauris adipiscing leo aliquet diam. Nullam eu mauris elementum risus bibendum bibendum. Mauris euismod quam in pede. Pellentesque fermentum nunc quis metus lacinia vestibulum. Morbi ut arcu ac nisi consectetuer suscipit. Fusce sit amet ante vel risus volutpat molestie. Nunc eu massa et orci eleifend interdum. Sed purus. Cras libero orci, rhoncus id, interdum in, tempor nec, risus.  

		</div>	  
		<div id="footer">
			<div class="copy">Copyright
			</div>
		</div>
	</div>	
	<div id="apres_footer">		
		<div id="bgbas">
			<div id="imgbas">
			</div>
		</div>
	</div>
</div>
</body>


Voila une solution peut être.
Voila je viens de tester ta solution, à première vue on s'y approche, ça fonctionne nickel quand j'ajoute du contenu, le imgbas et bgbas reste coller au bas de page et descende en fonction du contenu, ca c'est du tout bon, le seul bémol c'est quand je n'ai presque pas de contenu, le bg du contenu (celui renseigner en global) ce repete en dehor du design, voici un screen:
http://img19.imageshack.us/img19/2558/apyd4.png
Bon, j'ai bien fait de demander, on va gagner un temps fou.

Déjà, on peut commencer par ça :
- rien dans cette mise en page n'impose d'utiliser un margin-top négatif ;
- il serait préférable de ne pas positionné les images décoratives de bas de page en fixe : en position:fixed, elles monopolisent systématiquement une partie de l'écran, ce qui est dommage pour des images décoratives.

Si je devais intégrer cette maquette, je serais probablement parti différemment. Mais bon, on ne va pas tout refaire (surtout que je n'ai pas une heure devant moi... Smiley lol ), et on va partir de ce qu'on a déjà.

Il y a plein de petits correctifs à faire. En gros, il ne faut pas utiliser le positionnement fixe (on peut garder le margin-top négatif, par contre), mais le remplacer par le positionnement absolu.

En gros, il s'agit de suivre le tutoriel que tu as dit avoir suivi (ce que tu n'as pas vraiment fait...). Bref, on y replonge.
Pages :
Sujet clos
Aller à