28173 sujets

CSS et mise en forme, CSS3

Header et Footer Fixe

Salut à tous,

Je souhaite faire un site avec un header et un footer fixe. Comme, depuis que j'ai découvert ce site, je fais une petite recherche et je TROUVE :

Comment faire une mise en page de 100% de hauteur avec des parties fixes (en-tête, par ex) ?

Je trouve ce lien :
http://www.456bereastreet.com/lab/cssframes/

Génial, c'est (presque) ce que j'ai besoin sauf que je veux un design fluide (et pas du fixe en 720px).

Pas grave sauf que mon header (et footer) en IE surplombe la barre de défilement. Grrr ... J'ai un peu tout essayé mais rien n'y fait

Quelqu'un aurait-il une idée pour contourner ce problème.

P.S. : Désespéré je menace de revenir aux frames. Aidez-moi Smiley biggol
Je suis pas sur d avoir compris le probleme... Tu peux montrer (url, image) ton probleme? Il y a tout le css dans le code source de la page que tu as mise en lien au passage, donc tu devrais arriver a tes fins en modifiant legerement ca, non?
Le problème est simple :
Tu prends la css de la page et tu modifies 720px par 100%.
Tu verras que le header cache la scrollbar ...
J'ai appliqué la même mise en page et me suis retrouvé dans le même état que toi.
Du coup j'ai cherché et trouvé ça.
En appliquant ce modèle, l'ascenseur vertical sera au dessus du pied de page.

Après, je me suis inspiré de ton modèle pour retrouver le découpage qui m'intéressait :

<style type="text/css">
html, body, page {
   margin : 0;
   padding : 0;
 }
 body{
  padding-bottom : 180px;
 }
 div#pied{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:180px;
 }
 @media screen{
  body>div#pied{
   position: fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#page{
  height:100%;
  overflow:auto;
  text-align : center ;
 }
 #menu {
  float : left ;
  width : 180px;
 }
 #milieu {
  width : 726px;
  margin : 0 auto ;
  text-align : left;
 }
 #contenu {
  margin-left : 180px;
 }
</style>
</head>

<body>
<div id="pied"> Pied </div>
<div id="page">
 <div id="milieu"> 
  <h1>Titre</h1>
  <div id="menu"> Menu
  </div>
  <div id="contenu"> Phaedri libellos...
  </div>
 </div>
</div>
</body>


Smiley smile
Merci pour la réponse et ta recherche Smiley langue

Je ne suis actuellement pas sur mon pc et donc ne peut tester. As-tu essayé la solution header et footer fixe sur IE ? Firefox ? etc ...

En attendant ta réponse, j'ai moi aussi trouvé une solution qui vaut ce qu'elle vaut : c'est de mettre 98% au lieu de 100%. Ca marche nickel à part 1 bug IE Smiley fache :
Dans un formulaire, les <select> (et uniquement les <select>) passe au-dessus de mon header (et footer) ce qui fait très &@#çà.

Quelqu'un as-t'il déjà eu ce problème ?

Promis, dès que j'ai récupéré mon PC, je vous envoie une photo (ça vaut de l'or, merci microsoft !!!) Smiley bawling
Sujet clos
Aller à