Effet frame avec CSS

buldeo · 05/09/2011, 00h20

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

jreaux62 · 05/09/2011, 10h35

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, 16h21

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

jreaux62 · 05/09/2011, 16h31

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.

buldeo · 05/09/2011, 17h01

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

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

jreaux62 · 05/09/2011, 17h09

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, 17h17

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, 10h51

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

05/09/2011, 00h20	#1
buldeo Invité de passage Inscription : août 2010 Messages : 8 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : août 2010 Messages : 8 Points : 2 Points : 2	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 , j'ai finalement décidé de posé la question !!! Merci ...
	00

05/09/2011, 17h09	#6
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	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... __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

06/09/2011, 10h51	#8
Candygirl Modératrice Inscription : juillet 2006 Messages : 1 529 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Suisse Informations forums : Inscription : juillet 2006 Messages : 1 529 Points : 1 869 Points : 1 869	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). __________________ Les bons réflexes: avant de poser une question: règles \| faq \| tutoriels \| recherche clarté, politesse, vocabulaire et orthographe soignés = efficacité remercier ceux qui ont pris le temps d'aider et si c'est le cas
	00

05/09/2011, 16h21	#3
buldeo Invité de passage Inscription : août 2010 Messages : 8 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : août 2010 Messages : 8 Points : 2 Points : 2	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 ??
	00

05/09/2011, 17h01	#5
buldeo Invité de passage Inscription : août 2010 Messages : 8 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : août 2010 Messages : 8 Points : 2 Points : 2	C'est très gentil de te posé sur mon problème !!! En effet, c'est lorsque la fenêtre descend sous les 800px ...
	00

05/09/2011, 17h17	#7
buldeo Invité de passage Inscription : août 2010 Messages : 8 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : août 2010 Messages : 8 Points : 2 Points : 2	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email