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 :
Merci pour votre aide
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>
Voici le lien pour le test : http://avsc.guduszeit.com/test.php
Partager