Mise en page : Header de hauteur fixe, contenu de hauteur élastique et foo ter de hauteur fixe

Le
Bruno Baguette
Bonjour !

J'ai une mise en page, a priori "simple" (je met des guillemets car cela
ne l'est visiblement pas), qui me pose des soucis :

Je cherche à obtenir une page composée de 3 "lignes" :
- Un en-tête de hauteur fixe
- Un menu et contenu de hauteur élastique (tout le reste de la hauteur
disponible)
- Un pied de page de hauteur fixe.

En d'autres termes, la ligne contenant le menu et le contenu doit
occuper la hauteur de la fenêtre moins la hauteur de l'en-tête moins la
hauteur du pied de page. Le pied de page étant donc "collé" sur le bas
de la fenêtre.

Seul le contenu peut avoir une barre de défilement quand le texte est
plus que la zone d'affichage. Les autres éléments (en-tête, menu, pied
de page) doivent toujours être visibles ne doivent pas bouger.

J'ai essayé de faire cela en CSS et DIV, mais je n'ai pas réussi à faire
en sorte que la hauteur des DIV menu et contenu s'adaptent
automatiquement en fonction de la hauteur de la fenêtre moins la hauteur
des deux autres DIV.

J'ai bien jeté un oeil sur
<http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS> mais je
n'y ai pas trouvé la solution (le 12e exemple s'en approche, mais c'est
le footer et non le contenu qui possède une hauteur élastique). Je n'ai
pas trouvé non plus le moyen de faire en sorte que ce soit le contenu
qui recoive cette hauteur élastique :-/

Je me suis dit que j'allais faire "exception" (bien que sémantiquement,
ce soit nul), et de faire cela en tableau mais sans succès : quand le
contenu est trop grand, au lieu d'avoir le scroll attendu dans la zone
du contenu, c'est le tableau qui dépasse de la fenêtre :-(

Voici la page de test : http://cjoint.com/data/dEsW5ERsmR.htm

Auriez-vous une piste à me donner pour mettre au point ce layout ?

De préférence sans tableau, sinon, en utilisant un seul tableau (pour ne
pas trop cochonner).

D'avance merci pour vos lumières !

--
Bruno Baguette
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
docanski
Le #22078581
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Bruno Baguette nous narre ce qui suit en ce 30/03/2008 19:09 :
Bonjour !



Bonjour !

Je cherche à obtenir une page composée de 3 "lignes" :
- Un en-tête de hauteur fixe
- Un menu et contenu de hauteur élastique (tout le reste de la hauteur
disponible)
- Un pied de page de hauteur fixe.



Ça doit pouvoir se faire.

J'ai essayé de faire cela en CSS et DIV, mais je n'ai pas réussi à faire
en sorte que la hauteur des DIV menu et contenu s'adaptent
automatiquement en fonction de la hauteur de la fenêtre moins la hauteur
des deux autres DIV.



Hu ?

Auriez-vous une piste à me donner pour mettre au point ce layout ?
De préférence sans tableau, sinon, en utilisant un seul tableau (pour ne
pas trop cochonner).



Sans tableau, ceci devrait pouvoir t'intéresser :
http://docanski.free.fr/valastuc/fds24a.htm

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Bruno Baguette
Le #22078321
docanski a écrit :

Auriez-vous une piste à me donner pour mettre au point ce layout ?
De préférence sans tableau, sinon, en utilisant un seul tableau (pour
ne pas trop cochonner).



Sans tableau, ceci devrait pouvoir t'intéresser :
http://docanski.free.fr/valastuc/fds24a.htm



Bonjour !

Merci pour le lien, mais (sauf erreur), malheureusement tous les
éléments possèdent une hauteur exprimée en %.

Or, dans le cas de figure que je cherche à régler, la tête et le pied
possèdent une taille fixe (en px) et doivent être positionnés en haut et
en bas de la fenêtre, le corps prenant toute la place disponible dans la
fenêtre.

Je poursuis mes recherches, et (si je trouve quelque chose) je ferais un
compte-rendu sur le forum.

--
Bruno Baguette
docanski
Le #22078311
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Bruno Baguette nous narre ce qui suit en ce 2/04/2008 15:58 :

Bonjour !



Bonjour,

Merci pour le lien, mais (sauf erreur), malheureusement tous les
éléments possèdent une hauteur exprimée en %.



Dans le cas contraire, le résultat ne pourrait être obtenu dans les
mêmes proportions selon la taille de fenêtre du visiteur.

Or, dans le cas de figure que je cherche à régler, la tête et le pied
possèdent une taille fixe (en px)



Rien ne t'empêche de placer la tête et le pied de page en px à
l'intérieur de ceux exprimés en %. En adoptant une couleur de fond
identique, cela ne se remarquera *presque* pas.

et doivent être positionnés en haut et
en bas de la fenêtre, le corps prenant toute la place disponible dans la
fenêtre.



C'est le cas dans l'exemple donné.

Je poursuis mes recherches, et (si je trouve quelque chose) je ferais un
compte-rendu sur le forum.



Ça m'intéresserait, en effet.
Mais j'ai des doutes sur la faisabilité dans des conditions d'affichage
correctes en mélangeant des valeurs relatives et fixes *pour toutes*
*dimensions* *de fenêtres*.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Daniel Déchelotte
Le #22078241
Salut,

Bruno Baguette a écrit :

docanski a écrit :

>> Auriez-vous une piste à me donner pour mettre au point ce layout ?
[Header de hauteur fixe, contenu de hauteur élastique et footer de
hauteur fixe]



Est-ce que ceci correspond à ce que tu veux ?
http://yo.dan.free.fr/tmp/bruno.html

--
Daniel Déchelotte
http://yo.dan.free.fr/
Publicité
Poster une réponse
Anonyme