OVH Cloud OVH Cloud

[CSS] souci de scroll...

10 réponses
Avatar
julien.gautier
Bonjour à tous,


j'avais déjà posé une question proche de celle-ci il y a quelques temps,
mais je ne m'en sors vraiment pas tout seul, c'est pourquoi je reviens
vers vous.



je veux faire une page avec en-tête et pied (et je précise que je débute
en css).

le contenu s'affiche au centre, et sa taille est variable (et inconnue
d'avance) : ce contenu est une page php appelée par un include, composée
d'un div contenant un tableau.


je voudrais que les en-tête et pied s'affichent constamment (quelle que
soit la taille de la fenètre), et qu'un scroll apparaisse
automatiquement pour permettre de faire défiler le contenu : mais je
souhaiterais que ce scroll n'ait d'effet que sur le contenu, et en
particulier que le pied de page reste en bas de la fenètre...

Pour l'instant, j'arrive à faire cela :

<http://jgautier.dyndns.org/DBAudio4/admin/administration_test.php?page=
inc_adm_test.php>

mais, comme vous pouvez le constater, le comportement n'est pas celui
décrit ci-dessus : le mouvement du scroll agit aussi sur le pied de
page, et le contenu passe "en dessous" du pied de page...


Est-il possible d'obtenir ce que je cherche ? Si oui, comment ?

Merci d'avance pour votre aide.

10 réponses

Avatar
Thibaut Allender
on 24/05/2004 20:03, Julien Gautier wrote :

Est-il possible d'obtenir ce que je cherche ? Si oui, comment ?



oui, tu peux definir un div avec une taille fixe (ou pseudo fixe, par
exemple height:80%) et lui assigner un overflow:auto;
grace a l'overflow, si le contenu du div "deborde", cela genere un
scrolling, uniquement sur le div en question

--
thibaut allender | freelance | web|system developer|designer
+32 496 26 75 76 | http://capsule.org *new version*
Avatar
Bankiz
Julien Gautier wrote:

Bonjour à tous,


j'avais déjà posé une question proche de celle-ci il y a quelques temps,
mais je ne m'en sors vraiment pas tout seul, c'est pourquoi je reviens
vers vous.



je veux faire une page avec en-tête et pied (et je précise que je débute
en css).

le contenu s'affiche au centre, et sa taille est variable (et inconnue
d'avance) : ce contenu est une page php appelée par un include, composée
d'un div contenant un tableau.


je voudrais que les en-tête et pied s'affichent constamment (quelle que
soit la taille de la fenètre), et qu'un scroll apparaisse
automatiquement pour permettre de faire défiler le contenu : mais je
souhaiterais que ce scroll n'ait d'effet que sur le contenu, et en
particulier que le pied de page reste en bas de la fenètre...

Pour l'instant, j'arrive à faire cela :

<http://jgautier.dyndns.org/DBAudio4/admin/administration_test.php?page > inc_adm_test.php>

mais, comme vous pouvez le constater, le comportement n'est pas celui
décrit ci-dessus : le mouvement du scroll agit aussi sur le pied de
page, et le contenu passe "en dessous" du pied de page...


Est-il possible d'obtenir ce que je cherche ? Si oui, comment ?

Merci d'avance pour votre aide.





Supposons que le contenu soit composé de 3 zone clairement identifiée :
1. en_tete
2. corps_de_page
3. pied_de_page

Et si tu structures cela en 3 div

<div id='entete'>...</div>
<div id='corpsdepage'>...</div>
<div id='pieddepage'>...</div>

tu rajoute un style overflow:auto à corpsdepage

<div id='entete'>...</div>
<div id='corpsdepage' style='overflow:auto'>...</div>
<div id='pieddepage'>...</div>

Mais cela ne vaut que si la hauteur de cette zone est limitée, sans quoi
elle prendra la place nécessaire dans la fenêtre du navigateur et
l'overflow, à auto, ne sera pas nécessaire (donc invisible)

JC

--
http://www.zeportaille.com
ZePortaille : Annuaire francophone (+123.000 sites)
Avatar
Bankiz
Julien Gautier wrote:

Bonjour à tous,


j'avais déjà posé une question proche de celle-ci il y a quelques temps,
mais je ne m'en sors vraiment pas tout seul, c'est pourquoi je reviens
vers vous.



je veux faire une page avec en-tête et pied (et je précise que je débute
en css).

le contenu s'affiche au centre, et sa taille est variable (et inconnue
d'avance) : ce contenu est une page php appelée par un include, composée
d'un div contenant un tableau.


je voudrais que les en-tête et pied s'affichent constamment (quelle que
soit la taille de la fenètre), et qu'un scroll apparaisse
automatiquement pour permettre de faire défiler le contenu : mais je
souhaiterais que ce scroll n'ait d'effet que sur le contenu, et en
particulier que le pied de page reste en bas de la fenètre...

Pour l'instant, j'arrive à faire cela :

<http://jgautier.dyndns.org/DBAudio4/admin/administration_test.php?page > inc_adm_test.php>

mais, comme vous pouvez le constater, le comportement n'est pas celui
décrit ci-dessus : le mouvement du scroll agit aussi sur le pied de
page, et le contenu passe "en dessous" du pied de page...


Est-il possible d'obtenir ce que je cherche ? Si oui, comment ?

Merci d'avance pour votre aide.




Supposons que le contenu soit composé de 3 zone clairement identifiée :
1. en_tete
2. corps_de_page
3. pied_de_page

Et si tu structures cela en 3 div

<div id='entete'>...</div>
<div id='corpsdepage'>...</div>
<div id='pieddepage'>...</div>

tu rajoute un style overflow:auto à corpsdepage

<div id='entete'>...</div>
<div id='corpsdepage' style='overflow:auto'>...</div>
<div id='pieddepage'>...</div>

Mais cela ne vaut que si la hauteur de cette zone est limitée, sans quoi
elle prendra la place nécessaire dans la fenêtre du navigateur et
l'overflow, à auto, ne sera pas nécessaire (donc invisible)

Bankiz

--
"Je suis peut-être froid, mais je ne suis pas givré."

http://www.zeportaille.com - L'annuaire francophone (+123.000 sites)
Avatar
Bankiz
Julien Gautier wrote:

Bonjour à tous,


j'avais déjà posé une question proche de celle-ci il y a quelques temps,
mais je ne m'en sors vraiment pas tout seul, c'est pourquoi je reviens
vers vous.



je veux faire une page avec en-tête et pied (et je précise que je débute
en css).

le contenu s'affiche au centre, et sa taille est variable (et inconnue
d'avance) : ce contenu est une page php appelée par un include, composée
d'un div contenant un tableau.


je voudrais que les en-tête et pied s'affichent constamment (quelle que
soit la taille de la fenètre), et qu'un scroll apparaisse
automatiquement pour permettre de faire défiler le contenu : mais je
souhaiterais que ce scroll n'ait d'effet que sur le contenu, et en
particulier que le pied de page reste en bas de la fenètre...

Pour l'instant, j'arrive à faire cela :

<http://jgautier.dyndns.org/DBAudio4/admin/administration_test.php?page > inc_adm_test.php>

mais, comme vous pouvez le constater, le comportement n'est pas celui
décrit ci-dessus : le mouvement du scroll agit aussi sur le pied de
page, et le contenu passe "en dessous" du pied de page...


Est-il possible d'obtenir ce que je cherche ? Si oui, comment ?

Merci d'avance pour votre aide.





Comme répondu sur f.c.i.w.a ...

Supposons que le contenu soit composé de 3 zones clairement identifiées :
1. en_tete
2. corps_de_page
3. pied_de_page

Et si tu structures cela en 3 div

<div id='entete'>...</div>
<div id='corpsdepage'>...</div>
<div id='pieddepage'>...</div>

tu rajoute un style overflow:auto à corpsdepage

<div id='entete'>...</div>
<div id='corpsdepage' style='overflow:auto'>...</div>
<div id='pieddepage'>...</div>

Mais cela ne vaut que si la hauteur de cette zone est limitée, sans quoi
elle prendra la place nécessaire dans la fenêtre du navigateur et
l'overflow, à auto, ne sera pas nécessaire (donc invisible)

Bankiz
--
"Je suis peut-être un peu froid, mais je ne suis pas gîvré."

http://www.zeportaille.com - L'annuaire francophone (+123.000 sites)
Avatar
julien.gautier
Thibaut Allender
wrote:

on 24/05/2004 20:03, Julien Gautier wrote :

> Est-il possible d'obtenir ce que je cherche ? Si oui, comment ?

oui, tu peux definir un div avec une taille fixe (ou pseudo fixe, par
exemple height:80%) et lui assigner un overflow:auto;
grace a l'overflow, si le contenu du div "deborde", cela genere un
scrolling, uniquement sur le div en question




Ok, mais dans ce cas le scroll sera interne à la fenètre, et il pourrait
donc, dans certains cas, y en avoir 2 : le scroll de la fenètre
elle-même, et le scroll du div ?
Avatar
julien.gautier
Bankiz wrote:


Supposons que le contenu soit composé de 3 zone clairement identifiée :
1. en_tete
2. corps_de_page
3. pied_de_page



c'est ça.


Et si tu structures cela en 3 div

<div id='entete'>...</div>
<div id='corpsdepage'>...</div>
<div id='pieddepage'>...</div>




ok.

tu rajoute un style overflow:auto à corpsdepage

<div id='entete'>...</div>
<div id='corpsdepage' style='overflow:auto'>...</div>
<div id='pieddepage'>...</div>



ok. Ce n'est pas la fenètre qui doit scroller mais le div....

mais du coup, il peut y avoir 2 scroll ?


Mais cela ne vaut que si la hauteur de cette zone est limitée, sans quoi
elle prendra la place nécessaire dans la fenêtre du navigateur et
l'overflow, à auto, ne sera pas nécessaire (donc invisible)




ok.
Avatar
Bankiz
Julien Gautier wrote:


mais du coup, il peut y avoir 2 scroll ?




Oui, il peut y avoir 2 scroll, c'est un risque.
D'où la nécessité de bien controler la répartition en hauteur des
différentes zones.

Idéalement, en %, je pense que il y a moyen d'éviter le scroll de la fenêtre

J'ai pas testé, mais si :

en tete = 25% (de la fenêtre)
bas de page = 10% (de la fenêtre)

alors
corps de page DOIT ETRE <= 65% (de la fenêtre)

il ne devrait y avoir que le scroll du div.

Bankiz

--
"Je suis peut-être un peu froid, mais je ne suis pas gîvré."

http://www.zeportaille.com - L'annuaire francophone (+123.000 sites)
Avatar
Thibaut Allender
on 24/05/2004 21:41, Julien Gautier wrote :

Ok, mais dans ce cas le scroll sera interne à la fenètre, et il pourrait
donc, dans certains cas, y en avoir 2 : le scroll de la fenètre
elle-même, et le scroll du div ?



pas si tout est relatif

ex :
header : 10%
contenu : 80%
footer : 10%

il n'y aura jamais de scroll fenetre (du moins vertical) dans ce cas

--
thibaut allender | freelance | web|system developer|designer
+32 496 26 75 76 | http://capsule.org *new version*
Avatar
julien.gautier
Thibaut Allender
wrote:

on 24/05/2004 21:41, Julien Gautier wrote :

> Ok, mais dans ce cas le scroll sera interne à la fenètre, et il pourrait
> donc, dans certains cas, y en avoir 2 : le scroll de la fenètre
> elle-même, et le scroll du div ?

pas si tout est relatif

ex :
header : 10%
contenu : 80%
footer : 10%

il n'y aura jamais de scroll fenetre (du moins vertical) dans ce cas




ok, d'accord, je comprends : l'ensemble occupant toujours 100%...


par contre, la hauteur en px des div en-tete et pied variera, non ?
Avatar
julien.gautier
Bankiz wrote:

Julien Gautier wrote:


> mais du coup, il peut y avoir 2 scroll ?
>

Oui, il peut y avoir 2 scroll, c'est un risque.
D'où la nécessité de bien controler la répartition en hauteur des
différentes zones.

Idéalement, en %, je pense que il y a moyen d'éviter le scroll de la fenêtre

J'ai pas testé, mais si :

en tete = 25% (de la fenêtre)
bas de page = 10% (de la fenêtre)

alors
corps de page DOIT ETRE <= 65% (de la fenêtre)

il ne devrait y avoir que le scroll du div.




ok, merci.