menu pas joli avec FF

Version imprimable

Bonsoir,

j'ai une page html qui affiche un menu : le look est bon sous IE mais pas beau sous FF : l'adresse de la page et le code :

Code:

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
<style type="text/css">
</*MENU
*/
.menu {
height : 40px;
width : 800px;
}
.intermenu {
width : 5px;
}
.menuItem {
width: 100px;
height : 40px;
vertical-align:bottom;
}
.menuItem a {
evenium: cellproperties;
font-size: 14px;
width: 100px;
//width: 196px;
padding-left: 8px;
font-family : Arial, Verdana, serif;
color: #626469;
text-decoration: none;
text-align: left;
display: block;
background : url('menu.png') no-repeat;
line-height: 40px;
}
.menuItem a:hover {
evenium: cellproperties;
display: block;
font-size: 14px;
width: 100px;
//width: 196px;
font-family : Arial, Verdana, serif;
color: #FFFFFF;
vertical-align:top;
text-decoration: none;
text-align: left;
background : url('menuselect.png') no-repeat;
line-height: 40px;
}
</style>
<table cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <th class="menuItem"><a href=""
 target="frmMain">Home</a></th>
      <th class="menuItem"><a href=""
 target="frmMain">Registration</a></th>
      <th class="menuItem"><a href=""
 target="frmMain">Practical informations</a></th>
      <th class="menuItem"><a href=""
 target="frmMain">List of
participants </a></th>
      <th class="menuItem"><a href=""
 target="frmMain">Registration suppression</a></th>
    </tr>
    <tr>
      <th class="menuItem"><a href=""
 target="frmMain">Contact us</a></th>
      <th class="menuItem"><a href=""
 target="frmMain">Agenda</a></th>
      <th class="menuItem" colspan="2"><a href=""
 target="frmMain">Detailed List of
participants </a></th>
      <th class="intermenu">&nbsp;<br>
&nbsp;</th>
      <th class="intermenu">&nbsp;<br>
&nbsp;</th>
    </tr>
  </tbody>
</table>
<!-- deb -->
<table>
  <tbody>
    <tr>
<!-- deb --> <td class="bandeauGeneral"
 colspan="2">
      <table cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <th class="bandeau" colspan="2">
            <table border="0" cellpadding="0"
 cellspacing="0">
              <tbody>
                <tr>
                  <td style="vertical-align: top;"><img
 alt="" src="bandeau.jpg" height="211" width="1000"></td>
                </tr>
              </tbody>
            </table>
            </th>
          </tr>
        </tbody>
      </table>
      </td>
</tr>
  </tbody>
</table>

Quelqu'un saurait-il arranger ça ?

Bonjour,
pour commencer, plusieurs choses
- pour avoir un meilleur rendu sur les différents navigateurs autant mettre d'entrée un DOCTYPE Strict, par exemple

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

- entre les balises STYLE il n'est qu'une façon de mettre entre commentaire c'est l'utilisation de /* texte */, les // ne fonctionnent pas est peuvent même tout casser
Code:

1 2 3 4 table { /* margin : 0; ligne en commentaire */ padding : 0; }
- l'utilisation d'une TABLE pour présenter un menu est dépassée, il existe entre autre les balises UL LI, qui avec un peu de CSS le font aussi bien.
- dans ta TABLE il y à 2 lignes, TR, avec chacune des TH, la construction est moyenne donc avec 2 lignes de table header.
- il y a moyen de regrouper les styles et de ne pas avoir à les rappeler dans chaque déclaration, notion d'héritage, exemple de rappel inutile
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .menuItem a { color : #626469; font-size : 14px; font-family : Arial, Verdana, serif; width : 196px; text-decoration : none; } .menuItem a:hover { color: #FFF; /* font-size : 14px; pas utile */ /* font-family : Arial, Verdana, serif; pas utile */ background : url('menuselect.png') no-repeat; }
Concernant ton problème, il te faut explicitement déclarer une largeur assez grande pour recevoir la totalité de ton lien sur une ligne, mettre visiblement width:196px;
le code CSS pourrait être celui ci
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .menuItem { height : 40px; vertical-align : bottom; } .menuItem a { display : block; color : #626469; font-size : 14px; font-family : Arial, Verdana, serif; width : 196px; text-decoration : none; padding-left : 8px; background : url('menu.png') no-repeat; } .menuItem a:hover { color : #FFF; background : url('menuselect.png') no-repeat; }
Pour conclure :
- Il existe des outils de validation de code CSS, par exemple CSS Validation Service
- Oublies sans plus tarder les TABLES pour les menus

exemple de ce que cela peut donner
Code:

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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sharing Our Priorities October 2010</title> <style type="text/css"> #ul_menu * { font-size : 14px; font-weight : bold; font-family : Arial, Verdana, serif; margin : 0; padding : 0; } #ul_menu li, a { display : inline; float : left; list-style : none; line-height : 40px; width : 196px; } #ul_menu a { padding-left : 8px; text-decoration : none; color : #626469; } #ul_menu a:hover { color: #FFF; background : url('menuselect.png') no-repeat; } .new_line { clear:both; } </style> </head> <body> <ul id="ul_menu"> <li><a href="" target="frmMain">Home</a></li> <li><a href="" target="frmMain">Registration</a></li> <li><a href="" target="frmMain">Practical informations</a></li> <li><a href="" target="frmMain">List of participants</a></li> <li><a href="" target="frmMain">Registration suppression</a></li> <li class="new_line"><a href="" target="frmMain">Contact us</a></li> <li><a href="" target="frmMain">Agenda</a></li> <li><a href="" target="frmMain">Detailed Listof participants</a></li> </ul> </body> </html>

01/03/2011, 16h18
laurentSc

Merci beaucoup, car je n'aurais pas trouvé tout seul ; en fait, ce code n'est pas de moi ; je n'ai fait que le récupérer sur un vieux site. Merci de ton aide.