28220 sujets

CSS et mise en forme, CSS3

Positionnement d'un pied de page

Salut,

Et oui, encore un problème de pied de page. Malgré de nombreuses recherches sur le forum, ainsi que dans la FAQ et après avoir lu l'article de Pompage.net : Les pieds (de page) dans le plat, je n'arrive toujours pas à positionner mon pied de page correctement.

Voila comment sont construites mes pages.

<body>
 <div id="page">

  <div id="header">...</div>

  <div id="menu">
   <h4>Titre du menu</h4>
    <ul>....</ul>
  </div>

  <div id="corps">...</div>

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

 </div>  
 <!-- Fin du bloc page-->
</body>


Voila la mise en page

body {
  font-family: "Trebuchet MS", Tahoma, Helvetica, arial, Sans-Serif;
  font-size: 0.8em;
  text-align: center; /* pour corriger le bug de centrage IE */
}

#page {
  position: relative;
  background-color: #ecebeb;
  border:5px #707070 double;
  min-height: 45em;
  height: 45em; /* Corrige les lacunes de IE */
  width: 780px;
  margin: 10px auto;
  text-align: left; /* on rétablit l'alignement normal du texte */
}

#menu {
  left: 7px;
  position:absolute;
  top: 170px;
  width: 160px;
}

#corps {
  border: 1px #ff9900 solid;
  margin-left: 174px;
  margin-right: 7px;
  background-color: white;
}


Mon problème ce rapproche un fortement de celui ci. La seule différence est que je ne peux pas placer le menu en float:left; car dans la corps de la page, il m'arrive d'avoir des elements positionner en float. Or si je met clear:both; dans le footer, et bien le clear s applique sur l'ensemble des floats de la page et je me retrouve avec de grands espaces blanc dans la corps de page. Exemple

Auriez vous une astuce pour positionner ce pied de page? Merci d'avance
Modifié par ymhotepa (11 Sep 2005 - 19:53)
Salut,

Apparamment, personne n'a d'idée pour résoudre mon problème. D'après ce que j'ai lu dans plusieurs articles et tuotriaux, le postionnement en float pour le menu est la seule facon de faire pour que mon pied de page soit toujours sous le menu quand le contenu de la page est plus court que lui.

Le problème est donc maintenant le contenu de la page avec ces grand blancs qui sont provoqués par clear:both;. J'ai trouvé un autre problème similaire sur ce forum, ici. La technique pour le résoudre est d'utilisé les marges et de mettres des <br /> pour positionner les elements suivants. Malheureusement, je ne peux utilisé cette technique car il y aura du texte a coté des images qui proviennent d'une base de données. Donc je ne peux prévoir à l'avance la longeur du texte car ce texte change à chaque chargement de la page.

Je recherche donc d'autres moyens de positionner ces images. Merci pour votre aide.
Modifié par ymhotepa (12 Sep 2005 - 17:05)
Salut,
peux-tu compléter le morceau de code pour nous dire comment tu gères le bloc header et le bloc footer dans ta css ?
Salut,

Voila la partie CSS qui gère le header et le pied de page

#footer {
  margin: 24px auto 8px auto;
  width: 560px;
  clear: both;
}

#header {
  background-image: url(../images/fond.png);
  background-position: right center;
  background-repeat: no-repeat;
  border-bottom: 4px #ffa74f double;
  background-color: white;
}

#menu {
  float: left;
  width: 160px;
  margin-left: 7px;
}


J'ai remis la partie CSS du menu car comme dit dans mon dernier post, je positionne mon menu en float. C'est le seul moyen (à priori) de faire pour que le footer soit toujours en bas dans mon cas.

Je vous met également la partie qui concerne les images du contenu qui sont positionné en float.

<h2><? echo $elt[1]; ?></h2>
 <span class="nb_img">[ <? echo $nb_img[0]?> tableaux ]</span>

if ($gauche) { 
 $class = "float_left"; 
 $gauche = false; 
} else { 
 $class = "float_right"; 
 $gauche = true; 
}

 <p class="photo_gal">
     <a href="./galerie.php?numG=<? echo $elt[0]; ?>">
      <img src="./<? echo $thumb[1]?>" alt="<? echo $thumb[0]; ?>" class="<? echo $class; ?>" /></a>
      <? echo $elt[2]; ?> <!-- texte extrait de la BDD -->
   </p>


Je ne met pas le code PHP car il n'apporte rien de spécial et risque de surcharger l'exemple. Je voudrai donc que mes images soient positionné une fois à gauche, une fois à droite et que le texte se positionne autour de l'image.

Merci d'avance pour votre aide
Modifié par ymhotepa (12 Sep 2005 - 19:05)
Sujet clos
Aller à