Footer mal placé

Trouve pas ma faute :p

Sujet résolu

3 janvier 2006 à 21:22:01

Bonjour à tous,

Voilà mon premier message sur un site d'exception :lol:

. Merci de nous apprendre tout ce language Web facilement !

J'ai commencé ma page XHTML, mais j'ai une petite erreur mais je trouve pas quoi.

Voici tout d'abord le lien de ma page: http://a7ateam.free.fr/site/index.html

Mon problème est que j'ai placé mon footer en dessous du body, et s'affiche correctement sur l'index.html. Arriver sur la page hebergeurs.html, le footer reste exactement au même endroit alors que la page s'est allongé en hauteur. J'aimerais qu'il se cale en dessous du body comme sur l'index, mais je trouve pas comment.

çà peut-être dûs à quoi ?

Quel(s) fichier(s) voulez vous ? :euh:

Merci pour votre aide.

Sp3ll`

YoOp

3 janvier 2006 à 22:12:58

rajoutes : clear : both ds ta CSS pour le footer, normalement ça devrait marcher!

TimeSplitters

3 janvier 2006 à 22:13:40

Tu veux que ton footer descende en fonction du contenu? Si oui, donne moi le code CSS

J'essaierai de t'aider

YoOp

3 janvier 2006 à 22:18:47

Citation : TimeSplitters

Tu veux que ton footer descende en fonction du contenu? Si oui, donne moi le code CSS J'essaierai de t'aider

Rooo, c'est pas compliqué! tu regardes le code source pis tu prends le nom de sa CSS et hop tu remplaces index.html par le_nom_de_la_css.css! :-°

TimeSplitters

3 janvier 2006 à 22:26:39

Son css peut être placé dans un sous-dossier

C'est pour ça... :-°

mistike

3 janvier 2006 à 22:29:29

A mon avis en ayant regardé rapidos, il faut mettre le menu et le corps dans un même conteneur, avec quelque chose comme un <hr /> affublé de clear: left en fin dudit conteneur.

Le footer s'affiche en fait juste en dessous du menu qui est en float, donc le clear:left (ou both) sur le footer ne règlera pas le pb...

yalcin

3 janvier 2006 à 22:40:51

j'ai le meme soucis

et pas de solution

Sp3ll

3 janvier 2006 à 22:56:11

En faites, j'ai fait un système de block en header, body, footer pour le design ( le cadre sur le site ) comme çà dès si je rajoute des éléments dans le body, le cadre va s'agrandir tout simplement.

J'ai mis un margin-top pour qu'il soit séparé du body, mais quand je rajoute des éléments dans le body du body

, le footer principal ne suit pas et reste au même endroit, j'aurais voulu qu'il suive le body.

Voici mon CSS:

body
{
background-image: url("images/right.jpg");
background-position: right;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #000000;
margin: auto;
width: 735px;
margin-top: 20px;
margin-bottom: 20px;
}
a
{
text-decoration: none;
color: grey;
font-style: italic;
}
a:hover
{
color: white;
}
ul
{
list-style-type: disc;
}
a:visited
{
color: grey;
text-decoration: none;
}
.menu1g, .menu2g, .menu3g
{
background-image: url("images/menu3.jpg");
width: 156px;
background-repeat: repeat-y;
}
.menu1gf
{
background-image: url("images/menu1gf.jpg");
height: 9px;
width: 156px;
margin-bottom: 30px;
}
.h4menu1g
{
background-image: url("images/menu1gh.jpg");
padding-left: 22px;
height: 35px;
background-repeat: no-repeat;
padding-top: 10px;
}
.h4menu2g
{
background-image: url("images/menu2gh.jpg");
padding-left: 33px;
height: 35px;
background-repeat: no-repeat;
padding-top: 10px;
}
.h4menu3g
{
background-image: url("images/menu3gh.jpg");
padding-left: 33px;
height: 35px;
background-repeat: no-repeat;
padding-top: 10px;
}
#header
{
width: 735px;
}
#menu
{
float: left;
width: 156px;
margin-bottom: 20px;
}
#body
{
margin-top: 21px;
margin-bottom: 20px;
margin-left: 165px;
width: 570px;
height: 459px;
color: #FFFFFF;
}
.bodyh
{
background-image: url("images/bodyh.jpg");
height: 10px;
width: 570px;
}
.body
{
text-align: justify;
padding: 10px;
padding-right: 30px;
width: 530px;
background-image: url("images/bodyb.jpg");
background-repeat: repeat-y;
}
.bodyf
{
width: 570px;
background-image: url("images/bodyf.jpg");
height: 10px;
}
#footer
{
margin-top: 100px;
text-align: center;
padding-top: 1px;
background-image: url("images/footer.jpg");
width: 735px;
height: 65px;
}

Comme vous pouvez le voir, le margin-top du footer est de 100px, si je le baisse il rentre complétement par dessus le body et le menu o_O.

J'espère ne pas vous embrouillez, avec le body du body ect...

Merci.

mistike

3 janvier 2006 à 23:03:44

Oui mais ton footer se place à 100px SOUS LE MENU, alors que tu voudrais qu'il se place 100px SOUS LE BODY. Pour moi, tu devrais mettre menu & corps dans une <div> ensemble. Ainsi ton footer se placerait SOUS CETTE DIV, et non plus sous le menu ;-)

YoOp

3 janvier 2006 à 23:08:21

T'as essayé de mettre un clear : both; ?

Sp3ll

3 janvier 2006 à 23:15:53

Après avoir mis body et menu ensemble, je me suis aperçu que le footer a un espace de 100px ( voir CSS ) mais par rapport au header. le body et le menu se sont mis l'un en dessous de l'autre, et le footer a remonté 100px après le header.

Citation : YoOp

T'as essayé de mettre un clear : both; ?

Dans quel balise ?

Merci pour votre aide.

thedragonknight

3 janvier 2006 à 23:47:23

Salut,

A mon avis tu devrais essayer de supprimer le background-attachment du body! Je pense que c'est ça qui pose problème!

Et si après l'avoir enlevé ton footer remonte met un clear: both à celui-ci!

Voilà! Bonne Année!

Sp3ll

4 janvier 2006 à 7:12:43

Alalala, le coquinou, j'ai testé, mais rien ne marche, il se cale toujours sur le body et le menu en même temps sur la page hebergeurs.html.

YoOp

4 janvier 2006 à 13:26:42

Citation : Sp3ll

Après avoir mis body et menu ensemble, je me suis aperçu que le footer a un espace de 100px ( voir CSS ) mais par rapport au header. le body et le menu se sont mis l'un en dessous de l'autre, et le footer a remonté 100px après le header.

Citation : YoOp

T'as essayé de mettre un clear : both; ?

Dans quel balise ?

Merci pour votre aide.

Je l'ai dis plus haut! Dans ta CSS, pour ton footer tu met clear: both; si ça marche pas, ben je sais pas vu que j'ai pas regardé tout le code, juste pour le footer car c'est une erreur fréquente! Je re-regarde