le footer en haut de la page

10 novembre 2011 à 23:57:02

Bonjour !

Et voici un nouvel épisode de : je teste le css3 ! Aujourd'hui, c'est mon footer qui se place sur mon header.

Vous me direz : repositionne le. Hehe, j'ai essayé. Mais que je mette position: absolute; ou position: relative; rien n'y fait, il ne bouge pas. J'ai beau jouer avec les %, il n'en a rien à faire. J'ai essayé avec bottom ou top, ça ne change toujours rien. Dans le *.html, il est placé en dernier.

Je vous ai raccourcis les balises inutiles pour ce problème.

<html>
  <head>
  </head>

  <body>
		<div id="bloc_page">
			<header>
				<div id="logotitre">
				</div>
				<div id="rechercher">
				</div>
			</header>
			<nav>
				<ul id="menu">
				</ul>
			</nav>
			<div id="banniere_news">
			</div>
			<section>
				<article>
				</article>
				<aside>
				</aside>
			</section>
			<footer>
				<div id="contact">
				<a href="mailto#">Nous Contacter</a>
				</div>
				<div id="plan">
				<a href="#">Plan du site</a>
				</div>
				<div id="facebook">
				Nous suivre
				<a href="http://www.facebook.com/pages/Miss-Games"><img src="img/facebook.png" width="15px" alt="logo de facebook"/></a>
				</div>
				<div id="copyright">
				©2011 MissGames
				</div>
			</footer>
		</div>
  </body>
</html>

Si besoin, voici le *.css du footer :

footer
{
	border: solid red;
	border-top: solid 2px rgba(206,206,206,0.5);
	border-top: solid 2px rgb(206 206 206);
}

footer p, footer ul
{
	font-size: 0.8em;
	text-decoration: normal;
}

#contact, #plan, #facebook, #copyright
{
	display: inline-block;
	vertical-align: top;
	margin-right: 15px;
}

J'ai vu quelque parler de ça dans le forum. On lui avait dit d'enlever les position: absolute; de section et footer. J'ai essayé, mais tout remonte en haut de mon header.

Edit :
En continuant à chercher j'ai trouvé :
http://www.siteduzero.com/forum-83-620 [...] html#r5982405

Lorsque je le fait, ça me place le footer en bas de la page visible mais pas de la page. Un petit screen pour bien comprendre :

Anonyme

11 novembre 2011 à 0:09:59

Essaye d'utiliser les positions (relative / absolut) ou alors float:left;

EDIT :

Donne le code css du header également.

Nittya

11 novembre 2011 à 0:17:18

Dans mon header, j'ai deux éléments : ma bannière et un bouton rechercher.

#logotitre
{
	display: inline-block;
	width: 750px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top : 2%;
	left: 25%;
}

#rechercher
{
	display: inline-block;
	text-align: right;
	position: relative;
	top: 2%;
	left: 85%;
	padding: 10px;
}

Je n'ai pas de
header
{
}
, j'ai rien trouvé à y mettre

benfarhat

11 novembre 2011 à 4:57:54

Salut
Rajoute à ton footer

footer
{
	border: solid red;
	border-top: solid 2px rgba(206,206,206,0.5);
	border-top: solid 2px rgb(206 206 206);
	position: absolute;
	bottom:0;
}

et enleve le div conteneur (<div id="bloc_page">) juste apres le <body> et avant le </body>

Anonyme

11 novembre 2011 à 12:08:53

Dans le header tu pourrais essayé de mettre margin:0px; et padding:0; Comme ça déjà il a plus de chance d'être en haut.

Nittya

12 novembre 2011 à 23:57:25

Avant tout merci pour vos réponses.

Benfarat : En changeant mon footer, ça l'a placé en bas de la page visible mais pas de la page réelle. (c'est à dire que lorsque je descend dans ma page avec la molette, le footer se retrouve en plein milieu.) J'ai essayé d'enlever le bloc page, ça ne change rien.

Yodrit : En fait il s'agit du footer et pas du header que j'essais de déplacer =)

Anonyme

13 novembre 2011 à 0:11:43

Oui je sais, mais si sa fais ça c'est que tu as un problème peut être aussi un problème avec ton header.

Nittya

13 novembre 2011 à 7:11:53

Voilà c'est fait, et malheureusement rien n'a changé

Un autre idée ?

Nittya

14 novembre 2011 à 7:23:08

j'ai résolu mon soucis en mettant mon bottom en négatif. Mais là où j'ai peur que ça pose problème c'est si j'ai un contenu aléatoire (généré par une boucle) le problème va se reposer non ?

seranseran

15 décembre 2018 à 19:02:40

Voilà c'est fait, et malheureusement rien n'a changé

-
Edité par seranseran 15 décembre 2018 à 21:51:03

Dylan R.

15 décembre 2018 à 20:04:18

bonjour tu peux mettre ton div main en display flex et flex orientation column, ou alors si tu ne veux pas utiliser le flex tu passe ton main div en position relative et ton footer en absolut bottom 0.

perso je n'aime pas trop la deuxième solution