PHWinfo banniere

Titres
PORTAIL ANNUAIRE ARTICLES COMPARATEUR HÉBERGEURS DEVIS FORUMS RÉDUCTEUR D'URL
Précédent   PHWinfo > Autres forums > Forum Programmation & Conception > fr.comp.info.auteurs > Mise en page : Header de hauteur fixe, contenu de hauteur élastique et footer de hauteur fixe
S'inscrire FAQ Membres Recherche Messages du jour Marquer les forums comme lus
Mise en page : Header de hauteur fixe, contenu de hauteur élastique et footer de hauteur fixe

Réponse
 
LinkBack Outils de la discussion
Vieux 30/03/2008, 08h07   #1
docanski
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Mise en page : Header de hauteur fixe, contenu de hauteur élastique et footer de hauteur fixe

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/
  Réponse avec citation
Vieux 30/03/2008, 18h09   #2
Bruno Baguette
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Mise en page : Header de hauteur fixe, contenu de hauteur élastique et footer de hauteur fixe

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
  Réponse avec citation
Vieux 02/04/2008, 14h58   #3
Bruno Baguette
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Mise en page : Header de hauteur fixe, contenu de hauteur élastique et footer de hauteur fixe

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
  Réponse avec citation
Vieux 02/04/2008, 16h09   #4
docanski
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Mise en page : Header de hauteur fixe, contenu de hauteur élastique et footer de hauteur fixe

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/




  Réponse avec citation
Vieux 05/04/2008, 20h47   #5
Daniel Déchelotte
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Mise en page : Header de hauteur fixe, contenu de hauteurélastique et footer de hauteur fixe

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/
  Réponse avec citation
Réponse


Outils de la discussion

Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


Fuseau horaire GMT +1. Il est actuellement 02h41.


Édité par : vBulletin® version 3.7.3
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC5 Tous droits réservés.
Version française #16 par l'association vBulletin francophone
PHWinfo est un site Éducation Sans Frontières ©2000-2008
Ad Management by RedTyger
©Tous droits réservés par les parties respectives
Page generated in 1,62095 seconds with 13 queries