Problème avec mon template de page [Fait]

**romaintaz** · 23/10/2008, 10h15

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à

).
Grosso modo, pour expliquer ce que je veux obtenir, si on prend cette image (tirée du tutoriel CSS) :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

<div id="template-header">
</div>
<div id="template-tree">
L'arbre de navigation...
</div>
<div id="template-main-page">


<div id="template-error-box">
Some error...<br/>Another error...
</div>

<div id="template-title">
The title of the page...
</div>

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

**Bisûnûrs** · 23/10/2008, 14h47

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 ?

**romaintaz** · 23/10/2008, 14h55

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 ?

**Bisûnûrs** · 23/10/2008, 15h02

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.

**romaintaz** · 23/10/2008, 15h09

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 ?

**Bisûnûrs** · 23/10/2008, 16h34

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.

**romaintaz** · 05/11/2008, 08h58

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

**Bisûnûrs** · 05/11/2008, 09h10

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

**romaintaz** · 05/11/2008, 09h28

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

Problème avec mon template de page [Fait]

CSS

Vue hybride

Discussions similaires

Partager

Partager