Mise en page : Header de hauteur fixe, contenu de hauteur élastique et foo ter de hauteur fixe
4 réponses
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).
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
docanski
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/
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/
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
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 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.
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
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/
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/
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
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/
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
