Disposition de pseudos-frames

**Neoforever** · 27/08/2007, 12h22

Bonjour à tous,

Je suis Neoforever et suis nouveau sur ce site web.

Je viens de lire le tutoriel pseudos-frames du site, ainsi que le livre css 2 que j'ai achetter dernièrement.

Le problème que je rencontre est le suivant.

Je dispose de 6 pseudos frames nommées comme ci : haut_de_page / menu_principal / contenu / espace_perso / espace_recherche / bas_de_page.

Je souhaiterais centrer tout mon site, de manière a avoir le maximun de compatibilitée côté resolutions.

Pour les frames haut_de_page / menu_principal / bas_de_page, ce n'est pas un problème (centrées dans l'index),

en revanche je souhaiterais placer les frames espace_perso / espace_recherche à la droite de la frame contenu.

Je vous dépose le code css et php de ma page index,en espérant m'être bien exprimer (j'ai créer un schéma sous la forme d'une image jpeg en pièce jointe à ce post. Ce schema décrit comment je souhaite disposer mes pseudo-frames.).

Je vous remercie par avance de l'aide que vous pourez m'apporter.

Neoforever.

Le code php de la page index :

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
 
<?php @$page=$_GET['page']; ?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>nom_entreprise</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center><?php
 
  #haut_de_page
  echo"<div id='haut_de_page'>";
  include("haut_de_page.inc.php");
  echo"</div>";  
 
?></center>
<center><?php
 
  #menu_principal 
  echo"<div id=menu_principal>";
  include("menu_principal.inc.php");
  echo"</div>";  
 
?></center>
<center><?php
 
  #contenu
  echo"<div id='contenu'>";
 
if(!isset($_GET['page']))
	{
  	include("contenu.inc.php");
	}
else
	{
	if($page==""){include"pages/.inc.php";}
	elseif($page==""){include"pages/.inc.php";}
 
	else{include"pages/erreurs/page_inexistante.inc.php";}
	}
echo"</div>";
 
?></center>
<center><?php
 
  #espace_perso 
  echo"<div id='espace_perso'>";
  include("espace_perso.inc.php");
  echo"</div>"; 
 
?></center>
<center><?php
 
  #espace_recherche 
  echo"<div id='espace_recherche'>";
  include("espace_recherche.inc.php");
  echo"</div>"; 
 
?></center>
<center><?php
 
  #bas_de_page 
  echo"<div id='bas_de_page'>";
  include("bas_de_page.inc.php");
  echo"</div>"; 
 
?></center>
</body>
</html>

Le code 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
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
#haut_de_page {
	font-family: "Times New Roman, Times, serif";
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #098098;
	background-image: url();
	height: 90px;
	width: 1000px;
	overflow: none;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}
 
#menu_principal {
	font-family: "Times New Roman, Times, serif";
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #123456;
	background-image: url();
	height: 30px;
	width: 1000px;
	overflow: none;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}
 
#contenu {
	font-family: "Times New Roman, Times, serif";
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #543322;
	background-image: url();
	height: 850px;
	width: 800px;
	overflow: none;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}
 
#espace_perso {
	font-family: "Times New Roman, Times, serif";
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #768876;
	background-image: url();
	height: 600px;
	width: 200px;
	overflow: none;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}
 
#espace_recherche {
	font-family: "Times New Roman, Times, serif";
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #456343;
	background-image: url();
	height: 250px;
	width: 200px;
	overflow: none;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}
 
#bas_de_page {
	font-family: "Times New Roman, Times, serif";
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #785555;
	background-image: url();
	height: 25px;
	width: 1000px;
	overflow: none;
	position: relative;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}

PS : N'hésiter pas à me demander des informations complémentaires.

**mathieu** · 27/08/2007, 12h53

j'ai mis un fichier html en pièce jointe, ça sera plus simple que le code PHP pour ceux qui veulent t'aider

**clb56** · 27/08/2007, 14h33

Salut,

inutile de te servir de <center>

Pour ton squelette html, regroupe tout dans dans un conteneur global. De plus je pense que #espace_perso et #espace_recherche constituent comme un menu annexe, dans ce cas autant les rassembler dans un même conteneur.

Pour le html ça donnerait donc quelque chose comme :

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
 
<body>
    <div id="global">
        <div id="haut_de_page">
             include haut de page
        </div>
        <div id="menu_principal">
             include menu principal
        </div>
        <div id="contenu">
 
             include contenu
        </div>
        <div id="conteneur_menu_annexe">
            <div id="espace_perso">
                 include espace perso
            </div>
            <div id="espace_recherche">
                 include espace recherche
            </div>
        </div><!-- fin #conteneur_menu_annexe -->
 
        <div id="bas_de_page">
             include bas de page
        </div>
     </div><!-- fin #global -->
</body>

A partir de ça voilà une proposition de css correspondant à ton souhait de rendu en design fluide à largeur maitrisée

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
 
<style type="text/css">
     #global {
     max-width:1000px;
     margin:auto;
     background-color: #543322;
     }
 
     #haut_de_page {
     font-family: "Times New Roman, Times, serif";
     background-attachment: scroll;
     background-repeat: no-repeat;
     background-position: center top;
     background-color: #098098;
     background-image: url();
     height: 90px;
     }
     #menu_principal {
     font-family: "Times New Roman, Times, serif";
     background-attachment: scroll;
     background-repeat: no-repeat;
     background-position: center top;
     background-color: #123456;
     background-image: url();
     }
     #contenu {
     font-family: "Times New Roman, Times, serif";
     background-attachment: scroll;
     background-repeat: no-repeat;
     background-position: center top;
     background-color: #543322;
     background-image: url();
     height: 1300px;
     float:left;
     width: 75%;
     }
     #conteneur_menu_annexe {
     float:right;
     width:25%;
     }
     #espace_perso {
     font-family: "Times New Roman, Times, serif";
     background-attachment: scroll;
     background-repeat: no-repeat;
     background-position: center top;
     background-color: #768876;
     background-image: url();
     height: 600px;
     }
     #espace_recherche {
     font-family: "Times New Roman, Times, serif";
     background-attachment: scroll;
     background-repeat: no-repeat;
     background-position: center top;
     background-color: #456343;
     background-image: url();
     height: 250px;
     }
     #bas_de_page {
     clear:both;
     font-family: "Times New Roman, Times, serif";
     background-attachment: scroll;
     background-repeat: no-repeat;
     background-position: center top;
     background-color: #785555;
     background-image: url();
     height: 25px;
     }
</style>
 
<!-- Correctif pour IE inférieurs à IE7 car propriété max-width non implémentée -->
<!--[if lt IE 7]>
<style type="text/css">
     div#global {
     width:770px;/* Au cas où javascript serait inactif coté client */
     width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
     }
</style>
<![endif]-->

plus le résultat que je met en pièce jointe.

**Neoforever** · 27/08/2007, 21h42

Merci beaucoup pour cette aide que vous m'avez fourni.

Je viens de comprendre beaucoups de chose durant l'échange de ces quelques post.

Merci pour tous.

Neoforever.

Disposition de pseudos-frames

CSS

Vue hybride

Discussions similaires

Partager

Partager