Voilà, je viens de faire la connaissance avec la balise <div>. Jusqu'alors j'utilisais des tableaux avec des colspan et rowspan, mais je me suis rendu compte que la balise <div> est bien plus puissante. Cependant, je ne maîtrise pas encore bien ses propriétés. J'ai quelques soucis.
J'ai un bloc, où j'ai défini une margin-top à 0px et dans ce bloc, j'ai un sous-bloc où le margin-top est défini à 10px. Alors que je m'attendais à ce que le sous-bloc soit soit légement en dessous du haut du bloc principal, mais sous mozilla, ça m'applique le margin-top au bloc principal, pas au sous bloc. Cependant ça marche sous IE.
Un autre exemple. Dans un autre bloc principal, j'ai appliqué text-align: center; tandis que dans le sous-bloc, j'ai appliqué float: left; Cependant mon image est centrée, non pas à gauche comme je pensais qu'il devrait être. Là encore je trouve ça bizarre. Il est possible qu'il faut utilisé l'attibut position, j ai pas trop compris comment il fonctionnait.

Voila le code :

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
<html>
	<head>
		<style type="text/css">
		<!--
			body
			{
				margin: 0px;
				padding: 0px;
				background-color: #000000;
			}
 
			div
			{
				margin: 0px;
				padding: 0px;
			}
 
			.conteneur
			{
				position: absolute;
				width: 80%;
				height: 80%;
				top: 10%;
				left: 10%;
				border: 1px #000000 solid;
				background-color: #DDDDDD;
			}
 
			.head1
			{
				//position: relative;
				width: 100%;
				height: 91px;
				//top: 0%;
				//left: 0%;
				margin-top: 0px;
				text-align: center;
				background-image: url(image/head1.gif);
				background-repeat: no-repeat;
				background-position: center;
			}
 
			.head2
			{
				//position: relative;
				width: 100%;
				height: 36px;
				//top: 0%;
				//left: 0%;
				text-align: center;
				color: #FF0000;
				background-image: url(image/head2.gif);
				background-repeat: no-repeat;
				background-position: center;
			}
 
			.logo
			{
				position: relative;
				width: 133 px;
				height: 51 px;
				top: 0px;
				left: 20px;
				float: left;
				margin-left: 30px;
				margin-top: 30px;
			}
 
			.titre
			{
				//position: absolute;
				margin-left: auto;
				margin-right: auto;
				margin-top: 10px;
			}
		-->
		</style>
	</head>
	<body>
		<div class="conteneur">
			<div class="head1">
				***
				<img src="image/logo.gif" />
			</div>
 
			<div class="head2">
				<div class="titre">
					Bienvenue sur mon site
				</div>
			</div>
		</div>
	</body>
</html>
Merci pour votre aide


Voici le lien pour le test : http://avsc.guduszeit.com/test.php