28220 sujets

CSS et mise en forme, CSS3

Pied de page

bonjour,

Je souhaiterais afficher un div en bas de mon div principal mais c'est exactement l'inverse qui se produit (il se situe en haut).

La page en question.
La feuille de style.

Le code Html

<html>
<body>
<div id="global">
</div>
<div class="footer">
</div>
</body>
</html>


Le style de mon footer

.footer {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    padding: 0px;
    border: 1px solid #333;
    color: black;
    background-color: #fff;
    text-align: center;
    font-weight: normal;
}


Avez-vous une idée ?
Administrateur
Le div global est placé de façon absolue. Le div suivant, footer, va occuper la 1ère place libre qu'il trouve dans la page.
Il y a de la place en haut donc il l'occupe. Enfin je pense que ça vient de là Smiley cligne
merci felipe. en effet tu avais raison, je me suis documenté sur css mediabox, et effectué plusieurs tests (position static, relative, suppression de position absolute) et les résultats diffèrent. En revanche - désolé - je ne parviens toujours pas a mettre le footer en bas de page. As tu une solution s'il te plait ?

d'avance merci
Administrateur
- Rendre le footer tellement haut qu'il ne passe plus en haut (crade)
- Ne pas tenter de mixer positionnement absolu et relatif. Ton "global" peut très bien conserver sa place sans être positionné en absolu, ne serait-ce qu'en déclarant un margin-top suffisamment haut. http://www.w3.org/TR/CSS1#formatting-model

J'arrête là mes conseils, j'y connais pas grand chose de plus dans ce domaine Smiley biggol
bonjour,

essaie de positionner le footer également en position :abbsolute; mais auparavant, change au niveau de ton css ton 
.footer

en 

#footer


et appelle le dans ton html par 
<div id="footer>


j'ai testé cette solution chez moi en local et j'ai le footer en bas de l'écran
bon j'ai pas les images mais le footer est en bas
Ta div Global n'est pas collée en haut ? Ou tu l'a décollé pour qu'on voit le footer ?
Moi je ferais comme ça :
body {
	margin: 0px;
	padding: 0px;
	text-align: center;
}
#global {
	position: relative;
	width: 747px;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	border: 3px solid #9D9F9B;
	background-color: #FFF;
	text-align: left;
}
#footer {
	margin-left: auto;
	margin-right: auto;
	width: 500px;
	padding: 0px;
	border: 1px solid #333;
	color: black;
	background-color: #fff;
	text-align: center;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 0px;
}


Tout dépend du comportement général que tu désires. A essayer... Smiley cligne
Sujet clos
Aller à