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). Mais par dessus tout : sans frame et sans iframe !

D'avance merci pour vos lumières !

--
Bruno Baguette

Le 30/03/2008 19:14, Bruno Baguette a écrit :
>
> 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.

Il me semble me rappeler que j'avais fait un truc de ce genre-là, du
moins pour les navigateurs conformes, mais qui se dégradait plutôt bien
dans Internet Explorer. Il faudrait que je le retrouve, mais je ne pro-
mets rien car l'idée du pied de page avait finalement été abandonnée.

> 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.

Ah non, ce n'est pas exactement pareil alors. En cas de dépassement de
la zone d'affichage (ce qui était rarissime avec les polices par défaut)
c'est toute la page qui gagnait un ascenseur. Enfin... je crois...

> [...]

Bon, je vais voir si je retrouve ça par miracle dans les fichiers non
effacés, mais sinon tant pis.

Le 30/03/2008 22:22, Olivier Miakinen a écrit :
>
>> 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.
>
> Ah non, ce n'est pas exactement pareil alors. En cas de dépassement de
> la zone d'affichage (ce qui était rarissime avec les polices par défaut)
> c'est toute la page qui gagnait un ascenseur. Enfin... je crois...

Bon, j'ai décidément mauvaise mémoire car cela devait être ce que tu
cherches à faire, mais je crois que je ne retrouverai pas ce que j'avais
fait.

En revanche, tu peux peut-être t'inspirer de la norme elle-même :
http://www.yoyodesign.org/doc/w3c/cs...ed-positioning

En particulier, #entete et #pied peuvent être en position fixed, mais
pour que ça se dégrade bien dans Internet Explorer 6 il faudrait que
le menu et le contenu soient dans le flux normal, avec pour le menu une
marge supérieure égale à la hauteur de l'en-tête, et pour le contenu
une marge inférieure égale à la hauteur du pied de page.

Olivier Miakinen a écrit :
> Le 30/03/2008 22:22, Olivier Miakinen a écrit :
>>> 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.
>
> Bon, j'ai décidément mauvaise mémoire car cela devait être ce que tu
> cherches à faire, mais je crois que je ne retrouverai pas ce que j'avais
> fait.
>
> En revanche, tu peux peut-être t'inspirer de la norme elle-même :
> http://www.yoyodesign.org/doc/w3c/cs...ed-positioning
>
> En particulier, #entete et #pied peuvent être en position fixed, mais
> pour que ça se dégrade bien dans Internet Explorer 6 il faudrait que
> le menu et le contenu soient dans le flux normal, avec pour le menu une
> marge supérieure égale à la hauteur de l'en-tête, et pour le contenu
> une marge inférieure égale à la hauteur du pied de page.


Les CSS n'ayant pas prévu d'autre cas que l'allongement automatique,
il ne reste que le JS pour fixer la hauteur résiduelle à confier au
"contenu" :
<http://www.pompage.net/pompe/pieds/>
ça date un peu (2004) et possiblement il peut être trouvé plus élégant ?

Sinon pour la méthode Olivier :
<http://www.pompage.net/IMG/html/page_modele12.html>
<http://www.pompage.net/pompe/cssdezero-9/>
<http://www.pompage.net/articles>

--
sm

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Olivier Miakinen nous narre ce qui suit en ce 31/03/2008 9:59 :

> En particulier, #entete et #pied peuvent être en position fixed, mais
> pour que ça se dégrade bien dans Internet Explorer 6

Le lien que j'ai donné ne répond pas à la question posée ?
Moz, Opera et IE 6.x affichent sans problème.

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/

Le 31/03/2008 12:08, docanski a écrit :
>
> Le lien que j'ai donné ne répond pas à la question posée ?

J'ai l'impression que si, mais je ne l'avais pas lu avant de faire ma
réponse. D'ailleurs il se trouve constituer un fil de discussion à lui
tout seul, et je ne comprends pas comment tu as fait pour répondre à
la question de Bruno plus de dix heures avant qu'il l'a posée... ;-)

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Olivier Miakinen nous narre ce qui suit en ce 31/03/2008 12:40 :
> Le 31/03/2008 12:08, docanski a écrit :
>> Le lien que j'ai donné ne répond pas à la question posée ?
>
> J'ai l'impression que si, mais je ne l'avais pas lu avant de faire ma
> réponse. D'ailleurs il se trouve constituer un fil de discussion à lui
> tout seul, et je ne comprends pas comment tu as fait pour répondre à
> la question de Bruno plus de dix heures avant qu'il l'a posée... ;-)

J'aurais aimé pouvoir répondre que je suis capable de me projeter dans
le temps. :-)
Mais non, ça aurait été trop beau ...
La pile de ma carte-mère est en fin de vie et ne mémorise plus certains
paramètres : depuis quelques jours, chaque fois que j'allume le PC, j'ai
quelques heures de retard et j'avais oublié de remettre le système à
l'heure quand j'ai répondu :-(
Par contre, je suis étonné qu'il constitue un fil de discussion à lui
tout seul chez toi : chez moi, il est dans le fil initié par Bruno. Les
mystères des serveurs de "news" ...

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/

--{ Olivier Miakinen a plopé ceci: }--

> tout seul, et je ne comprends pas comment tu as fait pour répondre à
> la question de Bruno plus de dix heures avant qu'il l'a posée... ;-)

$ man ipot
# modprobe ipot

--
"Le touriste, maintenant, il voudrait internet au gite. Mais pourquoi il
vient ici pour faire de l'internet ? C'est pas plus beau que des filles
à poil, ici ?"