Problème avec mon template de page

Bonjour à tou(te)s,

Voilà, j'ai créé un template pour mes pages, mais j'ai quelques soucis (forcément, sinon je ne serais pas là :aie:).
Grosso modo, pour expliquer ce que je veux obtenir, si on prend cette image (tirée du tutoriel CSS) :

http://pbnaigeon.developpez.com/tuto...resultat_2.gif

J'ai bien mon Bandeau (div template-header), j'ai bien mon pied de page (template-footer).
Le bandeau Menu correspond à mon template-tree (si ce n'est que le mien ne s'étend pas forcément sur toute la hauteur, mais ce n'est pas grave).
Quant au contenu, il correspond à mon div template-main-page, qui lui même est composé de 3 divs : template-error-box, template-title et template-body. Les 2 premiers de ces DIV vont être utilisés pour afficher des informations, mais qui ne seront généralement pas très nombreux (et donc les DIV ne seront jamais très hauts). C'est le 3e de ces DIV qui va contenir le gros de mon interface...

Je vous mets à la fin mon HTML et mon CSS.

A noter que je dois faire fonctionner cela sur Internet Explorer 6 uniquement (oui, je sais c'est mal, mais je n'ai pas le choix).

Mon problème principal est que je souhaiterais que mon template-body prenne toute la place possible en hauteur, et s'il dépasse, qu'il me mette des scroll bars.
Cependant, à moins de mettre une valeur fixe pour height, je n'arrive pas à ce que je veux (j'ai, au mieux, une scrollbar qui fait défiler toute la page).

Comment puis-je faire ?

C'est également la première fois que je fais un vrai template de page en CSS avec des DIV, je suis donc absolument friand de toute remarque que vous pourriez faire sur mon code.

Merci d'avance !

Mon code CSS (bien entendu les border ne sont là que pour m'aider à créer mon interface, je les supprimerais par la suite):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
div#template-header {
    border: solid 1px red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
}
 
div#template-tree {
    border: solid 1px blue;
    float: left;
    position: relative;
    top: 120px;
    left: 0;
    width: 15%;
}
 
div#template-main-page {
    border: solid 1px black;
    float: right;
    position: absolute;
    top: 120px;
    right: 0;
    width: 85%;
    height: auto;
}
 
div#template-error-box {
    border: solid 1px yellow;
    position: relative;
    top: 0;
    left: 0;
    height: 10px;
}
 
div#template-title {
    border: solid 1px orange;
    height: 10px;
    position: relative;
    top: 0;
    left: 0;
}
 
div#template-body {
    border: solid 2px green;
    position: relative;
    top: 0;
    left: 0;
    overflow: auto;
    height: 600px; /* Je ne veux pas avoir une valeur fixe ici !! */
    width: 100%;
}
 
div#template-footer {
    position : fixed; /* This is needed for other browsers than IE */
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    background: #480819;
    color: white;
    /* Workaround for IE... */ 
    position : expression("absolute");
    width : expression("100%");
    top : expression(document.body.clientHeight - 23 + document.body.scrollTop + this.offsetHeight - this.offsetHeight);
    left : expression("0px");
}

Mon code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<body>
    <!-- The header of the page, containing the logo, the user information, and then the menu. -->
    <div id="template-header">
    </div>
 
    <div id="template-tree">
        L'arbre de navigation...
    </div>
 
    <div id="template-main-page">
        <!-- The tree. -->
 
        <!-- The error box. -->
        <div id="template-error-box">
            Some error...<br/>Another error...
        </div>
 
        <!-- The title. -->
        <div id="template-title">
            The title of the page...
        </div>
 
        <!-- The body. -->
        <div id="template-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br/>
        </div>
    </div>
 
    <div id="template-footer">
        Bla bla bla
    </div>
</body>

Si j'ai bien compris le rendu que tu veux avoir, c'est un header fixe, un menu fixe, un footer fixe, et une scrollbar sur le corps dans le cas où le texte dépasse ?

Oui, c'est à peu près ça.

Pour reformuler, je demande comment faire pour qu'un DIV (template-body dans mon exemple) prenne toute la hauteur qu'il peut jusqu'en bas de l'écran, mais qu'il affiche une scrollbar (qui ne scrollera que ce DIV) s'il a trop de choses à afficher...

Dans le tutorial donné c'est facile, on a une hauteur fixe, définie en pixels. Mais moi je ne veux pas ça...

Une idée alors ?

Le problème pour que le scroll ne soit que sur le div en question, c'est que la hauteur de celui-ci doit être définie, sinon il s'adapte à son contenu. Après on peut essayer de donner des hauteurs en %, mais ça posera problème encore de padding et margin.

Une solution plus facile à mettre en place, serait d'avoir un scroll qui prendrait toute la hauteur de la fenêtre, mais qui ne ferait défiler que le div en question.

Citation:

Envoyé par Bisûnûrs

Une solution plus facile à mettre en place, serait d'avoir un scroll qui prendrait toute la hauteur de la fenêtre, mais qui ne ferait défiler que le div en question.

Je pensais éventuellement à faire quelque chose comme ça...
Comment m'y prendrais-je, pour que ce soit le "plus propre" possible ?

Un truc comme ça :
http://josselin.willette.free.fr/cod...xe/index4.html
?

Fonctionne sur IE 6, 7, Firefox 2, 3.

Javascript doit être activé sur IE 6.

Bah écoute, ça ressemble plutôt pas mal à ce que je veux obtenir :D
Merci tout plein.

Je vais essayer de le mettre dans mon projet demain matin, et voir si je ne rencontre pas de nouvelles difficultés.

(je mettrais en résolu demain matin si c'est bon).

Bon, je comprends pas, si je vais sur ta page avec mon IE6, ça fait exactement ce que je veux, mais si je mets tout le code dans mon appli, je n'obtient pas la même chose :cry:
Au mieux, j'ai à peu près la position des DIV qui est correcte, mais le scroll me fait descendre toute la page, pas seulement le DIV principal...
Je me demande si ce n'est pas dû à certains conflits avec des CSS qui me sont importées automatiquement (je ne peux pas faire autrement) par mon framework graphique...

Une petite question sur ton code :

Code:

top : expression( ignore = document.documentElement.scrollTop + "px" );

Quel est l'intérêt de la partie "ignore =" ?

On peut avoir un aperçu du code CSS importé automatiquement ?

L'intérêt du ignore = est que IE a besoin d'affecter une valeur à une variable pour recalculer le top à chaque fois, sinon il ne recalcule pas. Donc c'est une variable qui au final est ignorée.

Difficile en réalité...
Le nombre de ces scripts (en général une dizaine) dépend du contenu des pages...
Etant donné qu'il me reste encore beaucoup de choses à voir sur mon application, je mets de côté ce problème (quelle idée aussi de me demander de revoir toute la structure des pages d'une application sur laquelle je ne bosse pas, et ce 2 jours avant le passage en UAT !)

Du coup, pour l'instant je pars avec gross-modo le code CSS que j'avais présenté, mais en ajoutant une mini bidouille Javascript qui va donner la bonne valeur au height du template-body. Ca marche bien, sauf quand l'utilisateur redimensionne l'écran...

Merci Bisûnûrs, je reviendrais sans doute vers toi le moment voulu...

Citation:

Envoyé par romaintaz

sauf quand l'utilisateur redimensionne l'écran...

Dans ce cas-là tu peux remettre le calcul de la hauteur dans le onresize de la balise body.

Citation:

Envoyé par Bisûnûrs

Dans ce cas-là tu peux remettre le calcul de la hauteur dans le onresize de la balise body.

Trop une bonne idée, je n'y avais pas songé :king:

Bon, je reviens sur mon petit thread...

J'ai fini par résoudre le problème du scroll en utilisant ton code Bisûnûrs !
Mon souci est qu'en réalité, je zappait complètement la déclaration du DOCTYPE, à savoir

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Or sans lui, point de footer ni de scroll correct...
Dire que je pensais que ça ne servait à rien ces trucs :aie:

Encore merci Bisûnûrs ! :yaisse2:

Bonjour, je reviens à la charge parce que j'ai un autre souci avec ce template...

J'utilise IE6 (je n'ai pas le choix), et le problème c'est que dès que je scrolle la page vers le bas, tous les combobox de la partie principale s'affichent par dessus le header (alors que le reste est bien caché).

Je sais que c'est un bug de IE6, avec la gestion des z-index de ces composants, mais y aurait-il un moyen de régler ce problème ??

Tu n'as pas le choix que de passer par une iframe ... C'est le seul élément qui passe par dessus les select sur IE6. Mais bizarrement, tous les éléments peuvent passer par dessus les iframe.

Exemple de code en Javascript pour créer ton iframe dynamiquement :
http://javascript.developpez.com/faq...put.div.select

:yaisse:

T'es trop fort Bisûnûrs !
J'ai adapté le code en créant directement dans mon template un iframe auquel je donne les mêmes définitions CSS que pour le div template-header, au z-index près (2 pour le DIV, 1 pour l'iframe).

Mon template est tout beau grâce à toi :king: