menu pas joli avec FF [Résolu]

laurentSc · 28/02/2011, 23h23

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 :

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
<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 ?

NoSmoking · 01/03/2011, 15h21

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 html :

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

<!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 css :

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

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 css :

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

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 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
.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 :

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
<!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>

laurentSc · 01/03/2011, 16h18

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.

01/03/2011, 16h18	#3
laurentSc Débutant Laurent Webmaster Inscription : octobre 2006 Messages : 2 873 Détails du profil Informations personnelles : Nom : Laurent Âge : 48 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 2 873 Points : 1 320 Points : 1 320	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email