decalage Logo dans header

Bonjour a tous,

Premier Probleme :

J'ai deux fichiers header.html et footer.html plus style.css pour la mise en forme de mes pages web.
le fichier header.html correspond au code suivant:

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
<html>
<head>
	<title></title>
	<link rel=stylesheet type="text/css" href="style.css">
 
	<script language="javascript">
  function toggleExpandCollapse(elementId)
  {
    element = document.getElementById(elementId).style;
    if (element.display == 'none')
      element.display = 'block';
    else
      element.display = 'none';
  }
</script>
</head>
 
<body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" background="img/background.jpg">
 
<table height="123" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<!----- insert logo below ------------------------------------------>
<td><img src="img/templogo.jpg" width="574" height="123" border="0" alt=""></td>
<!------------------------------------------------------------------>
<td width="100%" background="img/topbg.jpg">&nbsp;</td>
</tr>
</table>
 
<table height="40" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr valign="center">
		<td width="100%" background="img/topbar.jpg">&nbsp;</td>
	</tr>
</table>
 
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
 
<td width="20%">
 
<font class="normal"><BR>
<a  href="javascript:toggleExpandCollapse('mv1')"><img border=0 src="img/plus.jpg"/>&nbsp;Request For Creation</a>
<div id="mv1" style="display:none;">
	<ul>
		<li><a href="#">Create BR</a></li>
		<li><a href="#">Create History</a></li>
		<li><a href="#">Create Queue</a></li>
		<li><a href="#">Create Security (LSS)</a></li>
	</ul>
</div><BR>
<a href="javascript:toggleExpandCollapse('mv2')"><img border=0 src="img/plus.jpg"/>&nbsp; Items</a>
<div id="mv2" style="display:none;">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Create Item</a></li>
 
	</ul>
</div><BR>
 
<a href="javascript:toggleExpandCollapse('mv3')"><img border=0 src="img/plus.jpg"/>&nbsp;Modules & Levels</a>
<div id="mv3" style="display:none;">
</div><BR>
 
<a href="javascript:toggleExpandCollapse('mv4')"><img border=0 src="img/plus.jpg"/>&nbsp;Airline Management</a>
<div id="mv4" style="display:none;">
</div><BR>
 
<a href="javascript:toggleExpandCollapse('mv5')"><img border=0 src="img/plus.jpg"/>&nbsp;Other Link</a>
<div id="mv5" style="display:none;">
</div>
 
</td>
 
<td width="100%" border="">
	<table width="100%" cellpadding="10" cellspacing="0" border="0">
		<tr valign="top">
			<td>

Le fichier footer.html:

Code:

1
2
3
4
5
6
7
8
9
10
			</td>
		</tr>
	</table>
</td>
 
</tr>
</table>
 
</body>
</html>

et mon 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
BODY {
 
	color: #000000;
}
 
 
A {
	text-decoration: underline;
	color: Maroon;
}
 
A:Hover {
	text-decoration: none;
	color: #CE3100;
}
 
.style2 {
	color: Maroon;
	font-weight: bold;
	font-size: 11px;
	font-family: Tahoma;
}
 
error {
	color:#FF0033;
	font-size:14px;
	}

Mais voila, quand j'appelle tous ces fichiers dans mon fichier main.php j'obtiens une page telle que celle de la figure main.jpg
mais quand j'inclus les memes fichiers dans ma page register.php (page qui est accedee quand l'utilisateur clique sur Sign-Up!), ma page apparait avec un decalage de l'image (voir figure register.jpg).

Pouvez-vous m'aider a resoudre ce probleme? Qu'est ce que j'ai mal fait dans mon fichier header.html ou footer.html ou dans mon CSS.

Second probleme :
Quand je reduis la taille de mes pages, il y a un decallage du texte (voir fichier reduced_register.jpg pour exemple).
A quoi cela est-il du?

Je vous remercie d'avance.

Billy