[XHTML/HTML] Problème html xhtml : positionnement d'un div
Slt à toutes et tous,
je rencontre actuellement un problème pour positionner un menu, à l'aide de la basile <div>
code html
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
|
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Contact</title>
<link rel="stylesheet" type="text/css" href="css/data.css">
</head>
<body>
<!-- design site web <start> -->
<div id="bandeau">
<!-- menu <start> -->
<div class="positionMenu">
<ul id="tabnav">
<li><a href="index.html">Accueil</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- menu <end> -->
</div>
<div id="central">
<div id="cotegauche"></div>
<div id="body">
<form name="fContact" method="post" action="sendEmail.php">
<fieldset>
<legend>Fiche signalétique</legend>
<p>
<label for="1">Nom : </label>
<input type="text" id="1" name="zeNom" maxlength="100" size="50">
</p>
<p>
<label for="2">Prénom : </label>
<input type="text" id="2" name="zePrenom" maxlength="100" size="50">
</p>
</fieldset>
</form>
</div>
<div id="cotedroit"></div>
</div>
<div id="piedpage"></div>
<!-- design site web <end> -->
</body>
</html> |
voici le code css
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
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
|
/* CSS CS Soft */
/* design site web <start> */
div {
}
div#bandeau {
width: 1000px;
height: 254px;
background-color: black;
}
div#body {
float: left;
width: 693px;
height: 546px;
background-color: white;
}
div#piedpage {
width: 1000px;
height: 100px;
background-color: blue;
clear: both;
}
div#central {
width: 1000px;
height: 546px;
}
div#cotegauche {
float: left;
width: 152px;
height: 546px;
background-color: red;
}
div#cotedroit {
float: left;
width: 155px;
height: 546px;
background-color: red;
}
/* design site web <end> */
/* menu <start> */
ul {
font: 100% verdana, arial, sans-serif;
font-size: 25px;
margin: 50px;
}
#tabnav {
margin: 0;
padding: 0 0 20px 10px;
}
#tabnav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#tabnav a:link, #tabnav a:visited {
float: left;
font-size: 12px;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9699EC;
}
#tabnav li.active a:link, #tabnav li.active a:visited, #tabnav li a:hover {
border-bottom: 4px solid #6468E9;
padding-bottom: 2px;
background: #313131;
color: #6468E9;
}
#tabnav a:hover
{
background: #6468E9;
}
.positionMenu {
margin-top: 13;
padding-left: 325;
}
/* menu <end> */
/* formulaire de contact <start> */
p
{
margin: 2px 0;
}
/* fieldset , legend */
fieldset
{
margin-bottom: 10px;
border: #CCC 1px solid;
}
fieldset legend
{
padding: 0 10px;
border-left: #CCC 1px solid;
border-right: #CCC 1px solid;
font-size: 1.2em;
color: #c5b4c8;
}
/* Label */
label
{
background-color: #c5b4c8;
display: block;
width: 20%;
float: left;
padding-right: 1%;
text-align: right;
letter-spacing: 1px;
}
label:hover
{
font-weight: bold;
}
/* Input */
input
{
margin-left: 1%;
width: 58%;
border: #CCC 1px solid;
background-color: #e6e3e6;
}
input:hover, input:focus
{
border: #999 1px solid;
background-color: #c5b4c8;
}
/* formulaire de contact <end> */ |
par contre si ds le fichier html, je supprime les 3 premières lignes, le menu s'affiche à la bonne position (margin-top: 13; padding-left: 325;)
mais le formulaire ne réagit plus correctement, par lors du survol sur les labels ou lors du survol sur les inputs... que faire???
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
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Contact</title>
<link rel="stylesheet" type="text/css" href="css/data.css">
</head>
<body>
<!-- design site web <start> -->
<div id="bandeau">
<!-- menu <start> -->
<div class="positionMenu">
<ul id="tabnav">
<li><a href="index.html">Accueil</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- menu <end> -->
</div>
<div id="central">
<div id="cotegauche"></div>
<div id="body">
<form name="fContact" method="post" action="sendEmail.php">
<fieldset>
<legend>Fiche signalétique</legend>
<p>
<label for="1">Nom : </label>
<input type="text" id="1" name="zeNom" maxlength="100" size="50">
</p>
<p>
<label for="2">Prénom : </label>
<input type="text" id="2" name="zePrenom" maxlength="100" size="50">
</p>
</fieldset>
</form>
</div>
<div id="cotedroit"></div>
</div>
<div id="piedpage"></div>
<!-- design site web <end> -->
</body>
</html> |
si qqun a une idée, elle serait le bienvenue
Merci d'avance
je teste mon code html + css sous internet explorer 7
est-ce que le standard permet actuellement cette manipulation???
