probème de conception de mise en page par CSS
bonjour,
Malgré la lecture des (excellents ;) ) tutoriels, je rencontre un soucis de conception de mise en page par CSS.
J'ai un site "ancienne mode" avec des tableaux pour positionner tous mes éléments
et je souhaite faire évoluer sa structure vers quelque chose de plus moderne.
J'ai donc un travail de migration.
Je cherche donc à créer une mise en page structurée avec des conteneurs et blocs <div> dans lesquels je positionnerai dans un premier temps des tableaux HTML comme des objets.
Mais, n'ayant pas tout compris aux CSS, j'aurais besoin d'aide et de conseils.
Ce que je souhaiterais obtenir - en fichier joint Pièce jointe 51058 -
et ce à quoi j'arrive pour l'instant - en fichier joint Pièce jointe 51059.
La structure générale de ma mise en page est la suivante :
Un menu à gauche de largeur fixe et de hauteur fluide avec une entête et un pied fixes et de hauteur connue, encadrant le menu proprement dit qui s'adapte à la zone restante (avec barre de défilement si nécessaire)
Un contenu a droite qui occupe le reste de l'écran avec une entête et un pied de page propres de hauteur minimale et de largeur fluide et un contenu fluide (avec barre de défilement si nécessaire) qui occupe le reste d'espace disponible jusqu'au bord droit de l'écran.
Je rencontre deux soucis : Je n'arrive pas à limiter les blocs pour qu'ils ne débordent pas sur/sous le pied de page, je n'arrive pas à limiter le conteneur à la place restante de la taille de l'écran.
Voici le code de la feuille de style CSS telle qu'elle existe
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
| /* CSS Document */
div{
text-align:center;
border:1px solid #287CB1;
}
html, body{
margin:0;
padding:0;
height:100%;
width:100%;
background-color:#FFFFFF;
}
div#wrap {
margin:0 auto;
height:100%;
width:100%; /* 100 % en hauteur */
}
div#menuwrap{
position:absolute;
width:240px;
height:100%;
background-color:#999999;
}
div#menuup{
height:120px;
background-color:#66CC33;
}
div#menudown{
position:absolute;
width:100%;
height:120px;
bottom:0;
background-color:#CC99CC;
}
div#menu{
background-color:#FF6699;
}
div#contentwrap{
margin-left:240px;
height:100%;
background-color:#cccccc;
}
#header{
position:absolute;
top:0;
width:inherit;
height:60px;
background-color:#00CCFF;
}
#content{
position:absolute;
top:60px;
background-color:#FFCC00;
}
#footer{
position:absolute;
bottom:0;
height:60px;
background-color:#33FF99;
} |
Merci d'avance pour vos explications et suggestions
