Problème de mise en page à l'aide de div
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:
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ô
