Realiser une page avec des div

**barok59** · 23/10/2007, 12h00

bonjour,
je souhaiterais développer une appli, dont la page d'accueil serait de la forme:

une bande en haut, la banniere,
un menu sur la gauche
du texte sur la droite.
J'ai pour cela utilisé des div, mais ma banniere ne s'affiche jamais.

Voici le code source de la page html:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="style.css" type="text/css" rel="stylesheet" >
<title>Insert title here</title>
</head>
<body>
<div>
<div class="banniere"></div>
</div>
<div>
<div class="gauche" ></div>
<div class="droite" ></div>
</div>
</body>
</html>

et le code source du 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
 
@CHARSET "ISO-8859-1";
 
<style type ="text/css">
 
.banniere {
	background-color: lightblue;
	float: left;
	width: 100%;
	height: 15%;
	border: solid 1px black;
}
 
.gauche {
	background-color: lightblue;
	float: left;
	width: 15%;
	height: 85%;
	border: solid 1px black;
}
 
.droite {
	background-color: lightblue;
	float: right;
	width: 84%;
	height: 85%;
	border: solid 1px black;
}
</style>

Pourriez vous m'aider.
merci pour vos réponses.

**Red_Fredux** · 23/10/2007, 12h30

Bonjour,
le code dans ton fichier "style.css" ne doit pas être entre les balises <style> et </style>.
Au passage, pourquoi mettre le bandeau dans 2 div imbriqués ?

**jeje13009** · 23/10/2007, 23h47

slt,

pour poursuivre l'idée de Red_Fredux, c'est pareil pour le gauche/droite...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="style.css" type="text/css" rel="stylesheet" >
<title>Insert title here</title>
</head>
<body>
<div id="banniere"></div>
 
<div id="gauche" ></div>
<div id="droite" ></div>
</body>
</html>

tant qu'à faire, passe par des ID puisque ces div seront vraisemblablement uniques

d'où

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
#banniere {
	background-color: lightblue;
	float: left;
	width: 100%;
	height: 15%;
	border: solid 1px black;
}
 
#gauche {
	background-color: lightblue;
	float: left;
	width: 15%;
	height: 85%;
	border: solid 1px black;
}
 
#droite {
	background-color: lightblue;
	float: right;
	width: 84%;
	height: 85%;
	border: solid 1px black;
}

je te conseille d'utiliser un positionnement absolute et de définir un width et un height fixe... ça t'évitera des surprises selon la résolution d'affichage !

**moughlee** · 24/10/2007, 12h56

Bonjour à tous. Jre crois avoir un problème similaire que je ne saurais résoudre pour le moment.
windows xp home
dreamweaver 8

La page apparaissant sur internet n'est pas celle représenté ds le logiciel malheureusement.

Voici le code source de la page html:

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
<!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>menu02</title>
<style type="text/css">
<!--
#menu02 {
        position:absolute;
        left:190;
        top:25;
        width:760;
        height:80;
        z-index:1;
        background-image: url(images/menu02.png);
}
#menu03 {
        position:absolute;
        left:25;
        top:250;
        width:165;
        height:830;
        z-index:2;
        background-image: url(images/menu03.png);
}
#central {
        position:absolute;
        left:190px;
        top:250px;
        width:760;
        height:830;
        z-index:3;
        background-image: url(images/centre.png);
}
#menu01 {
        position:absolute;
        left:25;
        top:25;
        width:165;
        height:80;
        z-index:4;
        background-color: #D4D0C8;
        background-image: url(images/menu01.png);
}
body {
        background-image: url(images/fond%20page.gif);
 
}
#Layer1 {
        position:absolute;
        left:225;
        top:37;
        width:115px;
        height:55;
        z-index:6;
        background-image: url(images/boutonmenu.gif);
}
#Layer2 {
        position:absolute;
        left:340px;
        top:37px;
        width:115px;
        height:55px;
        z-index:7;
        background-image: url(images/boutonmenu.gif);
}
#Layer3 {
        position:absolute;
        left:455px;
        top:37px;
        width:115px;
        height:55px;
        z-index:8;
        background-image: url(images/boutonmenu.gif);
}
#news {
        position:absolute;
        left:50px;
        top:37;
        width:115;
        height:55;
        z-index:9;
        background-image: url(images/boutonmenu.gif);
}
#Layer5 {
        position:absolute;
        left:570px;
        top:37;
        width:115;
        height:55px;
        z-index:10;
        background-image: url(images/boutonmenu.gif);
}
#Layer6 {
        position:absolute;
        left:685px;
        top:37;
        width:115;
        height:55px;
        z-index:11;
        background-image: url(images/boutonmenu.gif);
}
#Layer4 {
        position:absolute;
        left:820px;
        top:37;
        width:115;
        height:55;
        z-index:12;
        background-image: url(images/boutonmenu.gif);
}
#Layer7 {
        position:absolute;
        left:50;
        top:280;
        width:115px;
        height:55px;
        z-index:13;
        background-image: url(images/boutonmenu.gif);
}
#Layer8 {
        position:absolute;
        left:50px;
        top:370;
        width:115;
        height:55;
        z-index:14;
        background-image: url(images/boutonmenu.gif);
}
#Layer9 {
        position:absolute;
        left:50px;
        top:460;
        width:115;
        height:55;
        z-index:15;
        background-image: url(images/boutonmenu.gif);
}
#Layer10 {
        position:absolute;
        left:50;
        top:544px;
        width:115;
        height:55;
        z-index:16;
        background-image: url(images/boutonmenu.gif);
}
#Layer11 {
        position:absolute;
        left:50px;
        top:37;
        width:115;
        height:55;
        z-index:17;
        background-image: url(images/boutonmenu.gif);
}
-->
</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
19
20
21
22
23
24
25
26
27
 
<body>
<div id="menu02"></div>
<div id="menu03"></div>
<div id="central">
  <p>&nbsp;</p>
  <p class="Style1">&nbsp;</p>
</div>
<div id="menu01"></div>
<div id="banniere"></div>
<div id="Layer1"></div>
<div id="Layer2"></div>
<div id="Layer3"></div>
<div id="Layer5"></div>
<div id="Layer6"></div>
<div id="Layer4"></div>
<div id="Layer7"></div>
<div id="Layer8"></div>
<div id="Layer9"></div>
<div id="Layer10"></div>
<div id="Layer11">
  <p>&nbsp;</p>
  <p><br />
  </p>
</div>
</body>
</html>

Ceci est la première page que je fais. J'ai lu des informations mais bon, jpense que pour apprendre on est obligé de se planter pour mieux comprendre.
Merci de m'aider et à plus

voilà ce que j'ai ds le navigateur : http://www.moughlee.homedns.org/

**orphen** · 24/10/2007, 14h09

Salut tu n'a pas precisé de conteu dans tres div c'est peut etre ça aussi

Realiser une page avec des div

HTML

Discussions similaires

Partager

Partager