Discussion :

[boucher.eric]

Bonjour tout le monde!
J'ai trois problèmes...
Le premier c'est que je veut centrer tout le site horizontalement, sous safari pas de problème...
Exemple avec safari
Exemple avec Internet Explorer
Mais avec IE, puisque le macaron et le rectangle blanc sont en position:absolute ds le css, ils ne s'alignent pas horizontalement malgré le
margin-right:auto;
margin-left:auto;

Le deuxième problème c'est la teinte du macaron... Sur safari, les couleurs sont belle mais pas sur firefox et IE. Est-ce qu'il faut que je l'exporte autrement qu'en .png?

Finalement, mon dernier problème c'est que lorsque j'insère mon animation flash (loading sur l'image) dans le code html et que je l'ouvre avec firefox ou internet deux petits caractères apparaissent...
VOici mon code html de l'animation:

Code :

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

1
2
3
4
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=	"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="717" height="218" align="middle"> 
<param name="movie" value="anim-flash.swf"> 
<param name="quality" value="high"> 
<embed src="anim-flash.swf" width="717" height="218" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></object>

Merci de votre aide !

[GihefBey]

Bonjour,

Éternel problème, sans le code HTML et CSS de ta page, impossible de t'aider.
Le mieux serait encore que tu donnes son adresse web.

-

[boucher.eric]

Voici le lien:
http://www.protic.net/eleves/sec4/barilj/

[Macmillenium]

Bonjour,

Tu ne peux pas centrer un bloc en position absolute avec les marges automatiques.
Pour régler ton problème :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
.rectangle_1
{
	background-color:#FFFFFF;
	height:293px;
	width:802px;
	margin-left:-401px;
        left:50%;
	position:absolute;
}

[boucher.eric]

kk merci beaucoup! mais pour les petits caractères, j'ai continuer de chercher et je n'est pas trouver... Quelqu'un sait ce qu'ils veulent dirent.

[Macmillenium]

mais pour les petits caractères, j'ai continuer de chercher et je n'est pas trouver... Quelqu'un sait ce qu'ils veulent dirent.

C'est dans ton code, ligne 43 :

Code html :

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

1
2
3
 
			</object>
    		</div>

[GihefBey]

Bonjour,

Pour le centrage, tu pourrais corriger un peu plus logiquement.
On constate des largeurs différentes et des centrages inutiles.

Essaye en appliquent une bordure au #site pour le voir.
Ensuite, essaye ces corrections

Code css :

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
@charset "UTF-8";
/* CSS Document */
 
body {
  background-color: #1b1a1a;
  }
 
#site {
position: relative;
width: 802px;
  height: 748px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Gill sans", "Trebuchet Ms", Tahoma, Helvetica, sans-serif;
border : 1px solid #f00;
  }
 
.header {
width: 802px;
  height: 293px;
  margin-top: 70px;
  }
 
.menu {
  height: 19px;
  margin-left: 237px;
  margin-top: 23px;
  margin-bottom: 4px;
  font-family: Tahoma, Helvetica, sans-serif;
  font-size: 19px;
  }
.menu a {
  color: #333;
  text-decoration: none;
  }
.menu a:visited {
  color: #333;
  text-decoration: none;
  }
.menu a:hover {
  color: #666;
  text-decoration: none;
  }
 
.ligne {
  margin-left: 3px;
  margin-right: 3px;
  color: #666;
  font-size: 16px;
  }
 
.rectangle_1 {
  width: 802px;
  height: 293px;
  margin-right: auto;
  margin-left: auto;
  position: absolute;
/*  left: 0px;
  right: 0px;*/
  background-color: #fff;
  }
 
.macaron {
  width: 271px;
  height: 272px;
  position: absolute;
  left: -68px;
  top: -75px;
  background-image: url(images/logo_peinture.png);
  }
 
.anim {
  width: 717px;
  height: 218px;
  margin-left: auto;
  margin-right: auto;
  border: thin solid #999;
  }
 
.rectangle_2 {
  background-color: #fff;
  width: 802px;
  height: 350px;
/*  margin-left: auto;
  margin-right: auto;*/
  }
 
.titre {
  color: #000;
  font-size: 16px;
  text-decoration: underline;
  text-align: center;
  }
 
.text {
  color: #000;
  font-size: 14px;
  text-align: justify;
  }
 
.bloc_1 {
  float: left;
  width: 355px;
  height: 350px;
  padding-left: 40px;
  padding-right: 10px;
  overflow: auto;
  }
 
.bloc_2 {
  width: 355px;
  height: 350px;
  padding-right: 43px;
  overflow: auto;
  }
 
.bottom {
  width: 802px;
  height: 38px;
/*  margin-left: auto;
  margin-right: auto;*/
  padding-top: 6px;
  text-align: center;
  color: #000;
  font-size: 14px;
  background-color: #fff;
  }
.bottom a {
  color: #333;
  }
.bottom a:visited {
  color: #333;
  }
.bottom a:hover {
  color: #666;
  }

Les liens sont définis de la même manière partout.
Est-il utile de créer plusieurs contextes ?

Pour les "petits caractères", tu as dû en insérer certains qui ont un code bizarre.
Mon éditeur de texte les matérialise comme ça (les u avec accent représentent les caractères défectueux, les losanges gris, des espaces)

Pour l'image, tu devrais peut-être abandonner la transparence et utiliser une image qui s'adapterait à son environnement, avec les bordures, le fond noir, le fond blanc.

Je ne sais pas comment tu as testé ta page (ni combien de temps ces liens seront valides), mais il semblerait que ça pose problème :
http://browsershots.org/http://www.p...s/sec4/barilj/
http://api.browsershots.org/png/orig...47d53ae974.png
http://api.browsershots.org/png/orig...e1d0c78464.png
http://api.browsershots.org/png/orig...32ef5140db.png
http://api.browsershots.org/png/orig...073311db24.png

J'ai comme dans l'idée que tu devrais abandonner les padding et préférer appliquer des margin à ce qui est contenu.

Le , serif après le sans-serif est inutile.
Le nom de la police est Tahoma (sans s).

-