Discussion :

[petitberru]

Bonjour

Actuellement en stage, je dois développer une application web.Pour le moment je suis qu'a la création de simple page html/css (Pour les maquettes écrans)et J'ai comme qui dirait un soucis. J'ai créer 3 bloc div. Sur deux des trois il y a un menu. Un vertical pour le menu de gauche et un horizontal sur un autre div. Les deux menus sont exactement identique au niveau du css, hormis le nom bien sur et la propriété float pour le menu horizontal ( valeur left ^^) mais voilà sous IE6 et firefox , il y a un soucis. le menu vertical marche trés bien , par contre le horizontal ne marche pas entièrement en effet il prend en compte que quelque paramètres.

Voici le CSS

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
/* creation des onglets du bloc contenu*/
.navOnglet
{
   width: 99%;
   list-style-type: none;
   margin: 0;
   padding: 0;
   border:0;
}
 
.navOnglet li
{
   float:left;
   width:33%;
   border:1px solid #3B4E77;
   padding:0;
}
 
.navOnglet li a:link
{
   display: block;
   height: auto;
   color: #FFF;
   background: #3B4E77;
   margin: 0;
   padding: 4px 8px;
   border-right: 0px solid #fff;
   text-decoration: none
}
 
.navOnglet li a:hover { background-color: #F2462E; }
.navOnglet li a:active { background-color: #5F879D; }
 
/*creation du menu de gauche*/
 
#menuGauche
{
   width: 140px;
   list-style-type: none;
   margin: 0;
   padding: 0;
   border: 0;
}
 
#menuGauche li
{
   margin: 0;
   width:140px;
   padding: 0;
   border: 0;
}
 
#menuGauche li a:link, #menuGauche li a:visited
{
   display: block;
   height: auto;
   color: #FFF;
   background: #3B4E77;
   margin: 0;
   padding: 4px 8px;
   text-decoration: none;
}
#menuGauche li a:hover { background-color: #F2462E; }
#menuGauche li a:active { background-color: #5F879D; }

et voici le html

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
<!-- Menu de navigation situé a gauche/ 3 option possible Acceuil/Saisie/recherche-->
 
<div id="menu">
     <table width="99%" border="0" >
        <tr>
          <td width="99%" height="148" >
             <ul id="menuGauche">
                <li class="active"><a href="#">Acceuil</a></li>
                <li><a href="#">Saisie</a></li>
                <li><a href="#">Recherche</a></li>
             </ul>
          </td>
        </tr>
     </table> 
</div>
 
<!------------------------------------------------------------------------------------>
<div id="contenu">
     <table width="99%">
          <tr>
             <td width="99%" height="15%" >
                 <ul class="navOnglet">
                    <li class="active"><a href="#">INTERCOM</a></li>
                    <li><a href="#">INFOCOM</a></li>
                    <li><a href="#">TSVR</a></li>
                 </ul>
             </td>
         </tr>
     </table>
     <table width="100%" border="0" height="99%">
         <tr>
             <td width="99%" height="99%">
              test
             </td>
         </tr> 
     </table>
</div>

Je vous remerci de l'aide que vous pourrez m'apporter.


Cordialement


Nouvelle question : Bon je n ai toujours pas résolu mon soucis decris ci dessus. J ai rajouté des sous-menus à mon menu de gauche. Ca fonctionne trés bien sous firefox mais pas sous IE6. Un autre problème vient s ajouter à ca, c est que je suis en stage dans une branche du ministère des finances et je n'ai acces qu'a certain site donc j ai beau faire des recherches sur google la plupart, je n ai pas acces au réponse. Et je n ai pas trouvé ma réponse pour ma premiére question sur déveveloppez.com(et .net ).Donc si vous avez une solution à mon problème qui est en dehors développez.com pourriez vous me noter la solution sur vôtre réponse. Je vous en serez trés reconnaissant.Je souhaiterai vraiment réglé se problème avant la fin de la journée.
Merci

[petitberru]

Solution pour la premiére question :

la supression du :link au niveau du menu horizontal régle le problème.

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
.navOnglet li a:link
{
   display: block;
   height: auto;
   color: #FFF;
   background: #3B4E77;
   margin: 0;
   padding: 4px 8px;
   border-right: 0px solid #fff;
   text-decoration: none
}

me reste plus qu a résoudre le problème du menu déroulant qui ne focntionne pas correctement sous ie6.

Merci à SpaceFrog pour la solution.

[petitberru]

concernant mes sous menu voici le code

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
#menuGauche .sousMenu
{
 display:none;
 list-style-type: none;
 margin: 1;
 padding: 1;
 border: 0;
}
#menuGauche .sousMenu li
{
 float:none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
#menuGauche li:hover > .sousMenu { display: block; }
#menuGauche .sousMenu li a:hover
{
 background-image: none;
 background-color: #3B4E77;
}
#menuGauche .sousMenu li a:link,
#menuGauche .sousMenu li a:visited
{
 display:block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background-color:#3B4E77;
}

donc ca marche sous ff et pas sous ie6.

[Bisûnûrs]

L'instruction :

Code :

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

#menuGauche li:hover > .sousMenu { display: block; }

n'est pas reconnue par IE6.

[petitberru]

Mais si j enlève ca , est ce qu il y a une autre solution pour faire apparaitre mon sous menu.

[MasterOfChakhaL]

Salut,

Classiquement, pour pallier à ce manquement d'IE6, on utilise les événements onmouseover et onmouseout pour simuler le comportement en javascript

[petitberru]

Bon , bah merci pour vos réponses je vais voir ça. je met le poste en résolu