la balise <div> et CSS

**Trunks** · 04/12/2005, 19h49

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

**ePoX** · 04/12/2005, 20h53

Pour ce qui est du margin-top, remplace le par un padding-top.

En faits le margin joue sur l'exterieur du bloc alors que le padding joue sur l'intérieur du bloc.

En l'occurence ici IE n'à pas le bon rendu.

Pour ce qui est de ton image, tu as utiliser l'attribut background-position: center;
au lieu de background-position: left;

Bye

**Trunks** · 04/12/2005, 21h10

Merci pour les éclaircissements. Cependant, le fond je veux bien le mettre au centre, d'où background-align: center;. C'est le logo que je veux mettre à gauche. Si on regarde le rendu, ça me l'a mis au centre, et non pas à gauche. Surement un truc que j'ai mal fait suite à mon ignorance ...

la balise <div> et CSS

CSS

Discussions similaires

Partager

Partager