Tableaux : écarts d'alignement entre deux rangées

**Razor82** · 06/05/2009, 21h17

Bonjour à tous!

Je me fait un petit site sympa sur la vente d'articles d'ordinateurs et j'ai un soucis avec mon tableau ou plutôt mes tableaux. En fait j'ai un tableau contenant 2 tableaux: celui d'à gauche pour la recherche et les catégories, celui d'à droite pour l'affichage des articles.

Voici mon code:

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
 
<table width="800" height="270" border="1" cellpadding="0" cellspacing="0">
  	<tr>
    	<td><table width="170" height="270" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td height="20" bgcolor="#6699FF">Recherche</td>
	</tr>
  	<tr>
    <td><form action="chercher_article.php" method="post">
<table width="170" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="30" align="center"><input type="text" name="recherche"></td>
</tr>
<tr>
	<td height="30" align="center">
    	<select name="choix"> 
            <option value="titre" selected>PC</option>
            <option value="portable">Portable</option>
            <option value="peripheriques">Périphériques</option>
        </select>
		<input type="submit" name="envoyer" value="OK">
	</td>
</tr>
<tr>
<td height="20"></td>
</tr>
</table>
</form></td>
  </tr>
  <tr>
  <td height="20" bgcolor="#6699FF">Catégories</td>
  </tr>
  <tr>
    <td>
<table width="170" height="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="30"><a href="ordi_bureau.php">Ordinateurs de bureau</a></td></tr>
<tr>
<td height="30"><a href="ordi_portables.php">Ordinateurs portables</a></td></tr>
<tr>
<td height="30"><a href="ventes.php">Meilleures ventes</a></td></tr>
<tr>
<td height="30"><a href="a_venir.php">Articles à venir</a></td></tr>
<tr>
<td height="30"><a href="en_speciaux.php">En spéciaux</a></td>
</tr>
</table></td>
  </tr>
</table></td>
    <td><table width="630" height="270" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="4" align="center" height="20" bgcolor="#6699FF">Articles récemment ajoutés</td> 
  </tr>
  <tr>
    <td width="155" height="200" align="center">Image</td>
    <td width="155" height="200" align="center">Image</td>
    <td width="155" height="200" align="center">Image</td>
    <td width="155" height="200" align="center">Image</td>
  </tr>
  <tr>
    <td width="155" height="50" align="center">Prix/Bouton</td>
    <td width="155" height="50" align="center">Prix/Bouton</td>
    <td width="155" height="50" align="center">Prix/Bouton</td>
    <td width="155" height="50" align="center">Prix/Bouton</td>
  </tr>
</table></td>
  </tr>
</table>

Le problème qui me cause c'est la rangée bleue de "Articles récemment ajoutés" qui n'est pas alignée avec la rangée de Recherche.

Pourtant, quand je fait le design sur Dreamweaver, il est aligné! Mais sur Firefox 3, il est un peu "abaissé". Même résultat sur IE, mais j'ai demandé à quelqu'un qui utilise Opera et c'est aligné parfaitement !

Voici des images vous le montrant...
Firefox: http://img24.imageshack.us/img24/4357/tableaux1.jpg
Dreamweaver: http://img24.imageshack.us/img24/113/tableaux2.jpg

Merci de votre temps.

**danielhagnoul** · 07/05/2009, 01h35

Bonsoir.

J'ai testé le code suivant sur F3, IE8 et IE7, c'est OK !

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
 
<!DOCTYPE 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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        div#conteneur p {
            margin-bottom:12px;
        }
        div#affiche {
            margin:12px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="conteneur">
        <table width="800" height="270" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table width="170" height="270" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="20" bgcolor="#6699FF">Recherche</td>
                        </tr>
                        <tr>
                            <td>
                                <form action="chercher_article.php" method="post">
                                    <table width="170" height="80" border="0" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td height="30" align="center"><input type="text" name="recherche"></td>
                                        </tr>
                                        <tr>
                                            <td height="30" align="center">
                                                <select name="choix"> 
                                                    <option value="titre" selected>PC</option>
                                                    <option value="portable">Portable</option>
                                                    <option value="peripheriques">Périphériques</option>
                                                </select>
                                                <input type="submit" name="envoyer" value="OK">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="20"></td>
                                        </tr>
                                    </table>
                                </form>
                            </td>
                        </tr>
                        <tr>
                            <td height="20" bgcolor="#6699FF">Catégories</td>
                        </tr>
                        <tr>
                            <td>
                                <table width="170" height="150" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td height="30"><a href="ordi_bureau.php">Ordinateurs de bureau</a></td>
                                    </tr>
                                    <tr>
                                        <td height="30"><a href="ordi_portables.php">Ordinateurs portables</a></td>
                                    </tr>
                                    <tr>
                                        <td height="30"><a href="ventes.php">Meilleures ventes</a></td>
                                    </tr>
                                    <tr>
                                        <td height="30"><a href="a_venir.php">Articles à venir</a></td>
                                    </tr>
                                    <tr>
                                        <td height="30"><a href="en_speciaux.php">En spéciaux</a></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table width="630" height="270" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td colspan="4" align="center" height="20" bgcolor="#6699FF">Articles récemment ajoutés</td> 
                        </tr>
                        <tr>
                            <td width="155" height="200" align="center">Image</td>
                            <td width="155" height="200" align="center">Image</td>
                            <td width="155" height="200" align="center">Image</td>
                            <td width="155" height="200" align="center">Image</td>
                        </tr>
                        <tr>
                            <td width="155" height="50" align="center">Prix/Bouton</td>
                            <td width="155" height="50" align="center">Prix/Bouton</td>
                            <td width="155" height="50" align="center">Prix/Bouton</td>
                            <td width="155" height="50" align="center">Prix/Bouton</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
          <div id="affiche"></div>
    </div>
</body>
</html>

**laurentSc** · 07/05/2009, 13h37

Ca marche aussi sur IE6 et F2 (si c'est bien comme ça qu'on appelle Firefox). Et pour mon info, quelle était la solution ?

**Razor82** · 07/05/2009, 16h03

Merci Daniel.

J'ai essayé plusieurs tests sur mon code (ajouté le DOCTYPE de XHTML, HTML, Transit et Strict). Alors que sur FF3 et IE8 ça fonctionne, mais sur Opera non (même problème de la rangée qui ne s'aligne pas).

Alors j'ai ajouté dans la section des styles:

Code :

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

1
2
3
4
5
 
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
    margin: 0px;
    padding: 0px;
}

Tout est maintenant parfait comme je le veux ! Sur FF, IE et Opera. Gros merci!

Tableaux : écarts d'alignement entre deux rangées

HTML

Vue hybride

Discussions similaires

Partager

Partager