[resolu] - SOS : mon pied de page refuse de se positionner en bas -

Question

Pages :

Temana

22 Nov 2005 à 21:26

bonsoir,

Je n'y arrive plus, je ne sais plus comment faire, ça fait 2 jours que je suis dessus sans succès : le menu du bas s'affiche en haut...
Qui peut m'aider ? Sans m'envoyer lire tel ou tel article (j'ai épluché des dizaines d'articles et aucune solution ne fonctionne - il est vrai je suis débutant)... pourtant il n'y a rien d'extraordinaire dans ma mise en page : 1 tête, 2 colonnes vivantes, 1 pied...

Voici le style css :



/* HEADER */
.head1 {
height: 40px;
width: 500px;
float: left;
}
.head2 {
height: 54px;
width: 200px;
float: left;
margin-left: 10px;
padding-top: 15px;
}

/* Navigation */
.barrenav {
clear: both;
width: 810px;
left:0;
z-index: 2;
}

/* Pub haut */
.pubhaute {
margin-left: 36px;
background-image: url('http://www.phonethik.com/head1.gif');
width: 728px;
height:100px;
border: 1px solid #C0C0C0;
z-index: 1;
}

#gauche {
position: absolute;
width: 480px;
padding: 5px;
}

#centre {
position: absolute;
left: 500px;
width: 300px;
background-color:#DCDCDC;
padding: 5px;
}

/* pied */
#footer {
display: block;
position: absolute;
padding: 5px;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
}

#menu {
bottom: 0;
left: 0;
z-index:100;
width: 810px;
height: 20px;
background-color: #8b0000;
font-family: verdana;
font-size: 11px;
paddding-top: 3px;
color: FFFFFF;
list-style-type: none;
}
#menu dl {
float: left;
width: 120px;
position: relative;
margin: 0;
}
#menu dt {
cursor: pointer;
text-align: left;
background: #8b0000;
border: 0;
text-color: FFFFFF;
}
#menu dd {
background-color: #FFFFFF;
border: 1px solid #000000;
position: absolute;
bottom:1.5em;
width:100%;
}
#menu li {
text-align: left;
}
#menu li a, #menu dt a {
color: #8b0000;
text-decoration: none;
display: block;
height: 100%;

}
#menu li a:hover, #menu dt a:hover {
background: #8b0000;
color: FFFFFF;
}

Côté html :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
</head>
<body>

<!-- Header-->
<div class="head1"></div>
<div class="head2"></div>

<!-- Menu de navigation -->
<div class="barrenav"></div>

<!-- Pub haut -->
<div class="pubhaute" align="center"></div>

<div id="gauche"></div>

	  
<div id="centre"></div>

<div id="footer">
<div id="menu"></div>
</div>

</body>

</html>

Merci beaucoup pour votre aide

Dan
Modifié par Temana (23 Nov 2005 - 20:56)

Maxwell

22 Nov 2005 à 21:31

Hello,

ton site est en ligne??!!
tu as le lien?!

~~supprimé~~

22 Nov 2005 à 21:33

Si tu veux que ton footer soit en bas de ta page, il faut le positionner comme tel.
Ajoute bottom:0; dans ton style #footer.

Temana

22 Nov 2005 à 22:00

Je viens de tester le bottom: 0;
le menu se cale en bas de la fenêtre ouverte du navigateur mais pas en bas de la page...

l'adresse de la page en essai:


 http://www.phonethik.com/sommaire2.php3

merci beaucoup pour votre aide.

~~supprimé~~

22 Nov 2005 à 22:28

tu as essayé les liens de la FAQ à ce sujet ?
en notant que pour l'instant, ton footer n'est pas contenu dans un conteneur positionné en relatif

Temana

22 Nov 2005 à 22:38

il faudrait alors en html

<div id="conteneur">
<div id="footer">
<div id="menu"></div>
</div>
</div>

ai-je bien compris ?

~~supprimé~~

22 Nov 2005 à 22:43

voilà, avec "conteneur" en relatif qui contient l'ensemble de ta page, et "footer" en absolu

Temana

22 Nov 2005 à 23:08

ça ne marche pas...

je reprend à 0 :

la css pour un header composé de 2 parties, 1 barre de nav, 1 bannière pub, 2 colonnes de flux, un footer


# container {
position: relative;
}

/* HEADER */
.head1 {
height: 40px;
width: 500px;
float: left;
}
.head2 {
height: 54px;
width: 200px;
float: left;
margin-left: 10px;
padding-top: 15px;
}

/* Navigation */
.barrenav {
clear: both;
width: 810px;
left:0;
z-index: 2;
}

/* Pub haut */
.pubhaute {
margin-left: 36px;
width: 728px;
height:100px;
border: 1px solid #C0C0C0;
z-index: 1;
}

/* colonne gauche */
#gauche {
position: absolute;
width: 480px;
padding: 5px;
}

/* colonne droite */
#droite {
position: absolute;
left: 500px;
width: 300px;
background-color:#DCDCDC;
padding: 5px;
}

/* footer */
#footer {
bottom: 0;
position: absolute;
}

Alors en HTML, j'aurai :


<body>
<div id="container>

<div id="head1"></div>
<div id="head2"></div>

<div id="barrenav"></div>

<div id="pubhaute"></div>

<div id="gauche"></div>
<div id="droite"></div>

<div id="footer"></div>

Ai-je bien compris... Si oui alors qui peut m'expliquer pourquoi ca ne marche pas ?
Merci pour votre aide.

Dan

~~supprimé~~

22 Nov 2005 à 23:14

En fermant le guillement de

<div id="container>

et en fermant ce div à la fin, ca doit fonctionner normalement

Temana

22 Nov 2005 à 23:23

désolé, ça ne marche toujours pas , le footer n'a pas bougé de place.

faut-il que j'indique une hauteur du container en % ?

~~supprimé~~

22 Nov 2005 à 23:32

hmm si ce code marche

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titre</title>
<style type="text/css">
# container {
position: relative;
}

/* HEADER */
.head1 {
height: 40px;
width: 500px;
float: left;
}
.head2 {
height: 54px;
width: 200px;
float: left;
margin-left: 10px;
padding-top: 15px;
}

/* Navigation */
.barrenav {
clear: both;
width: 810px;
left:0;
z-index: 2;
}

/* Pub haut */
.pubhaute {
margin-left: 36px;
width: 728px;
height:100px;
border: 1px solid #C0C0C0;
z-index: 1;
}

/* colonne gauche */
#gauche {
position: absolute;
width: 480px;
padding: 5px;
}

/* colonne droite */
#droite {
position: absolute;
left: 500px;
width: 300px;

background-color:#DCDCDC;
padding: 5px;
}
/* footer */
#footer {
bottom: 0;
position: absolute;
}
</style>

</head>
<body>
<body>

<div id="container">

<div id="head1">head1</div>
<div id="head2">head2</div>
<div id="barrenav">barrenav</div>
<div id="pubhaute">pubhaute</div>
<div id="gauche">gauche</div>
<div id="droite">droite</div>
<div id="footer">footer</div>
</div>
</body>
</html>

RomsIW

23 Nov 2005 à 09:23

Voir le site de Pompage.net : les pieds de page dans le plat

Temana

23 Nov 2005 à 09:26

effectivement, quand je le teste en local ça fonctionne...

je vais essayer de le remplir et de mettre la feuille de style à part voir si le code fonctionne encore.

Merci pour ton aide.

Temana

23 Nov 2005 à 10:07

une fois que je mets mon contenu (des boucles SPIP qui appellent du contenu), le footer ne descend pas en dessous...

pour RomsiW : j'ai lu l'article mais un détail doit m'échapper quand le contenu principal est un flux variable

J'ai beau relire, je ne vois rien.

Auriez-vous une piste, svp ?

Merci

Temana

23 Nov 2005 à 11:50

j'ai compris que le footer restait en bas de la page parce que le contenu est plus grand que la page par contre je ne vois pas de solution pour avoir un footer variable en fonction du contenu... mon navigateur est Safari sous Mac (une cause du problème ?)

~~supprimé~~

23 Nov 2005 à 14:15

peut etre, tu as essayé avec d'autres navigateurs ?

gcyrillus

Modérateur

23 Nov 2005 à 14:31

bonjour,
veut tu essayer cette page ?
Il n'y a pas de position absolute ni relative, mais comme dit dans un dernier poste , le footer ne se replace pas sur les petit contenu dans opera, mais ce bug semble etre un bug deja bien connu d'opera...

<!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>Gcyrillus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
html,body {
   height:100%;
   margin:0;
   padding:0;
   background-color:#F68667;
}
/* appliquons quelques valeurs par defaut */
* {
   line-height:1em;
   font-family:Verdana,sans-serif;
   margin:0;
   padding:0;
   color:#666;
   font-size:18px;
   line-height:1.1em;
}
body {
   width:832px;
   background-color:#09A3D5 ;
   margin:0 auto;
   height:100%;
   padding-top:0.1%;/* on se garde le scroll pour les petits contenus */
}
/*let's put content in here */
#site {
 
   height:auto!important;
   height:100%;
   min-height:100%;
   margin:0 auto;
   padding:0;
   background-color:#09A3D5 ;
}
#haut {
   background-color:#526392 ;
   height:120px;
}
 
#menu ul { 
   margin: 0;
   padding-left:2em;
   padding-top:5px; 
}
#menu ul li a span {color:#000;}
#menu ul li a  { 
   text-decoration:none;
   width:4em; 
   display:block; 
   line-height:25px; 
}

#menu ul li a:hover  {color:#fff;text-decoration:underline;   background-color:#09A3D5 ;}
/* contenu */
#contenu {
padding:20px 40px 75px 40px;
 
}
/*plaçons le footer */
#site {
   margin-bottom:-75px;/*remontons le footer */
}

.etirer {
   clear:both;
   display:block;
   margin:0;
   height:0.1px;
}
#pied {
   clear:left;
   height:75px;
   background-color:#526392 ;
   text-align:center;
   line-height:75px;/* assurons la hauteurs sous Ie et centrons verticalement une seule ligne de texte */
   color:#fff;
}
#menu-pied, #menu-pied * {display:inline;color:#fff;}
#menu-pied a:hover {color:#F68667;}

#gauche {

float:left;
height:500px;/* pour test */
background-color:red;/* pour test */

width: 480px;

padding: 5px;

}



#centre {



margin-left: 500px;

width: 300px;

background-color:#DCDCDC;

padding: 5px;

}
*/-->
</style>
</head>
<body>
<div id="site">
   <div id="haut">
      <div id="menu">
      <ul >
      <li><a href="#" >&nbsp;<span>home</span></a></li>
      <li><a href="#" >&nbsp;<span>About</span></a></li>
      <li><a href="#" >&nbsp;<span>contact</span></a></li>
      <li><a href="#" >&nbsp;<span>links</span></a></li>
      </ul>
      </div>
   </div>
<div id="gauche">a gauche</div>
 <div id="centre">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eget nibh. Curabitur varius purus ut felis. In id 
 
   turpis sed velit sollicitudin pellentesque. Suspendisse placerat rutrum magna. Duis a dui. Integer sapien. Phasellus    
 
ultrices purus vel augue. Aliquam nulla erat, faucibus ac, sagittis vel, feugiat ac, enim. etc ...</p><p>et comme dit dans un 

precedent post, il y a un petit defaut dans Opera sur les pages a petit contenu.</p>
 </div>
<span class="etirer"></span>
</div>
<div id="pied">      
      <ul id="menu-pied">
      <li><a href="#" >&nbsp;<span>home</span></a></li>
      <li><a href="#" >&nbsp;<span>About</span></a></li>
      <li><a href="#" >&nbsp;<span>contact</span></a></li>
      <li><a href="#" >&nbsp;<span>links</span></a></li>
      </ul>
      </div>
</body>
</html>

Cette page utilise des hack !important, je ne suis pas sur que cela plaise a IE mac...
gcyrillus
Modifié par gcyrillus (23 Nov 2005 - 19:27)

Temana

23 Nov 2005 à 14:53

je vais l'essayer... mais d'abord une petite question:

la fonction float:left permet de positionner des blocs sur la même ligne par contre tout dépend de la taille de la fenêtre du navigateur...
Si bloc1+bloc2 sont supérieur en largeur à la taille de lafenêtre du navigateur alors on aura bolc 2 sous bloc 1 ? Ai-je bien compris ?
La seule façon de les garder l'un à côté de l'autre est d'utiliser des blocs en positon absolute ?

~~supprimé~~

23 Nov 2005 à 15:19

oui, avec le risque de chevauchement que cela induit

gcyrillus

Modérateur

23 Nov 2005 à 15:25

oui, c'est ça, tant qu'ils ont de la place il se placent les uns a coté des autres,
la position absolue( j'aime pas trop car je me sens pas a l'aise avec) va avoir pour effet de les faire se chevauché.

L'ideal a mon sens est ,ou de faire en sorte qu'il aient une taille definie (en empechant IE de redimensionner en largeur avec eventuellement un "overflow-y:hidden;"), afin d'eviter ce retour a la ligne ou bien d'autoriser le conteneur principale a s'elargir .
J'espere que ça repond a ta question. Smiley smile

a plus

<edit> grilled ! au moins tu sais a quoi t'attendre avec le position:absolute; ! Smiley smile

Modifié par gcyrillus (23 Nov 2005 - 15:27)

Pages :

Sujet clos