décalage d'affichage à cause de la balise form

**cool** · 16/05/2008, 21h26

salut tout le monde ;
j'ai un grave problème : lorsque j'insère la balise <form> dans ma page html l'affichage se décale.
Voici mon code (j'ai enlever le code entre les balises <form> pour vous permettre une meilleur lisibilité):

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
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
 
<head>
<meta name="generator" content="Web Page Maker V2">
 
<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>
 
<style type="text/css">
a.style1:link{color:#FFFFFF;text-decoration: underline;}
</style>
<style type="text/css">
div#container
{
    position:relative;
    width: 961px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align:left; 
}
body {text-align:center;margin:0}
</style>
</head>
 
<body bgColor="#F8F8F8" >
 
<div id="container" >
 
<div id="image7" style="position:absolute; overflow:hidden; left:0px; top:139px; width:960px; height:200px; z-index:0"><img src="file:///C:/Documents and Settings/amin_bez/Bureau/template/pluralism/pluralism/pluralism/images/img04.jpg" border=0 width=960 height=200></div>
 
<div id="image25" style="position:absolute; overflow:hidden; left:306px; top:399px; width:75px; height:106px; z-index:1"><img src="file:///C:/Program Files/Web Page Maker V2/Templates/Personal/Personal003/images/board001.jpg" border=0 width=75 height=106></div>
 
<div id="image1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:961px; height:140px; z-index:2; background-color:#F0F0F0"><img src="file:///C:/Documents and Settings/amin_bez/Bureau/template/pluralism/pluralism/pluralism/images/img03.jpg" border=0 width=961 height=140></div>
 
<div id="image2" style="position:absolute; overflow:hidden; left:0px; top:332px; width:960px; height:645px; z-index:3"><img src="file:///C:/Documents and Settings/amin_bez/Bureau/template/pluralism/pluralism/pluralism/images/img10.jpg" border=0 width=960 height=645></div>
 
<div id="image3" style="position:absolute; overflow:hidden; left:0px; top:977px; width:960px; height:46px; z-index:4"><img src="file:///C:/Documents and Settings/amin_bez/Bureau/template/pluralism/pluralism/pluralism/images/img05.jpg" border=0 width=960 height=46></div>
 
<div id="text2" style="position:absolute; overflow:hidden; left:53px; top:26px; width:412px; height:46px; z-index:5"><div class="wpmd">
<div><font class="ws28" color="#FFFFFF" face="Tahoma">MaBoutique.com</font></div>
</div></div>
 
<div id="hr1" style="position:absolute; overflow:hidden; left:67px; top:930px; width:820px; height:30px; z-index:6">
<hr size=3 width=820 color=#E7EEFF>
 
</div>
 
<form name="form1">
 
</form>
 
 
</div></body>
</html>

**12monkeys** · 16/05/2008, 22h30

Bonsoir

Tu as une balise div fermante en trop :

Code :

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

1
2
3
	<div id="text2" style="position:absolute; overflow:hidden; left:53px; top:26px; width:412px; height:46px; z-index:5"><div class="wpmd">
		<div><font class="ws28" color="#FFFFFF" face="Tahoma">MaBoutique.com</font></div>
	</div></div><!-- cette dernière balise me semble en trop -->

Pense à indenter ton code pour éviter ce genre d'erreurs...

**cool** · 17/05/2008, 15h27

l'affichage n'est plus décalé;
mais certains éléments ne sont plus affichés.

Merci quand même pour votre réponse.

**12monkeys** · 17/05/2008, 15h44

Bon déjà dans un premier temps je m'excuses parce que je me suis trompé : tu verra que dans l'exemple que je te donne j'ai laissé 2 div sur la même ligne : résultat le div que je supposais en trop ne l'est en fait pas du tout :

Code :

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

1
2
3
4
5
6
7
	<div id="text2" style="position:absolute; overflow:hidden; left:53px; top:26px; width:412px; height:46px; z-index:5">
		<div class="wpmd">
			<div>
				<font class="ws28" color="#FFFFFF" face="Tahoma">MaBoutique.com</font>
			</div>
		</div>
	</div>

Par contre ni avec IE7 ni avec firefox je vois ton form... Quel navigateur utilises tu ?