[Résolu] Un footer qui ne veux pas aller en bas ! par Arthas231 - page 1

Mon footer est incapable de se placer ou je lui demande. Voila le site : ici et voila les codes de la page concernée :

<?php
include("../parametres/includes1.php");
?>
<h1>Bienvenue sur JVMaths !</h1>
<dfn>Le site de mathématiques du collège Jules Vallès</dfn>

<?php
include("../parametres/includes2.php");
?>

La feuille de style :

/* style.css */

body
{
background-color:#E4EFF1;
font-family: 'Trebuchet MS', Tahoma, Verdana, 'Times New Roman', Times, serif;
font-size:0.8em;
margin:0;
}

#corps h1, #corps h2, #corps h3
{
font-variant: small-caps;
text-align:center;
color:#355AD7
}

#menus strong
{
color:#355AD7
}

#menu
{
border:2px outset blue;
padding: 3px 0px;
text-align:center;
background-color:#E4EFF1;
color:#355AD7
}

.element_menu
{
background-color:#E4EFF1;
border: 2px outset blue;
margin-bottom:17px;
padding:5px 10px 20px 10px;
}

.element_menu a:hover
{
background-color: #000000;
color: #CCE0E3;
}

#body
{
   width: 900px;
   margin: auto;
margin-top:20px;
margin-bottom:20px;
}

#banniere
{
border-top:2px inset blue;
text-align:center;
margin-left: 6px;
margin-right: 6px;
}

#defilant
{
color:#CCE0E3;
background-color:#000000;
font-weight:bold;
}

a img
{
border: none;
}

.blink
{
text-decoration: blink;
}

#date
{
margin:6px;
font-weight: bold;
font-variant: small-caps;
font-size: 1.3em;
border-top:2px inset blue;
border-bottom:2px outset blue;
text-align:right;
}

#menus
{
border:2px inset blue;
width:225px;
padding:10px 9px 2px 9px;
margin:0px 18px 22px 0px;
background:url('../images/fond_corps.png') repeat-x;
background-color: #CCE0E3;
float:left;
}

ul
{
   list-style-image: url("../images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
list-style: inside none;
}

#cadre_bouton
{
border : 2px inset blue;
padding : 13px 30px;
background-color: #CCE0E3;
margin: 25px 0px;
}

#cadre_bouton div
{
border: 2px outset blue;
padding: 2px 0px;
width: 112px;
height: 18.5px;
text-align:center;
background-color:#E4EFF1;
margin-left:80px;
margin-right:80px
}

#header
{
background:url('../images/fond.png') repeat-x;
background-color: #CCE0E3;
padding:6px;
border: 2px inset blue;
margin-bottom: 23.5px;
}

#corps
{
background:url('../images/fond_corps.png') repeat-x;
background-color: #CCE0E3;
border: 2px inset blue;
margin: 25px 0px 22px 270px;
padding: 21px;
}

h1
{
font-variant: small-caps;
text-align:center;
}

#footer
{
background-color: #CCE0E3;
border: 2px inset blue;
position:absolute;
bottom:0px;
margin:20px 0px 20px 0px;
}

L'includes1 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Abdellatif HMITO" />
<meta name="description" content="JVMaths" />
<meta name="keywords" content="maths, mathématiques, Jules Vallès" />

<link rel="stylesheet" media="screen" type="text/css" title="Design JVMaths" href="../parametres/style.css" />

<title>JV Maths</title>

</head>

<body>





<div><marquee id="defilant" behavior="slide" scrollamount="6" >Bienvenue sur JVMaths, le site de mathématiques du collège Jules Vallès ; Création du site le 15/04/2006 ; L'utilisation d'Internet Explorer 6 entraîne des problèmes d'affichage sur le site : veuillez donc utiliser Mozilla Firefox...</marquee><br/></div>

<div id="body">
<div id="header">



<a href="../accueil/index.php"><p id="banniere"><img src="../images/banniere.png" alt="Bannière JVMaths" title="Bannière de Jules Vallès Maths" /></p></a>



<p id="date">

<?php

$jour = date("d");
$mois = date("m");
$annee = date("Y");

$heure = date("H");
$minute = date("i");

echo "$jour/$mois/$annee ; $heure"?><span class="blink">:</span><?php

$jour = date("d");
$mois = date("m");
$annee = date("Y");

$heure = date("H");
$minute = date("i");

echo "$minute ; Dernière Mise à jour le 19/04/2006"
?>

</p>

</div>



<div id="cadre_bouton">

<table><tr><td><a href="../accueil/index.php"><div>Accueil</div></a></td><td><a href="../accueil/telechargements.php"><div>Téléchargements</div></a></td><td><a href="../accueil/contacts.php"><div>Contacts</div></a></td></tr></table>

</div>

<div id="menus">

<h2 id="menu">Menus</h2>



<div class="element_menu" >
<h3>6<sup>ème</sup></h3>

<ul class="ul">
<strong>Chapitres numériques :</strong>
<li><a href="../N6/.php"> </a></li>
<li><a href="../N6/.php"> </a></li>
<li><a href="../N6/.php"> </a></li>
<li><a href="../N6/.php"> </a></li>
<li><a href="../N6/.php"> </a></li>
<li><a href="../N6/.php"> </a></li>
<li><a href="../N6/.php"> </a></li>
</ul>

<ul class="ul">
<strong>Chapitres géométriques :</strong>
<li><a href="../G6/.php"> </a></li>
<li><a href="../G6/.php"> </a></li>
<li><a href="../G6/.php"> </a></li>
<li><a href="../G6/.php"> </a></li>
<li><a href="../G6/.php"> </a></li>
<li><a href="../G6/.php"> </a></li>
<li><a href="../G6/.php"> </a></li>
</ul>

</div>



<div class="element_menu" >
<h3>5<sup>ème</sup></h3>

<ul class="ul">
<strong>Chapitres numériques :</strong>
<li><a href="../N5/.php"> </a></li>
<li><a href="../N5/.php"> </a></li>
<li><a href="../N5/.php"> </a></li>
<li><a href="../N5/.php"> </a></li>
<li><a href="../N5/.php"> </a></li>
<li><a href="../N5/.php"> </a></li>
<li><a href="../N5/.php"> </a></li>
</ul>

<ul class="ul">
<strong>Chapitres géométriques :</strong>
<li><a href="../G5/.php"> </a></li>
<li><a href="../G5/.php"> </a></li>
<li><a href="../G5/.php"> </a></li>
<li><a href="../G5/.php"> </a></li>
<li><a href="../G5/.php"> </a></li>
<li><a href="../G5/.php"> </a></li>
<li><a href="../G5/.php"> </a></li>
</ul>

</div>



<div class="element_menu" >
<h3>4<sup>ème</sup></h3>

<ul class="ul">
<strong>Chapitres numériques :</strong>
<li><a href="../N4/.php"> </a></li>
<li><a href="../N4/.php"> </a></li>
<li><a href="../N4/.php"> </a></li>
<li><a href="../N4/.php"> </a></li>
<li><a href="../N4/.php"> </a></li>
<li><a href="../N4/.php"> </a></li>
<li><a href="../N4/.php"> </a></li>
</ul>

<ul class="ul">
<strong>Chapitres géométriques :</strong>
<li><a href="../G4/.php"> </a></li>
<li><a href="../G4/.php"> </a></li>
<li><a href="../G4/.php"> </a></li>
<li><a href="../G4/.php"> </a></li>
<li><a href="../G4/.php"> </a></li>
<li><a href="../G4/.php"> </a></li>
<li><a href="../G4/.php"> </a></li>
</ul>

</div>



<div class="element_menu" >
<h3>3<sup>ème</sup></h3>

<ul class="ul">
<strong>Chapitres numériques :</strong>
<li><a href="../N3/.php"> </a></li>
<li><a href="../N3/.php"> </a></li>
<li><a href="../N3/.php"> </a></li>
<li><a href="../N3/.php"> </a></li>
<li><a href="../N3/.php"> </a></li>
<li><a href="../N3/.php"> </a></li>
<li><a href="../N3/.php"> </a></li>
</ul>

<ul class="ul">
<strong>Chapitres géométriques :</strong>
<li><a href="../G3/.php"> </a></li>
<li><a href="../G3/.php"> </a></li>
<li><a href="../G3/.php"> </a></li>
<li><a href="../G3/.php"> </a></li>
<li><a href="../G3/.php"> </a></li>
<li><a href="../G3/.php"> </a></li>
<li><a href="../G3/.php"> </a></li>
</ul>

</div>



<div class="element_menu" >
<h3>Boîte à outils</h3>

<ul class="ul">
<li></li>
</ul>

</div>



<div class="element_menu" >
<h3>Pédagogie</h3>

<ul class="ul">
<li><a href="../pedagogie/debats.php">Débats pédagogiques</a></li>
</ul>

</div>



<div class="element_menu" >
<h3>Liaisons</h3>

<ul class="ul">
<li><a href="../liaisons/ec.php">école > collège</a></li>
<li><a href="../liaisons/cl.php">collège > lycée</a></li>
</ul>

</div>



<div class="element_menu" >
<h3>Jules Vallès</h3>

<ul class="ul">
<li><a href="../contacts/college.php">Présentation du collège</a></li>
<li><a href="../contacts/equipe_pedagogique.php">Equipe Pédagogique de <acronym title="Jules Vallès">JV</acronym></a></li>
</ul>

</div>



<div class="element_menu" >
<h3>Liens/Partenaires</h3>

<ul class="ul">
<li><a href="http://colleges.ac-rouen.fr/valles/" >Site de <acronym title="Jules Vallès">JV</acronym></a> (inactif)</li>
</ul>

</div>

</div>



<div id="corps">

Et le 2 :

</div>



<div id="footer">

<a href="http://jigsaw.w3.org/css-validator/check?uri=referer"><img src="../images/css_validator.png" alt="Valid CSS!" title="Le code CSS de cette page est valide conformement au validateur du W3C (World Wide Web Consortium)"/></a>

</div>

</div>

</body>

</html>

Je sais que vous penserez que toutes ces pages de codes sont inutiles mais les problèmes sont souvent là où on s'y attend le moins.

bonjour,

tu as pluseurs probleme.

le premier c'est que ton position absolute, en sortant le footer du flux, ne lui donne pas de taille ou le comportement "habituel" d'une balise de type block. Seul son contenu va le faire "grossir.

tu peut deja par exemple modifier le css comme ceci:

#footer
{
background-color: #CCE0E3;
border: 2px inset blue;
position:absolute;
bottom:0px;
margin:20px 0px 20px 0px;
height:20px;/* hauteur au pif */
width:100%;/*largeur de la page ou de son conteneur selon les regles css appliquer au conteneur */
}

ensuite bien qu'il soit contenu dans div#body , il ne s'affichera qu'au bas de la fenetre et y restera imperturbable.

Pour lui dire de s'afficher au bas de div#body il te faut aussi modifier le css pour #body (tu aurais du choisir un autre nom, cela peut preter a confusion ).

un position:relative permettra au footer de comprendre qu'il doit se placer en fonction de son conteneur et plus de la fenêtre.
Prevoit un espace de degagement avec un padding ou une autre balise vide et un overflow:hidden pour contourner le comportement de ff qui n'englobe pas les flottants automatiquement.

ce qui t'amene a un css comme ceci.

#body
{
width: 900px;
margin: auto;
margin-top:20px;
margin-bottom:20px;

position:relative;/* pour reference pour le footer */

padding-bottom:20px;/* pour degager l'espace pour le footer */

overflow:hidden;/* pour englober les flottant dans firefoxe par exemple */
}

Arthas231

19 avril 2006 à 16:51:32

gcyrillus

19 avril 2006 à 17:33:35

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Totoj21

19 avril 2006 à 17:34:28

je suis pas sur mais y aurait pas un </div> en trop dans l'includes 2 ?
sinon quand je vais voir sur ton site je le vois pas du tout ton footer c'est normal ?

20 avril 2006 à 10:12:01

Il est à gauche, en plein dans le menu (avec FF)

EDIT : Merci gcyrillus !

21 avril 2006 à 11:36:33

Ca y est, mon footer est en bas !
Par contre, il déborde sur le menu...

la feuille de style est ici et la page est là

(view-source:http://jvmaths.info/parametres/includes2.php)

Norrecix

21 avril 2006 à 11:57:35

Salut,

Tu utilises un float:left; pour ton menu, non ?

Comme tu veux que ton footer ne dépasse pas sur le menu, mais que au contraire il soit poussé par le menu, utilise la propriété CSS suivante pour nettoyer le flottant :

#footer {
clear: left;
}

Comme ça, tu obtiens l'effet désiré. Après, si tu veux plus espacer ton footer de ton menu, tu rajoutes un petit margin-top et le tour est joué

A+

21 avril 2006 à 12:02:12

Merci beaucoup !

EDIT: Désolé mais ca ne marche pas

21 avril 2006 à 12:06:31

EDIT : essayes avec un clear:both; mais sinon cela vient d'un problème au niveau de ton code et il faudrait que je le relise en entier. Désolé de ne pas pouvoir t'aider sinon.

De rien

Met à jour ton site que je puisse voir si ça marche bien !

J'ai oublié de te dire que je trouvais le design très réussi : les tons sont bien choisis et n'agressent pas l'oeil du visiteur.

Après, le site est encore un peu vide, mais bon, il faut trouver une bonne poire, euh pardon je voulais dire un bon rédacteur qui ne fait pas trop de fautes de français, pour remplir ton site.

A+

DEUXIEME EDITION :
J'ai téléchargé ton site en local et j'ai modifié un peu ton code. Je crois que j'ai obtenu l'effet que tu désires en supprimant deux lignes dans ton fichier *.css
Voici le code que j'ai fait :

#footer
{
background-color: #CCE0E3;
border: 2px inset blue;
margin:20px 0px 30px 0px;
width:97.3%;
padding:7px 10px 7px 10px;
clear: both;
}

En espérant que ça te serve et que ça ne fasse pas une m**** à un autre endroit. A+</span>

21 avril 2006 à 14:05:15

bonjour,

le padding-bottom sur #body, n'est pas suffisant passe le de 50px a 150px , ce padding doit faire au minimum la hauteur du pied , (dans l'exemple que je t'ai donné plus haut )
++

22 avril 2006 à 14:16:37

Merci à tous !

Maintenant ca marche !

Voici un aperçu du CSS :

#footer
{
background-color: #CCE0E3;
border: 2px inset blue;
position:absolute;
margin:20px 0px 30px 0px;
width:97.3%;
padding:7px 10px 7px 10px;
clear: both;
text-align:center;
bottom:-25px;
}

#body
{
width: 900px;
margin: auto;
margin-top:20px;
margin-bottom:20px;
position:relative;
padding-bottom:160px;
overflow:hidden;
}

Un footer qui ne veux pas aller en bas !

Un footer qui ne veux pas aller en bas !

Supprimer

Modérer

Signaler le message aux modérateurs