Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1259 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mise en page complexe

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Mise en page complexe

n°1582234
Pato el ca​nardo
Posté le 04-07-2007 à 09:15:05  profilanswer
 

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
mood
Publicité
Posté le 04-07-2007 à 09:15:05  profilanswer
 

n°1582275
cgo2
Dum spiro spero
Posté le 04-07-2007 à 10:23:13  profilanswer
 

Et pourquoi tu veux absolument utiliser le positionnement absolu ?


---------------
When it's from Finland it's good.  - Mon blog
n°1582307
Pato el ca​nardo
Posté le 04-07-2007 à 11:27:22  profilanswer
 

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 :)

n°1582311
cgo2
Dum spiro spero
Posté le 04-07-2007 à 11:42:21  profilanswer
 

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
n°1582316
Pato el ca​nardo
Posté le 04-07-2007 à 11:50:04  profilanswer
 

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
n°1582327
cgo2
Dum spiro spero
Posté le 04-07-2007 à 11:56:55  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mise en page complexe

 

Sujets relatifs
[ACCESS] PB requete Mise a jourinterdire mise en cache css
comment changer juste un élement d'une page sans tout rechargerinserer une image automatiquement sur une page web
afficher balise html sur page html ?[Ajax] Traitement de l'ajax dans une page fille
Conflit entre deux js dans une page HTML (inclure plusieurs js)Lien page réduite
Mettre un site en page de démarrage Requête complexe : probable jointure externe
Plus de sujets relatifs à : Mise en page complexe


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR