Alignement tableau et formulaire

**worldhugo** · 11/02/2009, 19h22

Bonjour a tous,
je me suis lancé dans un site mais je rencontre quelque petit problème.
Le site n'est visible que pour firefox pour l'instant.
Alors le premier problème :
sur cette page : http://testevici.olympe-network.com/val/test/membre.php le tableau n'est pas aligner au centre malgré mes <center>.
Et le 2eme :
sur cette page : http://testevici.olympe-network.com/val/test/ajout.php le formulaire n'est pas aligné. Le problème vient de mes <br> mais je ne sais pas comment le résoudre .
Je mets les 2 page en pièces jointes.
Merci d'avance pour vos réponses.
Hugo

**sabotage** · 11/02/2009, 19h35

Bonjour,

Les définitions comme <center> ou <strong> sont obsolètes.
Puisque tu utilises des <div>, tu devrais t'interesser à la mise forme par style css.

Par exemple :
http://xhtml.developpez.com/faq/?pag...orizontalement

**worldhugo** · 11/02/2009, 19h40

Merci,
mais es ce que tu pourrait me modifier juste ses 2 petit truc la stp

**GihefBey** · 11/02/2009, 23h21

Bonjour,

On peut peut-être essayer de te proposer un peu plus.
Je me limiterai à cette page.

En fonction du code qu'on peut lire dans la page, il me semble plus approprié que tu utilises un DOCTYPE de ce genre : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ensuite que tu fasses un peu de ménage, en abandonnant quelques mauvaises habitudes, dans ce code.
HTML Tidy peut t'y aider.

Et puis t'encourager à utiliser un bloc pour regrouper ceux de la colonne de droite.
Et hop, un peu plus de simplicité, juste un bloc à gérer en float.

Pour centrer le tableau, il te faut lui donner des dimensions et lui appliquer des marges.
Par exemple, width: 50%; margin: 0 auto;

Tu peux tester ça avec ce code où toutes les <center>, <b>... mises en forme en HTML ont été supprimées pour être remplacées assez facilement par des styles externes.
Le résultat est visible pendant quelques jours dans cette page.

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
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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="HTML Tidy for Mac OS X (vers 1st March 2003), see www.w3.org" name="generator">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Guilde Resilience</title>
  <link rel="stylesheet" type="text/css" href="mozilla.css">
</head>
<body>
  <div id="banniere">
    <img src="http://testevici.olympe-network.com/val/test/banniere.jpg" alt="à renseigner un peu partout">
  </div>
 
  <div id="droite">
    <div id="nav">
        <h2>Navigation&nbsp;:</h2>
        <a href="index.php">Accueil</a>
        <br>
        <a href="membre.php">Les membres</a>
        <br>
        <a href="forum.php">Forum</a>
        <br>
        <a href="ajout.php">Ajouter un membre</a>
        <br>
        <a href="admin/login.php">Admin</a>
    </div>
    <div id="recrutement">
      <h2>Recrutement&nbsp;:</h2>
      <table border="0">
        <tr>
          <td>Chaman</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/fermer.jpg" alt="">
          </td>
        </tr>
        <tr>
          <td>Chasseur</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/fermer.jpg" alt="">
          </td>
        </tr>
        <tr>
          <td>
            Chevalier de la mort
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/ouverte.jpg" alt="">
          </td>
        </tr>
        <tr>
          <td>Demoniste</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/fermer.jpg" alt="">
          </td>
        </tr>
        <tr>
          <td>Druide</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/ouverte.jpg" alt="">
          </td>
        </tr>
        <tr>
          <td>Guerrier</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/fermer.jpg" alt="">
          </td>
        </tr>
        <tr>
          <td>Mage</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/ouverte.jpg" alt="">
          </td>
        </tr>
        <tr>
          <td>Paladin</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/fermer.jpg" alt="">
          </td>
        </tr>
        <tr>
          <td>Pretre</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/ouverte.jpg" alt="">
          </td>
        </tr>
        <tr>
          <td>Voleur</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/fermer.jpg" alt="">
          </td>
        </tr>
      </table>
    </div>
  </div>
 
  <div id="autre">
      <h1>Les membres de la guilde sont&nbsp;:</h1>
      <table id="membres" border="0">
        <tr>
          <th>Numero</th>
          <th>Personnage</th>
          <th>Level</th>
          <th>Classe</th>
          <th>Race</th>
        </tr>
        <tr>
          <td>12</td>
          <td>Taran</td>
          <td>79</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/fufu.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/humain.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>8</td>
          <td>Taran</td>
          <td>80</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/demo.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/orc.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>11</td>
          <td>Taran</td>
          <td>80</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/chaman.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/draenien.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>13</td>
          <td>Tarane</td>
          <td>80</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/dk.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/elfe%20sang.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>14</td>
          <td>Youro</td>
          <td>80</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/chasseur.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/elfe%20sang.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>15</td>
          <td>Yéh</td>
          <td>67</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/dk.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/mort.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>16</td>
          <td>Yéh2</td>
          <td>65</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/chasseur.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/tauren.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>18</td>
          <td>Babiloche</td>
          <td>78</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/druide.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/elfe%20nuit.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>19</td>
          <td>Tar</td>
          <td>78</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/chaman.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/draenien.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>20</td>
          <td>Touronne</td>
          <td>34</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/druide.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/gnome.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>21</td>
          <td>Touronne</td>
          <td>34</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/druide.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/gnome.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>24</td>
          <td>Touronne</td>
          <td>34</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/druide.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/gnome.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>25</td>
          <td>Touronne</td>
          <td>34</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/druide.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/gnome.gif" alt="">
          </td>
        </tr>
        <tr>
          <td>26</td>
          <td>Touronne</td>
          <td>34</td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/classe/druide.gif" alt="">
          </td>
          <td>
            <img src="http://testevici.olympe-network.com/val/images/race/gnome.gif" alt="">
          </td>
        </tr>
      </table>
  </div>
</body>
</html>

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
body {
background: #001 url(bg.jpg) no-repeat center top;
color: #fff;
  }
#banniere {
  margin-top: -0.65%;
  margin-left: 10%;
  height: 162px;
  }
 
#droite {
  float: right;
  width: 19%;
  margin-right: 10%;
  text-align: center;
/*  background-color: white;*/
  }
#droite h2 {
  margin: 0;
  padding: 16px 0 0;
  font-size: 1.1em;
  color: #6f3;
  }
#droite a {
  color: #f90;
  }
#droite a:hover {
  color: #6f3;
  }
 
#membres {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  }
 
 
#recrutement {
  }
 
#nav {
  }
 
#autre {
  height: auto;
  width: 60%;
  margin-left: 10%;
/*  margin-top: -0.5%;*/
text-align: center;
/*  background-color: white;*/
  }
#autre th {
  font-weight: bold;
  border-bottom: 2px solid #8bc7f3;
  }
#autre td {
  border-bottom: 1px solid #aaa;
  }
#autre th, #autre td {
  border-color: #bbdbfe;
  }
 
h1 {
  margin: 0;
  padding: 16px 0;
  font-family: "Smudger LET", fantasy;
  color: #fff;
  }

Évite d'utiliser le soulignement pour autre chose que des liens.

L'mage d'arrière-plan est trop lourde (et trop grande ?)

Tu devrais faire autrement avec ta bannière.
Elle se déplace et pourrit un peu le graphisme.

Ouvrir - Fermer
Ouverte - Fermée

-

**worldhugo** · 12/02/2009, 18h14

Ok ,
merci les mec pour tout sa mais la je suis perdu.
1) Meme avec le css que j'avais fait sur cette page : http://testevici.olympe-network.com/val/test/membre.php le texte est toujours mal aligné sur firefox.
2)Es se que l'un de vous pourrez refaire mon css pour IE parceque je suis encore plus perdu la

. Le css c'est : http://testevici.olympe-network.com/val/test/ie.css

**HiRoN** · 12/02/2009, 18h58

Envoyé par worldhugo

1) Meme avec le css que j'avais fait sur cette page : http://testevici.olympe-network.com/val/test/membre.php le texte est toujours mal aligné sur firefox.

Repars de la page fournit par GihefBey (donc oublie la tienne) et le problème sera résolu.

Envoyé par worldhugo

2)Es se que l'un de vous pourrez refaire mon css pour IE parceque je suis encore plus perdu la

Idem... Le code fournit par GihefBey est autant compatible FF que IE (en tout cas chez moi, FF2/3 & IE7)...

**Macmillenium** · 12/02/2009, 20h55

Bonsoir,

Envoyé par GihefBey

En fonction du code qu'on peut lire dans la page, il me semble plus approprié que tu utilises un DOCTYPE de ce genre : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Attention à ce doctype incomplet qui bascule les navigateurs en mode de rendu Quirks.

Alignement tableau et formulaire

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager