Présentation d'un site avec les DIVs

**apt** · 18/11/2008, 13h23

Bonjour à tous,

Comment faire pour afficher au centre toute page sélectionnée pat l'utilisateur ?

Code html :

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
<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> 
<html>
<head>
       <title>Title here!</title>
</head>
<body>
<div id="global">
<div id="title">
</div><div id="nav_top">
  <ul>
      <li class="right"><a href="index.php">Acceuil</a></li>
      <li class="right"><a href="register.php">S'enregistrer</a></li>
      <li class="right"><a href="edit.php">Controls</a></li>
  </ul>
</div>
<div id="nav_back_next"></div>
<div id="content">
   <div id="left"></div>
   <div id="center">
      Ici sera affichée toute page sélectionnée
   </div>
   <div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Merci d'avance

**HiRoN** · 18/11/2008, 14h05

Salut,

Ce point de la FAQ pourrait t'être utile...

**HiRoN** · 19/11/2008, 22h03

Comment faire pour afficher au centre toute page sélectionnée pat l'utilisateur ?

Tu veux donc centrer un bloc ?
Je ne vois pas vraiment le rapport avec du PHP ou PHP+AJAX si on parle de positionnement d'élément...

De plus, le code CSS qui va avec pourrait être utile...

**apt** · 20/11/2008, 00h58

Bonsoir devyan, HiRoN,

Maintenant que j'y suis, j'aurais besoin d'un fichier CSS pour le schéma de présentation indiqué dans le code ci-dessus.

Merci.

**Erwan31** · 20/11/2008, 01h29

Commences par remplacer ton doctype par celui-ci pour indiquer au validateur la chemin d'accès au doctype.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">

Et voir sur le tuto cité par Hiron.

**apt** · 23/11/2008, 22h00

Bonsoir Erwan31,

Envoyé par Erwan31

Commences par remplacer ton doctype par celui-ci pour indiquer au validateur la chemin d'accès au doctype.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">

Et voir sur le tuto cité par Hiron.

OK !

Merci

**apt** · 24/11/2008, 01h20

Bonjour,

Un petit essai :

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
<!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>contruction site</title>
<style type="text/css"> 
#global {
	width: 750px;
	border-top: 1px;
	border-right: 1px;
	border-bottom: 1px;
	border-left: 1px;
	border-color: #D4D0C8;
}
#title {
	border-color: #D4D0C8;
	border-bottom: 1px;
}
#nav_top {
	border-bottom: 1px;
	border-color: #D4D0C8;
}
#nav_infos{
            text-align:right;
}
#content {
	text-align: left;	
}
#left {
	width: 150px;
	text-align: left;
}
#center {
             border-right: 1px;
	border-left: 1px;
	border-style: dotted;
	}
#right {
	width: 150px;
	text-align: right;
}
#footer {
	text-align: center;
}
 
#nav_top.right {
	float: right;
}
#nav_top.left{
	float: left;
}
</style> 
 
</head>
 
<body dir="ltr">
 
<div id="global">
<div id="title">mon site</div>
<div id="nav_top">
  <ul>    
     <li class="left"><a href="index.php">Acceuil</a></li>
     <li class="left"><a href="register.php">S''enregistrer</a></li>    
     <li class="left"><a href="edit.php">Contrôls</a></li>  
     <li class="right"><a href="edit.php">Contact</a></li>  
  </ul>
</div>
<div id="nav_infos">Membres online</div>
<div id="content">   
   <div id="left"></div>   
   <div id="center">Affichage centré des pages du site</div>   
   <div id="right"></div>
</div>
<div id="footer">Copyright
</div>
</div>
</body>
</html>

**apt** · 01/12/2008, 23h25

Bonjour,

Un autre essai, mais le tout est chamboulé :

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
<!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=utf-8" />
<title>contruction site</title>
<style type="text/css"> 
#global {
	border:1px solid #D4D0C8;
	width:750px;
	position: relative;
	margin: 0px auto;
 
}
#title {
          border:1px solid gray;
}
#nav_top {
          border:1px solid gray;
}
#nav_infos {
	text-align:left;
	border-bottom: 1px solid gray;
}
#content {
 
}
#left, #center /*, #right*/ {
           padding:10px;
	float:left;
	}
#left {
	text-align:left;
	width:150px;
	border-right: 1px solid gray;
}
#center {
	border:1px none;
	width:390px;
}
#right {
	text-align:left;
	width:150px;
	border-left: 1px solid gray;
	float:right;
}
#footer {
	text-align:center;
	border-bottom: 1px solid gray;
	border-top: 1px solid gray;
	position:absolute;
	height: 25px;
	width: 750px;
	clear:both;
 
}
#nav_top.right {
            float:right;
}
#nav_top.left {
            float:left;
}
#nav_top ul {
            list-style:none;
}
#nav_top ul il {
            display:block;
 
</style> 
 
</head>
 
<body>
 
<div id="global">
<div id="title">mon site</div>
<div id="nav_top">
  <ul>    
     <li class="left"><a href="index.php">Acceuil</a></li>
     <li class="left"><a href="register.php">S''enregistrer</a></li>    
     <li class="left"><a href="edit.php">Contrôls</a></li>  
     <li class="right"><a href="edit.php">Contact</a></li>  
  </ul>
</div>
<div id="nav_infos">Membres online</div>
<div id="content">   
   <div id="left"></div>   
   <div id="center">Affichage centré des pages du site</div>   
   <div id="right"></div>
</div>
<div id="footer">Copyright
</div>
</div>
</body>
</html>

**apt** · 03/12/2008, 18h57

Pas vu ! Pas de réponse possible ?

**HiRoN** · 03/12/2008, 20h05

Envoyé par apt

Pas vu ! Pas de réponse possible ?

Si le but est toujours de "centrer" le site (peu importe la disposition des éléments à l'intérieur), alors c'est le cas sous ie7 & FF3 avec le code que tu donnes...

**Saray** · 03/12/2008, 23h26

Envoyé par apt

Bonjour à tous,

Comment faire pour afficher au centre toute page sélectionnée pat l'utilisateur ?

Code html :

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
<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> 
<html>
<head>
       <title>Title here!</title>
</head>
<body>
<div id="global">
<div id="title">
</div><div id="nav_top">
  <ul>
      <li class="right"><a href="index.php">Acceuil</a></li>
      <li class="right"><a href="register.php">S'enregistrer</a></li>
      <li class="right"><a href="edit.php">Controls</a></li>
  </ul>
</div>
<div id="nav_back_next"></div>
<div id="content">
   <div id="left"></div>
   <div id="center">
      Ici sera affichée toute page sélectionnée
   </div>
   <div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Merci d'avance

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#content{
text-align:center; /* ça c'est pour que son contenu soit centré */
width:100%;  /* ça c'est que pour les calculs se fassent sur la largeur visible de la fenêtre */
overflow:auto; /* ça c'est au cas la largeur visible de la fenêtre est plus petite que le contenu de la fenêtre */
}
 
#center{
/* l'astuce est ici, pour que la div soit vraiment centré il faut dire au navigateur de calculer les marge gauche et droite automatiquement */
margin-left:auto;
margin-right:auto;
/* le texte va être centré, donc on le remet à gauche */
text-align:left;
}

voili, voilou

**apt** · 07/12/2008, 13h11

Bonjour HiRoN,

Envoyé par HiRoN

Si le but est toujours de "centrer" le site (peu importe la disposition des éléments à l'intérieur), alors c'est le cas sous ie7 & FF3 avec le code que tu donnes...

Donc, pour les versions antérieures, le code devra subir des changements ?