probleme de compatibilité

**orphen** · 22/02/2007, 01h09

coucou voila j'ai enfin fini a 80 % le codage de ma page: http://fansyl.com.free.fr

cependant ma mise en forme est decaler sous firefox voila mon code xhtml

Code html :

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
 
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>www.fansyl.com</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="keywords"           content="fansyl,infographie,3d,maquetisme,cinéma,compositing,maya" />
	   <meta name="author"             content="deliee fanny,bousselier sylvain" />
	   <meta name="description"        content="Découvrez sur ce site nos portofolios, tutoriaux et projets" />
	   <link href="css/design1.css" rel="stylesheet" type="text/css" media="screen" />
   </head>
   <body>
      <div id="fondblanc"><div id="banniere"><img src="images/iconefansyl.gif" alt="Chargement" class="iconefansyl" />
	                                         <img src="images/banniere.gif" alt="Chargement" class="banniere" />
											 <img src="images/iconebanniere.gif" alt="Chargement" class="iconebanniere" />
				          </div>
 
                         <div id="menu"><p class="navig">galeries <span class="separation">|</span> cv <span class="separation">|</span> biographies <span class="separation">|</span> projets <span class="separation">|</span> forum <span class="separation">|</span> liens</p>
                         </div>		
                         <div id="orangecote"></div>
						 <div id="corps"><img src="images/print/printmont.gif" alt="Chargement" class="print" />
						                 <img src="images/bienvenu.gif" alt="Chargement" class="bienvenu" /><br />
										                                                                    <br />
																							                <br />		 
						                 <p class="para1">
										                  Bienvenue sur <font color="#cb6709">www.fan</font><font color="#66330b">syl.com</font>
                                                          Ce site a été entierement codé à la main, il contient le travail
	                                                      personnel et professionnel de <font color="#66330b">Sylvain Bousselier</font> et <font color="#cb6709">Fanny Deliée.</font>
	                                                      Nous travaillons dans l'imagerie de synthese, le maquettisme, le compositing,
	                                                      le webdesign, l'integration (xhtml,multimedia).
	                                                      Chaque partie du site est decoupée en deux sections: celle de <font color="#66330b">Sylvain</font> et de <font color="#cb6709">Fanny.</font>
                                          </p>	
                                          <img src="images/separation2.gif" alt="Chargement" class="separtext" /><br />
                                          <p class="para1">
                                                          Ce site se compose d'un menu qui vous permettra de naviguer dans les differentes sections.
	                                                      La partie <font color="#cb6709">galerie</font> vous montrera differents travaux personnels ou professionnels, la partie
	                                                      <font color="#cb6709">CV</font> contient nos Curiculum Vitae avec nos experiences, la partie <font color="#cb6709">biographie</font> contient nos parcours
                                                          respectifs, la partie <font color="#cb6709">projet</font> contient notre projet personnel commun, la partie <font color="#cb6709">forum</font> contient le forum de
                                                          notre site, et la partie <font color="#cb6709">liens</font> contient differents liens sur le graphisme qui nous tiennent à coeur.
                                          </p>		
                                           <img src="images/separation2.gif" alt="Chargement" class="separtext" /><br />
                                            <p class="para1">
                                            <font color="#cb6709">Fanny</font> et <font color="#66330b">Sylvain</font> vous souhaitent une bonne visite. N'hesitez pas à nous contacter pour
                                                         vos projets ou plus de renseignements sur notre travail en nous envoyant un message
                                                         grace à la partie ci-dessous.
                                          </p>										   
						 </div>
 
						 <div id="news"><!--espace mise en page--><br /><h4 class="titrenews">Ev&egrave;nements et news</h4>
						                                      <h5>News du site :</h5>
						                                      <p class="news">Mise en ligne du site le../../....
	                                                            Certaines pages ne sont pas encore en ligne
                         				                      </p> 
															  <img src="images/separation.gif" alt="Chargement" class="separation1" /><br />
															  <h5>News de Sylvain :</h5> 
															  <p class="news">Fin du codage de notre site.<br />
	                                                                          Premieres images de ma galerie.<br />
																			  Ma biographie et mon CV en ligne.<br />
                         				                      </p>
                                                              <img src="images/separation.gif" alt="Chargement" class="separation2" /><br />	
                                                              <h5>News de Fanny :</h5>
                                                              <p class="news">Fin du codage de notre site.<br />
	                                                                          Premieres images de ma galerie.<br />
																			  Ma biographie et mon CV en ligne.<br />															  
						 </div>                      						 
      </div>
   </body>
</html>

et mon code css:

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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 
body{
width:100%;
background-image: url(../images/imagefond.gif);
margin-top: 0px;
}
 
#fondblanc{
background-color: #ffffff;
width: 800px;
margin: auto;
}
 
#banniere{
margin: auto;
background-color: #ffffff;
width: 780px;
height: 100px;
}
 
.iconefansyl{
position: absolute;
margin-top: 0px;
margin-left: 0px;
width: 140px;
height: 100px;
}
 
.banniere{
position: absolute;
margin-left: 150px;
margin-top: 0px;
height: 100px;
width: 440px;
}
 
.iconebanniere{
position: absolute;
margin-left: 600px;
margin-top: 0px;
height: 100px;
width:130px;
}
 
#menu{
margin: auto;
background-color: #66330b;
width: 780px;
height: 20px;
}
 
.navig{
display: inline;
margin-left: 100px;
word-spacing: 35px;
color: #ffffff;
font-size: 13px; 
font-variant: small-caps;
}
 
.separation{
color: #cb6709;
}
 
#news{
margin-top: 0px;
margin-left: 10px;
background-image: url(../images/news.gif);
background-repeat: repeat-y;
width: 176px;
height: 800px;
}
 
.titrenews{
margin-top: 0px;
font-size: 12px;
font-variant: small-caps;
font-weight: normal;
color: #ffffff;
text-align: center;
margin-left: 18px;
border-top: solid #e5b382 2px;
border-bottom: solid #e5b382 2px;
}
 
h5{
color: #ffffff;
padding-left: 25px;
display: inline;
text-decoration: underline;
}
 
.news{
margin-top: 0px;
padding-top: 10px;
padding-left: 25px;
padding-right:20px;
text-align: left;
font-size: 11px;
font-variant: small-caps;
color: #ffffff
}
 
.separation1{
position: absolute;
margin-left: 25px;
margin-top: 5px;
width: 136px;
height: 10px;
}
 
.separation2{
position: absolute;
margin-left: 25px;
margin-top: 5px;
width: 136px;
height: 10px;
}
 
#corps{
position: absolute;
margin-left: 176px;
margin-top: 0px;
width: 560px;
height: 798px;
border-bottom: dotted 2px #cb6709;
}
 
.print{
width: 550px;
height: 200px;
}
 
.para1{
color: #787878;
font-size: 12px;
padding-top: 15px;
padding-left: 90px;
padding-right: 20px;
width: 400px;
}
.bienvenu{
float: left;
width: 125px;
height: 89px;
}
 
.separtext{
margin-left: 200px;
width: 141px;
height: 9px;
}
 
#orangecote{
position: absolute;
margin-left: 725px;
background-color: #cb6709;
width: 55px;
height: 800px;
margin-top: 0px;
}

je pensai avoir utiliser des balises reconnu de la meme facon dans les deux navigateurs apparement je me suis tromper.

qu'est ce que je doit corriger dans mon code pour rendre mon site compatible svp merci de ce coup de pouce par avance

**Candygirl** · 22/02/2007, 10h05

Hello,

ton problème de décalage vient d'ici:

Envoyé par orphen

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
 
body{
#news{
margin-top: 0px;
margin-left: 10px;
background-image: url(../images/news.gif);
background-repeat: repeat-y;
width: 176px;
height: 800px;
}
 
#corps{
position: absolute;
margin-left: 176px;
margin-top: 0px;
width: 560px;
height: 798px;
border-bottom: dotted 2px #cb6709;
}

Tu donnes une largeur de 176px à ta colonne de gauche + 10px de margin-left, mais tu ne donnes qu'un margin-left de 176px à ton # corps au lieu de 186 (176+10px de marge).

**orphen** · 22/02/2007, 10h10

avec le code que j'ai mis ma page est exactement comme je le voudrai mais que dans internet explorer.

si je met 186 ma peinture n'est plus coller a ma colone de news hor j'aimerai qu'elle le reste.

regarde ma page sous internet explorer tu verra exactement ce que je veux avoir.

mon probleme est que dans firefox c'est effectivement decaler comment faire pour que tous reste bien en place dans les deux navigateur?

**Candygirl** · 22/02/2007, 10h33

Oui, j'ai bien compris ce que tu souhaites.

Passer à 186 ne te crèe un espace que sur IE, pas sur FF.

Tu utilises un positionnement absolu pour ton corps, mais sans préciser de référence pour son positionnement. Tu t'exposes donc à l'interprétation du navigateur quant à l'endroit suppposé où doit se trouver ton corps. IE décide de prendre en compte le 10px de marge alors que FF pas.

Pour mettre tout le monde d'accord, tu dois spécifier la référence pour ton positionnement absolu en donnant un position relative à ton #fondblanc:

Code css :

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

1
2
3
#fondblanc {
  position:relative;
}

ensuite tu vas dire à ton #corps de partir du bord de #fondblanc en ajoutant un left:186px:

Code css :

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

1
2
3
#corps {
  position:absolute; left:186px;
}

et virer le margin-left.

En passant, tu devrais virer le width 100% de ton body qui fait apparaître la scroll-bare horizontale.

**orphen** · 22/02/2007, 11h34

merci pour ta reponse je vai tester sur firefox bientot.
je pensait qu'en position: absolute le navigateur se servait du coin superieur gauche de l'ecran pour le positionnement.

une position relative ca corespond a dire quoi au navigateur en fait?.

et une toute derniere question la difference entre left et margin left quand au positionement en absolute?

je suis desoler avec toute mes questions mais j'aime comprendre ce que je fait reelement

je suis un petit curieu.

merci de m'aider en tous ca tu es vraiment sympas

**MasterOfChakhaL** · 22/02/2007, 11h47

Salut,

Le margin-left sert a indiquer que tu veux un espace a gauche de ton élément. Quand tu es sur cet espace, tu n'es pas sur l'élément en question.

le left veut dire que tu détermine une coordonnées.
Pour un élément positionnée en relative, il s'agit d'un décalage par rapport à l'emplacement qu'il aurait occupé sinon (ce n'est pas sensé influencer le reste, ca doit donc créer des chevauchements).
Pour un élément positionné en absolute, le décalage est fait en prenant pour origine le premier ancêtre positionné. S'il n'y a pas d'ancêtre positionné, alors, c'est là que la fenêtre du navigateur sert d'origine.

Un élément est positionné si la propriété position vaut absolute, relative ou fixed (fixed pas reconnu par IE).

A priori le margin-left est inutile pour un élément positionné en absolute car, étant sorti du flux de la page, il n'interagit pas avec les autres éléments.

probleme de compatibilité

CSS

Vue hybride

Discussions similaires

Partager

Partager