Discussion :

[Invité]

Bonjour,

J'utilise un tableau pour afficher un menu. J'ai ajouter 3 onglets à mon menu et maintenant j'ai des espaces pas très jolis dans les images des onglets. (voir ici)

Voici le code utilisé (très basique) :

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
 
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
                <tr><td><img src="img/menu_left_on.gif" alt=""></td>
                    <td background="img/menu_on.gif"><a class="menu_on" href="index.jsp?MENU1=0">Accueil</a></td>
                    <td><img src="img/menu_right_on.gif" alt=""></td><td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=1">Intrusion</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
                            <td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=2">Radio</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
                            <td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=3">Vidéo</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
                            <td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=4">Contrôle d'accès</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
                            <td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=5">Télétransmission</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
                            <td><img src="img/menu_left_off.gif" alt=""></td>
                            <td background="img/menu_off.gif"><a class="menu_off" href="index.jsp?MENU1=6">Incendie</a></td>
                            <td><img src="img/menu_right_off.gif" alt=""></td>
 
                    <!-- Add By babastutz -->
 
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
 
                    <td><img src="img/menu_left_off.gif" alt=""></td>
                    <td background="img/menu_off.gif"><a class="menu_off" href="#">Liste de prix</a></td>
                    <td><img src="img/menu_right_off.gif" alt=""></td>
 
                    <td><img src="img/menu_left_off.gif" alt=""></td>
                    <td background="img/menu_off.gif"><a class="menu_off" href="doctechnique.jsp?page=doctechnique">Doc technique</a></td>
                    <td><img src="img/menu_right_off.gif" alt=""></td>
 
                    <td><img src="img/menu_left_off.gif" alt=""></td>
                    <td background="img/menu_off.gif"><a class="menu_off" href="support.jsp?page=support">Support</a></td>
                    <td><img src="img/menu_right_off.gif" alt=""></td>
                    <!-- End -->
                </tr>
            </table>

[Bisûnûrs]

Etant donné qu'on n'a pas les images de notre côté pour tester, difficile de te donner une réponse précise. On peut faire des hypothèses, exemple en te disant de rajouter un display:block sur tes images, même si je doute que ça répondra à ton problème.
Donc as-tu une page en ligne pour pouvoir tester ?

[Erwan31]

Bonjour,
le choix d'un tableau n'est pas très pertinent pour un menu. Tu devrais passer par une liste non ordonnée (UL).

[Invité]

@Erwan31 : Totalement d'accord avec toi. J'utilise également des listes habituellement. Mais là je dois juste faire des modifications sur le site. Je n'ai pas le droit de tout changer.

voici un lien vers la dite page

Merci de votre aide

[Bisûnûrs]

Tu peux corriger le problème en rajoutant une largeur à tes td (gauche et droit) identique à la largeur de l'image qu'ils contiennent :

Code :

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

<td style="width:10px">

En effet, tu souhaites que ton tableau fasse 100% en largeur, seulement les cellules s'agrandissent aléatoirement en fonction de l'espace disponible pour prendre 100% de la largeur totale si elles n'ont pas de largeur spécifiée.

En renseignant cette largeur sur ces td gauches et droits, tu les forces à rester de cette taille là (dans ton cas, certains prenaient 1px de plus ce qui provoquaient ces décalages), donc ce sont les td avec les textes qui vont s'adapter pour prendre en compte 100% de la largeur.


Je sais pas si je suis clair, mais je me suis compris.

[Invité]

@Bisûnûrs: Parfait!! Merci beaucoup