Effet frame avec CSS

Version imprimable

05/09/2011, 00h20
buldeo

Effet frame avec CSS

Bonjour à tous,

après avoir passé plus d'une journée a essayer toute sorte d'exemple trouvé sur le web, je ne réussis toujours pas a coder correctement ceci :

J'aimerais avoir une bannière (header) fixe de 800px de large, avec un menu à gauche fixe de 200px de large, puis le contenu à droite qui défile de 600px de large.

C'est assez facile a réaliser en suivant cet exemple:
http://css.developpez.com/galerie/?p...se-en-page#mp2

Ce que je n'arrive pas a faire par contre, c'est que le tout soit centré sur la page !!!

Pour dire autrement, il y aurait à de gauche à droite :
-Colonne de largeur variable
-Colonne de 800px où on retrouve la bannière ainsi que le menu et le contenu en dessous
-Puis Colonne de largeur variable

Après avoir essayé des milliers de combinaison 8O, j'ai finalement décidé de posé la question !!!

Merci ...

Bonjour,
la combinaison gagnante est :

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
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>test</title>
 
	<style type="text/css">
html, body {
	overflow:auto;
	width:100%; height:100%;
	margin:0; padding:0;
}
* {
	margin:0; padding:0;
}
/* BANDEAU FIXE */
#headerfixe  {
	overflow:hidden;
	position:fixed;
	z-index:10;
	width:800px; height:150px;
	top:0;  			/* décalage vertical : 0 */
	left:50%; margin-left:-400px; 	/* décalage horizontal : -(800/2) */
	background-color:green; 	/* test */
}
/* MENU FIXE */
#menufixe {
	overflow:hidden;
	position:fixed;
	width:200px; height:100%;
	z-index:10;
	top:150px; 			/* décalage vertical : 150(header) */
	left:50%; margin-left:-400px; 	/* décalage horizontal : -(800/2) */
	background-color:red;	 	/* test */
}
/* CONTENU scrollable */
#contenuscroll {
	position:absolute;
	width:600px; height:auto;
	top:0; padding-top:150px; 	/* décalage vertical : 0 (on passe SOUS le header), et on décale le texte de 150px */
	left:50%; margin-left:-200px;	/* décalage horizontal : -(800/2)+200(menu) */
	background-color:yellow; 	/* test */
}
#contenu {
	padding:20px;
}
	</style>
 
</head>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
 
<div id="headerfixe">
	.... test header bandeau fixe ....
</div>
 
<div id="menufixe">
	.... menu ....
</div>
 
<div id="contenuscroll">
<div id="contenu">
	.... contenu ....
</div>
</div>
 
</body>
</html>

ps : j'ai 150px de haut pour le bandeau (à adapter, bien sûr)
:ccool: Testé : IE8, Firefox, Safari, Chrome, Opera.

05/09/2011, 16h21
buldeo

Merci Jreaux62

C'est un peu tordu.. ça ma pris quelque minutes avant de comprendre le principe d'une marge négative :? mais ça plein de bon sens...

Le seul petit hic, et la je fais un peu mon difficile ;), lorsque je diminue la fenêtre en largeur, tout reste centré comme on le voulait, mais on perd la visibilité de chaque coté et l'ascenseur horizontal ne permet que de voir la partie droite du contenu. On perd alors en premier le menu, puis si on diminue encore, la partie gauche du contenu.

Y a-t-il moyen de contourné ça ??
05/09/2011, 16h31
Invité

Citation:

Envoyé par buldeo

lorsque je diminue la fenêtre en largeur, tout reste centré comme on le voulait

Ca, Ok.

Citation:

mais on perd la visibilité de chaque coté et l'ascenseur horizontal ne permet que de voir la partie droite du contenu. On perd alors en premier le menu, puis si on diminue encore, la partie gauche du contenu.

~~Ca, je ne vois pas du tout.~~

[Edit] Ah si, je vois ce que tu veux dire : quand la fenêtre fait moins de 800px de large.
05/09/2011, 17h01
buldeo

C'est très gentil de te posé sur mon problème !!!

En effet, c'est lorsque la fenêtre descend sous les 800px ...
05/09/2011, 17h09
Invité

Oui. Et tu voudrais que le scroll horizontal puisse se faire sur la totalité du site (menu et header compris)

Cela dit, "Le positionnement absolu « retire » totalement du flux le contenu concerné".

Difficile de dire à une div : tu te mets "absolue" en vertical, mais "relative" en horizontal...
05/09/2011, 17h17
buldeo

Autre petit hic que j'ai trouvé :

J'ai ajouté bottom:0; dans #contenuscroll afin que la couleur du background descend jusqu'en bas.
Mais lorsque je diminue la fenetre en hauteur suffisament pour cache une partie du texte du contenu, l'ascenseur verticale apparaît, et si je bouge l'ascenseur pour voir mon texte, la couleur du background monte avec le texte et le nouveau texte qui vient du bas s'affiche sur le background défini dans body.

J'ai réussi à résoudre ce problème en enlevant overflow:auto; dans la section body et en ajoutant overflow:auto; dans la section #contenu-scroll. Ce qui donne comme effet que l'ascenseur apparaît maintenant juste pour la section contenu et non pour toute la page.

J'ai aussi changé top:0; padding-top:150px; pour top:150; dans la section #contenu-scroll sinon l'ascenseur commencait en haut de la page, sous le bandeau.
06/09/2011, 10h51
Candygirl

Hello,

Pour ton problème du contenu qui disparait sur petit écran, à cause des marges négatives, tu peux ajouter, en principe, un min-width de 800px sur ton body pour l'éviter.

Une autre approche, pour éviter le problème, serait de passer par un centrage traditionnel avec un div englobant de 800px en margin:0 auto et placer tes éléments en fixed à l'intérieur. De cette manière, en l'absence des propriétés left et right, leur positionnement horizontal de fera en fonction du flux normal, et il seront donc à la place souhaitée (sauf en cas de text-align center sur IE7- , sauf erreur).