[CSS]Positionnement des blocs <div> + pb selon navigat

**Trunks** · 06/12/2005, 23h20

Bonjour,

Je débute avec le CSS et j'avoue avoir quelques difficultés avec le positionnement des blocs <div>. Je m'entraîne donc sur un exemple simple.
Pour le positionnement absolu, j'y arrive sans problème.

http://tests.guduszeit.com/stitch.html

Code HTML :

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
<html>
	<head>
		<title>Stitch</title>
		<link rel="stylesheet" type="text/css" href="script/style.css">
	</head>
	<body>
		<div id="cadre">
			<img class="stitch01" src="images/stitch01.gif" alt="Stich01" title="Stich01" />
			<img class="stitch02" src="images/stitch02.gif" alt="Stich02" title="Stich02" />
			<img class="stitch03" src="images/stitch03.gif" alt="Stich03" title="Stich03" />
			<img class="stitch04" src="images/stitch04.gif" alt="Stich04" title="Stich04" />
			<img class="stitch05" src="images/stitch05.gif" alt="Stich05" title="Stich05" />
			<img class="stitch06" src="images/stitch06.gif" alt="Stich06" title="Stich06" />
			<img class="stitch07" src="images/stitch07.gif" alt="Stich07" title="Stich07" />
			<img class="stitch08" src="images/stitch08.gif" alt="Stich08" title="Stich08" />
			<img class="stitch09" src="images/stitch09.gif" alt="Stich09" title="Stich09" />
		</div>
	</body>
</html>

Code CSS :

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
body
{
	margin: 0px;
	padding: 0px;
}
 
#cadre
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 539px;
	height: 539px;
	border: 3px #FF0000 solid;
	background-color: #DDDDDD;
}
 
.stitch01
{
	position: absolute;
	left: 5px;
	top: 5px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}
 
.stitch02
{
	position: absolute;
	left: 183px;
	top: 5px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}
 
.stitch03
{
	position: absolute;
	left: 361px;
	top: 5px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}
 
.stitch04
{
	position: absolute;
	left: 5px;
	top: 183px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}
 
.stitch05
{
	position: absolute;
	left: 183px;
	top: 183px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}
 
.stitch06
{
	position: absolute;
	left: 361px;
	top: 183px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}
 
.stitch07
{
	position: absolute;
	left: 5px;
	top: 361px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}
 
.stitch08
{
	position: absolute;
	left: 183px;
	top: 361px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}
 
.stitch09
{
	position: absolute;
	left: 361px;
	top: 361px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}

J'aimerais avoir la même chose avec des positionnements en relatif, également avec des flottants pour comparer. Mais je n'y arrive pas. Si vous pouvez me donner le CSS correspondant, je vous serais reconnaissant.

Autre problème : la compabilité entre navigateurs.
J'ai remarqué que FF et IE avaient pas mal de différences de rendu avec du CSS. Pour exemple sous FF le cadre est centré alors que sous IE, il est aligné à gauche.
Autre problème plus génant, les bordures. Sous FF, les bordures sont toujours en dehors de la taille spécifiée dans le CSS (<div> et <img>) alors que sous IE la bordure des images se trouve à l'extérieur et pour la balise <div> la bordure se trouve à l'intérieur (sous FF elle se trouve à l'extérieur).

Voilà, ces différences posent parfois problème.

Je vous remercie d'avance pour votre aide.

**Royd938** · 07/12/2005, 09h27

Effectivement, il y a quelques différences de rendu entre les 2 navigateurs dans la mesure ou IE inclus les border et padding dans la taille d'un élément et pas Firefox. Mais c'est Firefox qui interprète correctement les CSS... Maintenant tu peux forcer IE d'interpréter les CSS comme il se doit en faisant un swicth de DOCTYPE...

Code :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Tu rajoutes cela en tout début de page (pas de balise <?xml ?> avant !!!) et IE interprètera les CSS comme FF. Mnt, y aura toujours quelques petites diférences que tu peux résoudre avec du hacking... Recherche sur le net, c'est pas les articles sur ce sujet qui manquent...

**Trunks** · 07/12/2005, 09h44

Bon, déjà je ne savais pas que le doctype était important

. Voilà déjà un point important de résolu. Je vais voir si les problèmes s'arrangent 8).

En fait, le fait d'utiliser des blocs <div> au lieu de la balise <table> fait il en sorte que c'est un autre langage, je veux dire xhtml strict? c'est quoi la différence entre html simple et xhtml strict?

**Royd938** · 07/12/2005, 10h43

Le XHTML reste du HTML mais respectant les règles d'un document XML... Il est donc beaucoup plus strict au niveau de la syntaxe que le HTML (ce qui n'est pas plus mal...).

Petit exemple:

Code :

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

<br>

qui passait en HTML ne passera pas en XHTML. Il faudra écrire:

Code :

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

<br />

Je ne sais pas si tu maitrises le langage XML, mais si ce n'est pas le cas, je te conseil de fortement t'y intéresser. Les possibiltés sont énormes (XPath, XSLT) ...

**Trunks** · 07/12/2005, 10h56

J ecrivais deja en xhtml alors sans le savoir ^^

[CSS]Positionnement des blocs <div> + pb selon navigat

CSS

Discussions similaires

Partager

Partager