Mise en page complexe

Mise en page complexe - HTML/CSS - Programmation

Marsh Posté le 04-07-2007 à 09:15:05    

Bonjour à tous  
Je suis en train de développer un truc pour un intranet (IE6/7) et je me retrouve face à un petit problème. J'aimerais obtenir une mise en page de cette sorte:

+--------------------------------------------------------+  << haut d'affichage
|                                                        |
|              taille fixe pour le logo                  |
|                                                        |
+--------------------------------------------------------+
|                                                        |
|        taille variable pour le corps                   |
|                                                        |
|                                                        |
|                                                        |
|                                                        |
|                                                        |
+--------------------------------------------------------+
|                                                        |
|              taille fixe pour le footer                |
|                                                        |
+--------------------------------------------------------+  << bas d'affichage


avec donc le logo tout en haut et le footer tout en bas. Le but étant que le corps s'adapte à l'espace contenu entre les deux... Et qu'il soit possible de scroller si nécessaire.
J'ai bien obtenu le bon résultat sous FF, mais impossible sous IE. En effet, sous IE6, lorsqu'on fixe le positionnement en "top", il ignore le "bottom"... Du coup, le corps ne s'étire pas correctement...
 
Des idées ?
 
EDIT: voilà ce que j'ai déjà:

Code :
  1. <!DOCTYPE html
  2.     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.    
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  6. <head>
  7.   <title>Test de mise en page</title>
  8.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  9.   <style type="text/css">
  10.   *, html, body { margin: 0; padding: 0}
  11.   html, body {height: 100%;}
  12.   #top {
  13.   background-color: red;
  14.   position: absolute;
  15.   top: 0;
  16.   width: 100%;
  17.   z-index: 2;
  18.   height: 100px;
  19.   }
  20.   #middle {
  21.   background-color: blue;
  22.   position: absolute;
  23.   width: 100%;
  24.   z-index: 1;
  25.   top: 100px;
  26.   bottom: 25px;
  27.   overflow: auto;
  28.   }
  29.   #bottom {
  30.   background-color: yellow;
  31.   position: absolute;
  32.   bottom: 0;
  33.   width: 100%;
  34.   z-index: 2;
  35.   height: 25px;
  36.   }
  37.   </style>
  38. </head>
  39. <body>
  40. <div id="top">header</div>
  41. <div id="middle">
  42.   <div id="content">
  43.     test first<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test last<br />
  44.   </div>
  45. </div>
  46. <div id="bottom">footer</div>
  47. </body>
  48. </html>


Message édité par Pato el canardo le 04-07-2007 à 09:17:22
Reply

Marsh Posté le 04-07-2007 à 09:15:05   

Reply

Marsh Posté le 04-07-2007 à 10:23:13    

Et pourquoi tu veux absolument utiliser le positionnement absolu ?


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 04-07-2007 à 11:27:22    

je ne veux pas absolument l'utiliser, seulement, je n'ai pas trouvé d'autre moyen d'obtenir ce genre de mise en page autrement :)

Reply

Marsh Posté le 04-07-2007 à 11:42:21    

Bon, que je comprenne bien...
 
Mettre un header en taille fixe, du contenu, et un footer en taille fixe ça ne demande rien d'autre que de fixer la hauteur (height) du header et du footer, soit 2 lignes de CSS. Rien de "complexe" là dedans à première vue.
 
Y a-t-il autre chose que tu veux faire et dont tu n'aurais pas parlé et/ou que je n'aurais pas saisi ?


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 04-07-2007 à 11:50:04    

le problème vient du corps de la page. Il doit s'étendre entre le header et le footer, quelle que soit la hauteur de la page (donc la résolution). Et il doit lorsque que le contenu du corps ne tient pas entièrement à l'écran, il doit être possible de scroller uniquement le corps de la page (donc en gardant le header et le footer fixes).

 

ça marche comme indiqué sur FF, mais pas sous IE6

 

EDIT: Le but étant de ne pas avoir de scroll de la page générale mais juste du corps, afin de courvir tout l'écran en permanence


Message édité par Pato el canardo le 04-07-2007 à 11:50:58
Reply

Marsh Posté le 04-07-2007 à 11:56:55    

D'accord, c'est bien ce que je pensais, en fait tu veux avoir un footer qui reste en permanance en bas de la fenêtre du navigateur ? Si c'est ça, c'est impossible (avec IE en tous cas).


---------------
When it's from Finland it's good.  - Mon blog
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed