Problème de mise en page à l'aide de div

**adenak** · 23/08/2007, 14h18

Bonjour,
Je voudrais essayer de créer un petit site pour apprendre à l'aide de plusieurs div (header, menu, content et footer) ainsi que du css. J'arrive à placer les différents éléments, je met une fonction php include dans la div "content" mais le problème que j'ai c'est que si je clique sur un bouton du menu pour charger une des pages dans la div content, des écarts apparaissent sur la page puisque les dimensions du menu sont fixes donc ça ne suis pas avec l'include qui agrandi la div content. Je pense pas que ça soit super clair, je vais mettre en dessous le code et des ptits snaps au cas ou!

Pour résumer, je ne sais pas comment faire pour élargir le menu de hauteur, ni comment faire pour qu'une page s'affiche dans la div content sans cliquer sur un bouton (qu'une include s'ouvre sans clic, à l'ouverture du site), et pour finir comment afficher la div nommée "menu_droite" ou faire en sorte de s'en passer.

J'aimerais que le fond tout sur les côtés soient jaunatre (comme actuellement quoi) mais le reste blanc.

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
103
104
105
106
107
<!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>Document sans titre</title>
 
<style type="text/css">
 
body
{
background-color:#F9C65B;
width:800px;
margin:auto;
}
 
 
#header
{
background-image:url(haut.jpg);
width:800px;
height:124px;
}
 
#menu
{
float:left;
width:150px;
background-color:#FFFFFF;
}
 
#menu_droite
{
float:right;
background-color:#FFFFFF;
width:100px;
height:100%;
}
 
#content
{
background-color:#FFFFFF;
width:550px;
margin:auto;
margin-left:150px;
}
 
#footer
{
background-image:url(bas.jpg);
width:800px;
height:125px;
float:left;
}
 
img
{
border:none;
}
 
 
</style>
 
</head>
 
<body>
 
 
<div id="header">
</div>
 
 
<div id="menu">
 
<a href="index.php?menu=test"><img src="Pictures/images/Sans-titre-3_01.gif" /></a>
 
<img src="Pictures/images/Sans-titre-3_02.gif" />
 
<img src="Pictures/images/Sans-titre-3_03.gif" />
 
<img src="Pictures/images/Sans-titre-3_04.gif" />
 
<img src="Pictures/images/Sans-titre-3_05.gif" />
 
 
</div>
 
<div id="menu_droite">
 
</div>
 
<div id="content">
 
<?php
if ($_GET['menu'] == "test")
{
include("test.php");
}
?>
 
</div>
 
<div id="footer">
 
</div>
 
</body>
</html>

Et les photos:
http://img110.imageshack.us/img110/496/sanstitreob3.jpg
http://img110.imageshack.us/img110/707/sanstitrecu9.jpg

N'hésitez pas pour les questions car je suis sur que c'est pas clair du tout! ^^

ciaô

**beeboo** · 23/08/2007, 16h55

Salut,
Le plus simple si le fond derrière le content et le menus est uni, est de faire un bloc qui encadre le tout avec un background de la même couleur.

**adenak** · 23/08/2007, 17h26

le problème c'est que le fond tout derrière j'aimerais qui soit d'une couleur (j'ai mis au pif pour mon squelette) et le reste sur fond blanc.

En fait, je voulais faire sur l'exemple de ce site mais avec des includes et non des iframes: http://www.latribudoree.com/accueil.html

ciaô

**Lindorie** · 23/08/2007, 17h37

Et la technique du div qui regroupe tout que tu mets en fond blanc te vas pas?

**adenak** · 23/08/2007, 18h03

J'ai répondu sans voir ta réponse désolé.... J'ai essayé ton code, en lisant les explications ça avait l'air bien mais quand je test ça m'indique une erreur à la ligne 107....

ciaô

**Lindorie** · 23/08/2007, 19h38

Ok,

alors soit la page test.php marche pas, soit c'est le include ;
tu peux remplacer tes include par require

Code :

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

1
2
3
4
5
6
7
8
9
10
 
switch ($menu) {
 
case "test":
require "test.php";
break;
 
default:
require "test.php";
break;

edit : en fait il fau mettre juste "default" et pas "case default", désolée

**Lindorie** · 23/08/2007, 17h08

Bonjour,

Je vais essayer de répondre à tes questions en espérant avoir tout compris.

Alors le truc que tu peux faire c'est créer une div globale qui inclurait tous les autres div, et lui mettre un fond blanc.

Pour ton problème d'include je te conseillerai de faire plutot un switch au lieu d'un if, question de lisibilité dans le code...

Pour ton menu de droite, j'aurais plutot mis float: left à tous les div, menu gauche, content, et menu droit, ainsi qu'une largeur définie pour chaque div histoire qu'ils rentrent tous au bon endroit.

Par exemple si tu mets une div globale d'une largeur de 800px, dedans t'auras une div menu_gauche de 150px (ou comme tu veux), une div content de 500px et une div menu_droit de 150px. Avec ca tout rentre et pas besoin de float: right qui est un peu merdique. Tu pourras aussi enlever le margin-left: 150px de ta div content, il est préférable de ne pas positionner les éléments avec des marges qui reprennent la largeur de l'élément plus à gauche...

ça donnerai donc :

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
<!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>Document sans titre</title>
 
<style type="text/css">
 
body
{
background-color:#F9C65B;
width:800px;
margin:auto;
}
 
#global
{
background-color: white;
width: 800px;
margin: auto;
} 
 
#header
{
background-image:url(haut.jpg);
width:800px;
height:124px;
}
 
#menu
{
float:left;
width:150px;
background-color:#FFFFFF;
}
 
#menu_droite
{
float:left;
background-color:#FFFFFF;
width:100px;
height:100%;
}
 
#content
{
background-color:#FFFFFF;
width:550px;
margin:auto;
float: left;
}
 
#footer
{
background-image:url(bas.jpg);
width:800px;
height:125px;
float:left;
}
 
img
{
border:none;
}
 
 
</style>
 
</head>
 
<body>
 
<div id="global">
<div id="header">
</div>
 
<?php
$menu = $_GET['menu']; // tu récupères ta variable dès le début de la page pour pouvoir l exploiter ensuite
?> 
 
<div id="menu">
 
<a href="index.php?menu=test"><img src="Pictures/images/Sans-titre-3_01.gif" /></a>
 
<img src="Pictures/images/Sans-titre-3_02.gif" />
 
<img src="Pictures/images/Sans-titre-3_03.gif" />
 
<img src="Pictures/images/Sans-titre-3_04.gif" />
 
<img src="Pictures/images/Sans-titre-3_05.gif" />
 
 
</div>
 
<div id="content">
 
<?php
 
switch ($menu) {
 
case "test":
include "test.php";
break;
 
case default:
include "test.php";
break;
 
// au cas où la variable menu n a pas de valeur donc valeur: par défaut (comme par exemple à l ouverture de la page) on envoie la page test.php quand même.
}
 
?>
 
</div>
 
<div id="menu_droite">
 
</div>
 
<div id="footer">
 
</div>
</div>
</body>
</html>

J'espère que j'ai répondu à tes questions...

Bonne chance

**adenak** · 23/08/2007, 20h24

bah non ça marche pas, mais si je remet ma fonction d'avant ça marche bien, sauf que ya toujours des problème...
Mais comme je l'est dis, avec mes images qui s'étirent, je sais pas si c'est la meilleure manière de faire mon truc. Car, à la base (je radote^^) je veux un site sur l'exemple de celui-ci mais avec des includes et non des iframes: http://www.latribudoree.com/accueil.html

J'aurais carrément du demander comment il fallait s'y prendre chui bête, ça aurait été plus clair je pense...

ciaô

edit: le premier script marche si je remplace le case default comme écrit aus dessus mais ça marche pas mieux qu'avant non plus... http://img444.imageshack.us/img444/4...nstitreyq4.jpg

**Lindorie** · 23/08/2007, 20h56

T'as recopié tout le code que je t'ai modifié ou pas? c'est bizarre que la div "global" se mette pas en fond blanc...

Je comprends pas ce que tu veux avec le site que tu montres, avec du php il n'y a pas d'iframes et le script en switch que je t'ai donné marche avec des includes ...

**adenak** · 23/08/2007, 21h10

Bah alors le seul problème c'est comme tu dis le div global, ce qui est bizarre car elle est bien mise pourtant....

ciaô

**nefertitia** · 24/08/2007, 11h18

J’ais moi aussi un problème avec div : quand je mets un tableau dans la division, il se position vis-à-vis de la page, et non pas de la division.

Quand je mets du texte juste devant lui, le texte apparaît au bon emplacement (juste en dessous du texte vert) mais le tableau apparaît à sa potion actuelle.
Quand je mets du texte sous le tableau, il apparaît sous celui-ci.
Quand je teste les alignements « center » ou autre, il se positionne vis-à-vis de la page…

Je ne sais plus quoi faire !

Page concernée : http://www.biologieindustrie.com/r6p2.htm

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
<div id="content" class="p_r6p1">
 
  <p class="t_r6p1"><img src="img/titre/tr6p2.gif" /></p>
  <p class="r6p1"><span class="f12">SARL au capital de 285 000&euro;</span><br />
    <br />
	<table border cellpadding="2">
		<tr align="center">
			<td rowspan="2"></td> <td colspan="2">31 mars 2007</td> <td colspan="2">31 mars 2006</td>
 
		</tr>
		<tr align="center">
			<td>France</td> <td>Export</td> <td>Total</td> <td>Total</td>
		</tr>
		<tr align="center">
 
			<td>Chiffre d'affaires</td> <td>1 122 496</td> <td>1 299 143</td> <td>2 421 639</td> <td>1 856 822</td>
		</tr>
		<tr align="center">
			<td>R&eacute;sultat courant avant imp&ocirc;ts</td> <td>244 952</td> <td>23 327</td> <td></td> <td></td>
 
		</tr>
		<tr align="center">
			<td>B&eacute;n&eacute;fices</td> <td>291 703</td> <td>86 131</td> <td></td> <td></td>
		</tr>
 
	</table>
	toto;
</div>

**adenak** · 24/08/2007, 12h33

J'aurais bien voulus t'aider mais je comprend rien à ton css.... Le but du css c'est aussi d'être clair or là....

Sion, merci beaucoup pour ton exemple trouvé Lindorie, je vais mater ça tout de suite!

Je te dis des nouvelles ensuite.

ciaô

edit: j'ai essayé et pour la structure de base avec le css ça marche, tou se positionne bien comme je veux mais dès que je place mes boutons dans le tableau de gauche, tout par en vrille, le footer se décale en l'occurence...

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
<!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>Document sans titre</title>
 
<style type="text/css">
 
body
{
        margin: 0;
        padding: 0;
}
 
#conteneur
{
position: relative;
width: 800px;
margin: 0 auto;
background-color:#FFFFFF;
}
 
#header
{
height: 126px;
background-image:url(haut.jpg)}
 
#menu_gauche
{
position: absolute;
left:0;
width: 150px;
}
 
#menu_droite
{
position: absolute;
right:0;
width: 150px;
}
 
#content
{
background-color:#FFFFFF;
margin-left: 150px;
margin-right: 150px;
}
 
#footer
{
height:125px;
background-image:url(bas.jpg)}
 
</style>
 
</head>
 
<body>
 
<div id="conteneur">
 
<div id="header">
 
</div>
 
<div id="menu_gauche">
 
<img src="Pictures/images/Sans-titre-3_01.gif" />
 
<img src="Pictures/images/Sans-titre-3_02.gif" />
 
<img src="Pictures/images/Sans-titre-3_03.gif" />
 
<img src="Pictures/images/Sans-titre-3_04.gif" />
 
<img src="Pictures/images/Sans-titre-3_05.gif" />
 
 
</div>
 
<div id="menu_droite">
 
</div>
 
<div id="content">
<?php
    if ($_GET['page'] == "minichat")
    {
        include("minichat.php");
    }
?>
</div>
 
<div id="footer">
 
</div>
 
</div>
 
</body>
</html>

Mais si on enlève les boutons ças marche comme par magie ^^

Problème de mise en page à l'aide de div

HTML

Vue hybride

Discussions similaires

Partager

Partager