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

Mise en page

CSS

Vue hybride

Discussions similaires

Partager

Partager