Mise en page

**vpet** · 18/07/2012, 18h16

Bonjour,

Je dois réaliser une mise en page d'un site web avec un cahier des charges assez strict.
La page doit être composée :
- d'un bandeau toujours visible à l'écran
- d'un pied de page toujours visible également fixé toujours en bas de celle-ci.
(même quand le navigateur n'est pas en plein écran)

La ou je galère, c'est que la partie centrale doit être composée de 2 parties indépendantes (voire 3) côte à côte :
- à gauche un menu
- une partie contenu disposant d'une barre de scrolling qui lui est propre.
- éventuellement une partie droite pour des liens ou infos contextuels.
En fait, les 2 ou 3 parties doivent avoir leur propre barre de scrolling intégrée. (exit donc la barre de scrolling du navigateur).

Je parviens
- à fixer les bandeau et pied de page
- à créer dans une page isolée un div avec un scrolling propre.
Mais impossible d'assembler le tout pour obtenir le résultat escompté.
Aussi, j'en appelle à votre aide.

D'avance merci

**NoSmoking** · 18/07/2012, 20h27

Bonjour,
pourrais tu nous montrer la structure/css que tu as prévu cela serait une bonne base de départ me semble t-il.

**vpet** · 19/07/2012, 10h36

Bonjour,

Je suis parti de la structure suivante :

Code :

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

1
2
3
4
5
6
7
8
 
<div id="container">
   <div id="header"> Bannière </div>
      <div id="content"> 
         Un texte très très long ...
      </div>
      <div id="footer"> Pied de page </div>
</div>

avec le CSS :

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
 
html , body  {
margin:0;
padding:0;
height:100%;
}
 
#container {
min-height:100%;
height:100%;
width:800px;
margin:0 auto;
}
 
#header {
position:fixed;
top: O;
height:200px; 
width:800px;
background:#CCCCCC;
}
 
#content {
padding-top:200px;     /* correspond à la hauteur du header */
padding-bottom:100px;  /* correspond à la hauteur du footer */
width:800px;
background:#DDDDDD;
}
 
#footer {
position:fixed;
bottom:0;
background:#CCCCCC;
height:100px;
width:800px;
}

Ceci marche très bien avec un texte très long, y compris lorsque l'on réduit la surface d'affichage du navigateur en plein écran.
Avec un texte court, on remarque que la partie centrale (div id="content") n'occupe pas toute la hauteur (décelable via la couleur de fond).

J'aimerai bien découper la partie centrale en deux (voire 3) parties :

Code :

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

1
2
3
4
5
 
<div id="content"> 
   <div id="left" class="scrolling"> ... </div>
   <div id="right" class="scrolling"> ... </div>
</div>

J'ai essayé des CSS tels que :

Code :

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

1
2
3
4
5
6
7
 
.scrolling {
height:100%;
width:400px;
overflow:auto;
overflow-x:hidden;
}

sans succès.
A noter que dans la plupart des tentatives, je n'arrive pas à découper le l'espace du milieu en 2 (voire 3) colonnes.

**Schim59** · 19/07/2012, 11h18

Si tu veux des colonnes cotes a cotes il faut utiliser float je crois.

**vpet** · 19/07/2012, 15h04

Merci.
On peut effectivement utiliser float.
Comme par exemple :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  <style type="text/css">
 
#content {
	width: 800px;
	height: 400px;
	background:#CCCCCC;
	display: inline-block;	
}
 
#gauche {
	float: left;
}
 
#droite {
	float:right;
}
 
.scrolling {
	height:100%;
	width:400px;
	overflow:auto;
	overflow-x:hidden;
	display: block;	
}
   </style>
</head>
<body >
<div id="content">
   <div class="scrolling" id="gauche"> 
       texte long ...
   </div>
   <div class="scrolling" id="droite"> 
       texte long ...
   </div>
</div>
</body>
</html>

J'obtiens bien le résultat escompté. Deux parties côte à côte ayant des ascenseurs.
Mais je ne parviens pas à "intégrer ceci au" / "remplacer le" content du code donné dans mon post précédent afin d'obtenir ce que je souhaite.
J'ai essayé de jouer avec position:, display:, ... sans parvenir au résultat.
Et quand j'arrive à obtenir un défilement sur la partie de droite, soit les deux parties sont l'une en dessous de l'autre soit superposée.
Avec

Code :

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

1
2
3
#gauche {
float: left;
position: fixed;}

la partie droite est défilante mais pas la gauche: je suis donc limité en hauteur

**NoSmoking** · 20/07/2012, 11h26

Mais je ne parviens pas à "intégrer ceci au" / "remplacer le" content du code donné dans mon post précédent afin d'obtenir ce que je souhaite.

je dois admettre que j'ai du mal...

**vpet** · 20/07/2012, 15h03

C'est à dire, obtenir ce que je souhaite : décrit dans le premier post de cette discussion (18/07 à 18h16)

Pour arriver à mes fins, j'ai décomposé mon besoin en deux problématiques :
1- bandeau et pied de page fixés en haut et en bas.
2- deux blocs cote à cote (avec scrolling) dans un container de taille fixe.

Pour la problématique n°1 (bandeau et pied), j'ai résolu au moyen du code indiqué dans le post du 19/07 à 10h36. Mais je n'arrive pas dans le partie centrale (<div id="content">) à mettre les deux blocs avec barre de défilement.

Je parviens à faire 2 blocs avec barre de scrolling dans une page séparée mais cela ne marche pas si j'ajoute le code à mon template précédent.

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
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
 
html , body  {
margin:0;
padding:0;
height:100%;
}
 
#container {
min-height:100%;
height:100%;
width:800px;
margin:0 auto;
}
 
#header {
position:fixed;
top: O;
height:200px; 
width:800px;
background:#CCCCCC;
}
 
#content {
padding-top:200px;     /* correspond à la hauteur du header */
padding-bottom:100px;  /* correspond à la hauteur du footer */
width:800px;
background:#DDDDDD;
height:100%;
display: inline-block;	
}
 
#footer {
position:fixed;
bottom:0;
background:#CCCCCC;
height:100px;
width:800px;
} 
 
#gauche {
	float: left;
	width:400px;
}
 
#droite {
	float:right;
	width:400px;
}
 
.scrolling {
	height:100%;
	overflow:auto;
	overflow-x:hidden;
	display: block;	
}
</style>
</head>
 
<body >
 
<div id="container">
   <div id="header"> Bannière </div>
      <div id="content"> 
			   <div class="scrolling" id="gauche"> 
			   	texte tres long ...
		   	</div>
   			<div class="scrolling" id="droite"> 
   				texte tres long ...
   			</div>
      </div>
      <div id="footer"> Pied de page </div>
</div>
 
</body>
</html>

La partie centrale passe en dessous du bandeau et/ou pied de page.

**NoSmoking** · 20/07/2012, 16h39

essaies avec ce gabarit

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#page {
  width:100%;
}
#header {
  background:none repeat scroll 0 0 #E0E0E0;
  height:40px;
  margin:auto;
  width:800px;
}
#content {
  background:none repeat scroll 0 0 #CCCCCC;
  height:400px;
  margin:auto;
  width:800px;
}
#footer {
  background:none repeat scroll 0 0 #E0E0E0;
  height:40px;
  margin:auto;
  width:800px;
}
#gauche {
  float:left;
}
#droite {
  float:right;
}
.scrolling {
  height:100%;
  overflow-x:hidden;
  overflow-y:scroll;
  width: 400px;
}
</style>
</head>
<body>
<div id="page">
  <div id="header">HEADER</div>
  <div id="content">
    <div class="scrolling" id="gauche">
      <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
    </div>
    <div class="scrolling" id="droite">
      <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
      <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
      <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
      <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
    </div>
  </div>
  <div id="footer">FOOTER</div>
</div>
</body>
</html>

**vpet** · 20/07/2012, 20h59

Merci beaucoup.
C'est ce que je souhaite obtenir comme Gabarit à un petit détail près :
Cela doit occuper toute la hauteur du navigateur (pied de page fixé en bas et partie prenant toute la hauteur entre le bandeau et le pied de page)

J'ai ajouté

Code :

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

1
2
3
 html , body  {
height:100%;
}

et fait quelques tentatives :
- height:100% / auto sur le content
- bottom:0px; position:fixed sur le footer.
sans succès

Mise en page

CSS

Discussions similaires

Partager

Partager