Discussion :

[jojo15320]

Bonjour,
Je debute dans le css et j'ai réalisé mon premier codage/decoupage ! Il s'agit d'un design pour un ami ! Or, il bug quelques peu sous FireFox ! je crois que Firefox ne prend pas les margin ou je sais pas car tout les margin n'ont pas étaient pris en compte !

De plus, Firefox me met des sauts de ligne entre tout les Div ! et troisieme probleme le plus inquietant : en faite j'ai integré dans un div id un div class et je dernier réagit differamment sous les navigateurs ! Sous IE, la hauteur du ID prend en compte la hauteur du class alors que sous firefox non ! Pour que ca marche sous les 2 j'ai mis des espaces dans le div id ! Or, ca fait 15 sauts de ligne en trop dans IE

Comment faire ?

Online : http://infos-foot.net/design/design-news/

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
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
@charset "utf-8";
/* CSS Document 
By Jonathan Bonnet
jojo15320@msn.com */
 
/* Principal */ 
 
body
{
    font-weight:normal;
    color:#999999;
    font-family:Arial;
    font-size:12px;
    margin:auto;
    text-align:center;
    background-image:url("images/fond.jpg");
    background-attachment:fixed;
}
 
img {  border:none;}
 
 
/* Liens */
 
a:link
{
color:#999999;
font-weight:bold; 
text-decoration:none;
}
 
a:visited
{
color:#999999;
font-weight:normal;
text-decoration:none;
}
 
a:hover
{
color:#999999;
font-weight:normal;
text-decoration:none;
}
 
/* Element du design */
 
#Header 
{
    margin:auto;
    color:#999999;
    font-weight:normal;
    background-image:url("images/fond-header.png");
    width:786px;
    height:179px;
}
 
.Header-Bienvenue
{
    float:left;
    margin:auto;
    color:#999999;
    font-weight:normal;
    width:150px;
    height:15px;
}
 
.Header-Dates
{
    float:right;
    margin:auto;
    color:#999999;
    font-weight:normal;
    width:180px;
    height:15px;
}
 
#Banniere
{
    margin:auto;
    background-image:url("images/header.png");
    width:779px;
    height:160px;
}
 
.Header-Pub
{
    float:right;
    margin-top:50px;
    margin-right:8px;
    background-image:url("images/fond-annonceur.png");
    width:472px;
    height:64px;
}
 
#Marque
{
    margin:auto;
    background-image:url("images/fond-marque.png");
    width:786px;
    height:27px;
}
 
.Marque-Ecriture
{
    text-align:center;
    margin-top:7px;
    margin-left:20px;
    width:745px;
    height:14px;
}
 
#Centre
{
    margin:auto;
    background-image:url("images/fond-contenu.png");
    width:786px;
    background-repeat:repeat;
    float: inherit;
    background-attachment: scroll;
}
 
.Gauche
{
    float:left;
    text-align:center;
    width:140px;
}
 
 
.Lesite
{
    background-image:url("images/lesite.png");
    float:left;
    width:130px;
    height:200px;
    text-align:center;
}
 
.Lesite-Menu
{
    margin:auto;
    background-image:url("images/fond-menu.png");
    float:none;
    width:116px;
    height:23px;
}
 
.Partenaires
{
    margin:auto;
    background-image:url("images/partenaires.png");
    width:130px;
    height:174px;
}
 
#Milieu
{
    float:left;
    text-align:center;
    width:506px;
    height:inherit;
}
 
.Haut-Milieu
{
    text-align:center;
    height:3px;
    width:500px;
    background-image:url("images/haut-rouge.png");
}
 
.Centre-Milieu
{
    text-align:center;
    width:500px;
    background-image:url("images/centre-rouge.png");
}
 
.Bas-Milieu
{
    text-align:center;
    height:3px;
    width:500px;
    background-image:url("images/bas-rouge.png");
}
 
.Droite
{
    text-align:center;
    width:140px;
    float:right;
}
 
.Pub-Droite
{
    background-image:url("images/pub.png");
    width:130px;
    height:652px;
    margin:auto;
}
 
#Footer
{
    background-image:url("images/fond-footer.png");
    width:786px;
    height:89px;
    margin:auto;
}
 
.Footer-Liens
    {
    background-image:url("images/bas.png");
    width:786px;
    height:22px;
    text-align:right;
}
 
.Footer-Bas
    {
    background-image:url("images/footer.png");
    width:683px;
    height:31px;
    text-align:center;
    margin:auto;
}

Le fichier HTML

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style1 {color: #999999}
.Style2 {color: #0C2033}
-->
</style>
</head>
 
<body>
<div class="Style1" id="Header">
  <div class="Header-Bienvenue"><strong>B</strong>ienvenue visiteur</div> 
  <div class="Header-Dates"><strong>J</strong>eudi 17 avril 2008 22:42</div>
  <br />
  <div id="Banniere"><div class="Header-Pub">
    <div align="center"><img src="images/annonceur.png" width="461" height="54" longdesc="#" /></div>
  </div>
  </div>
</div>
 
 
<div id="Marque">
<div class="Marque-Ecriture">Concours de Parrainage finit ! Felicitation a <strong>Kevix</strong>, qui gagne 500points, <strong>Mr-X</strong> qui gagne 250points et <strong>Mdm</strong> qui gagne 100points</div>
</div>
 
<div id="Centre">
  <div class="Gauche"> <br />
  <div class="Lesite"><br />
    <br />
    <div class="Lesite-Menu"><a href="#">Lien</a><br />
    </div>
    <div class="Lesite-Menu"><a href="#">Lien</a></div>
    <div class="Lesite-Menu"><a href="#">Lien</a></div>
    <div class="Lesite-Menu"><a href="#">Lien</a></div>
  </div>
 
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
<div class="Partenaires">
  <p><br />
      <a href="#"><img src="images/part.png" width="88" height="31" /><br />
        <img src="images/part.png" alt="" width="88" height="31" /><img src="images/part.png" alt="Partenaire" width="88" height="31" /><br />
      </a></p>
  </div> 
 
 
  <p>&nbsp;</p>
  </div>
  <div id="Milieu"> <br />
  <div class="Haut-Milieu"></div>
          <div class="Centre-Milieu">
            <p>vdfjifdjfdjiofdjofdjo</p>
            <p>fdjfdijoifdojifdjiofd</p>
            <p>fdjidfijjifdijfdfd</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
    </div>
          <div class="Bas-Milieu"></div>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p><br />
              </p>
              <p>&nbsp;</p>
  </div><div class="Droite">
          <div class="Pub-Droite"><br />
            <br />
          <img src="images/pub-droite.png" width="121" height="601" /></div>
        </div>
 
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
  <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
  <p>&nbsp;</p>
                <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><br />
        </p>
</div>
 
 
<div id="Footer"> <br />
<div class="Footer-Liens"><a href="#">Visite Du Site</a> / <a href="#">Annoncer</a> / <a href="#">Partenaires</a> /<a href="#"> Contact</a>..<br />
  </div>
        <div class="Footer-Bas">Partenaires : <a href="#">ForumDesJoueurs</a>, <a href="#">Dengamer</a>.... </div>
</div></body>
</html>

Merci d'avance a ceux qui m'aideront

[Erwan31]

Bonjour,
tu as manifestement corrigé le problème toi même en supprimant les <p>
qui provoquaient quelques problèmes très fréquents de fusion des marges.
Voir ces explications.