Effet frame avec CSS

**buldeo** · 05/09/2011, 01h20

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

, j'ai finalement décidé de posé la question !!!

Merci ...

Invité · 05/09/2011, 11h35

Bonjour,
la combinaison gagnante est :

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

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

Testé : IE8, Firefox, Safari, Chrome, Opera.

**buldeo** · 05/09/2011, 17h21

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

Invité · 05/09/2011, 17h31

Envoyé par buldeo

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

Ca, Ok.

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.

**buldeo** · 05/09/2011, 18h01

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

En effet, c'est lorsque la fenêtre descend sous les 800px ...

Invité · 05/09/2011, 18h09

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

**buldeo** · 05/09/2011, 18h17

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.

**Candygirl** · 06/09/2011, 11h51

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

Effet frame avec CSS

CSS

Discussions similaires

Partager

Partager