code lent ??

bonsoir,

j’ai refait le menu de mon site en CSS. après de longue période de recherche et de codage voilà que j'ai un peu prêt fait ce que je voulais.

je précise que je suis un débutant en la matière.

j'ai essayé de faire un code respectant les normes officielles. J’ai d’ailleur testé sous FF et IE et pas de problème. si d'ailleurs quelqu'un voit des boulettes de ce coté là qu'il me le signal.

bref mon problème est que sous FF la page met 3 plomb à ce charger or il n'y a rien d'autre qu'un menu.

sous IE ça va mieux. je ne sais pas d'ou cela vient.

code CSS ou code PHP??

je sais que je ne suis pas dans le bon endroit si c'est le code PHP qui déconne, mais cela aurait été le même problème si j'avais posté sur l'autre forum et que ce soit le CSS qui déconne. ;)

est ce que mon code est correct ou y a t'il mieux à faire pour optimiser le chargement ?

autre problème : si on clique vite sur un lien, sans laisser la souris dessus longtemps, la page correspondante n'est pas chargée. mais on voit que la page essais tout de même de se charger. :?: :?:

merci de votre aide.

page pour les tests :
http://j.miot.free.fr/new/File/Menu.php?page=0

voici mon code CSS :

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
body {
	margin: 5;/* sans marges, la page sera collée aux bords */
	font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
	font-size: 12px; /* on définit la taille de police de base dans la page */
}
 
.menu {
	float: left;
	background: yellow;
	width: 100%;
}
 
.menu ul {
	list-style: none; /*supprime les puces devant */
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}	
 
.menu ul .pasdessus {
	margin-top: 12px;
	height: 28px; 			/*hauteur de 28*/
}
 
.menu ul .dessus {
	margin-top: 0px;
	height: 40px;			/*hauteur de 40*/
}
 
.menu ul li {
	float: left;
	margin-left: 5px; /* espacement entre chaque sous-menu */
	margin-right: 5px; /* espacement entre chaque sous-menu */
	margin-bottom: 0px;
	padding:0 0 0 9px;
}
 
.menu ul li a{
	float: left;
	display: block;
	padding: 0 9px 0 0;
	height: 100%;
	text-decoration: none; /* eviter le soulignement */
	font-size: 12px;
	font-weight: bold;
}
 
.menu ul li .bt_st{
	line-height: 6px;
	color: Teal;
}
 
.menu ul li .bt_up{
	line-height: 10px;
	color: Teal;
}
 
.menu ul li .bt_down{
	line-height: 10px;
	color: Purple;
}
 
.menu ul #bt_blanc{background: url('../Images/bt_blanc_g.gif') no-repeat left top;}
.menu ul #bt_creme{background: url('../Images/bt_creme_g.gif') no-repeat left top;}
.menu ul #bt_jaune{background: url('../Images/bt_jaune_g.gif') no-repeat left top;}
.menu ul #bt_vert{background: url('../Images/bt_vert_g.gif') no-repeat left top;}
.menu ul #bt_bleu{background: url(../Images/bt_bleu_g.gif) no-repeat left top;}
.menu ul #bt_violet{background: url('../Images/bt_violet_g.gif') no-repeat left top;}
.menu ul #bt_rouge{background: url('../Images/bt_rouge_g.gif') no-repeat left top;}
 
.menu ul li #bt_blanc{background: url('../Images/bt_blanc.gif') no-repeat right top;}
.menu ul li #bt_creme{background: url('../Images/bt_creme.gif') no-repeat right top;}
.menu ul li #bt_jaune{background: url('../Images/bt_jaune.gif') no-repeat right top;}
.menu ul li #bt_vert{background: url('../Images/bt_vert.gif') no-repeat right top;}
.menu ul li #bt_bleu{background: url(../Images/bt_bleu.gif) no-repeat right top;}
.menu ul li #bt_violet{background: url('../Images/bt_violet.gif') no-repeat right top;}
.menu ul li #bt_rouge{background: url('../Images/bt_rouge.gif') no-repeat right top;}

voici le PHP :

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
<?php
  
/**
 * 
 *
 * @version $Id$
 * @copyright 2006 
 */
  
        // On définit le tableau contenant les liens du menu
        // --------------------------------------------------
        $liens = array("Accueil", "Ma Collection","Espèces", "Symtômes",
                  "Conseils", "Lexique", "Me Contacter");
        // On définit le tableau de couleur de chaque onglets
        // --------------------------------------------------
        $img_bt = array("bt_blanc", "bt_creme", "bt_jaune", "bt_vert",
                                        "bt_bleu", "bt_violet","bt_rouge");
        
        // test si l'id du menu est correcte
        // ---------------------------------
        if (($page>7) or ($page< 0))
        $id_page = 0;
        else
                $id_page = $page;
        
        
        echo '<div class="menu">
                        <ul>';
        
        for ($i=0; $i<7; $i++){
                if ($i == $id_page)
                    echo ("<li class='dessus' id=$img_bt[$i]>
                                        <a class='bt_down' id=$img_bt[$i] href=\"Menu.php?page=$i\">
                                                <br></br>$liens[$i]
                                        </a>
                                </li>");
                else
                        echo ("<li class='pasdessus' id=$img_bt[$i]
                                onMouseOver=\"this.className='dessus'\"
                                onMouseOut=\"this.className='pasdessus'\">
                                        <a class='bt_st' id=$img_bt[$i] href=\"Menu.php?page=$i\"
                                                onMouseDown=\"this.className='bt_down'\"
                                                onMouseOver=\"this.className='bt_up'\"
                                                onMouseOut=\"this.className='bt_st'\">
                                                <br></br>$liens[$i]
                                        </a>
                                </li>");
        }
        
        echo '  </ul>
                  </div>
                <hr color="#008080" width="95%">';
?>