Forum Programmation.web problème de click de souris /css pur/span et a

Posté par  .
Étiquettes : aucune
0
21
août
2004
Salut,
Je veux faire un menu à 2 niveaux en ligne, en visu, quand on 'hover' sur "Choix2", ça donne ça:

Choix1 Choix2 Choix3 Choix4
Choix2.1 Choix2.2 Choix2.2 Choix2.2

Ma stucture a deux pseudo-classes: menu et ssmenu.

Le souci, quand je clique sur les choix du sous-menu (un lien hypertexte en fait), je n'ai pas accès à la page alors qu'elle est détectée en bas à gauche de mon navigateur. Sinon tout marche.

2 précisions:
1. Je tourne sur un mozilla:Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.0.0) Gecko/20020623 Debian/1.0.0-0.woody.1

2. Bizarrement je dois spécifier la classe "ssmenu" aux liens hypertexte du sous menu sinon ceux-ci héritent des propriétés de ceux du menu. J'ai cru comprendre que l'imbrication d'un <a ...> dans un donnait de facto l'héritage correct si l'on déclare ssmenu.span a {...}. Qu'en est-il? Merci de voir ce problème car je ne l'ai trouvé nulle part sur le web.


Ci-joint le code css:

/*MENU*/
ul.menu {
float: left;
position: relative;
top: 0em;
left: 2em;
margin: 0em;
padding: 0em;
}
ul.menu li{
float: left;
display: inline;
list-style-type: none;
margin: 0em;
padding:0em 1.5em 0.8em 1.5em;
}
ul.menu li a {
text-decoration: none;
font-size: 1.5em;
color: #000000;
}
ul.menu li a:hover {
color: #ff0000;
}

/*SOUS-MENU*/
span.ssmenu {
display: none;
}
ul.menu li:hover span.ssmenu {
float: left;
position: absolute;
top: 2em;
left: 0em;
display: inline;
list-style-type: none;
margin: 0em;
padding:0em 1.5em 1em 1em;
border-top: 1px solid black;
width: 70em;
}
span.ssmenu a.ssmenu {
padding:1em 1em 1em 1em;
text-decoration: none;
font-size: 1em;
color: #000000;
}
span.ssmenu a.ssmenu:hover {
color: #ff0000;
}

et le code html:
NB: les parenthèses remplacent le <> pour que vous puissiez voir le code.

(div class="container")
(ul class="menu")
(li)(a href="#")Choix1(/a)
(/li)
(li)(a href="#")Choix2(/a)
(span class="ssmenu")
(a class="ssmenu" href="#")Choix2.1(/a)
(a class="ssmenu" href="#")Choix2.2(/a)
(a class="ssmenu" href="#")Choix2.3(/a)
(a class="ssmenu" href="#")Choix2.4(/a)
(/span)
(/li)
(li)(a href="#")Choix3(/a)
(span class="ssmenu")
(a class="ssmenu" href="#")Choix3.1(/a)
(a class="ssmenu" href="#")Choix3.2(/a)
(a class="ssmenu" href="#")Choix3.3(/a)
(a class="ssmenu" href="#")Choix3.4(/a)
(a class="ssmenu" href="#")Choix3.5(/a)
(/span)
(/li)
(/ul)
(/div)
  • # autre précision

    Posté par  . Évalué à 1.

    Petit rectificatif, quand je clique "malignement" dans un coin du lien, j'obtiens la page... mais pour le lien de la couche d'en dessous. J'ai essayé avec des z-index mais comme prévu ça ne marche pas puisque je ne peux pas indexer mes tag (li).
  • # Autre précision

    Posté par  . Évalué à 1.

    En fait lorsque j'agrandis les lien du sous-menu énormément, j'arrive à avoir la page en cliquant sur la partie haute du lien. Mon problème se résumerait alors à la question suivante: comment rendre active toute la zone du lien hypertexte quelle que soit sa taille?
    Merci d'avance.
  • # drop down

    Posté par  (site web personnel) . Évalué à 0.

    Ce type de menu s' appelle "drop down". ca t'aidera surement à faire des recherches plus aprofondies.

    J ai trouve ca pour un menu vertical:
    http://www.alistapart.com/articles/horizdropdowns/(...)
  • # Vieille version

    Posté par  (site web personnel) . Évalué à 1.

    Bon, chez moi, ça marche :-)

    Tente avec une version plus récente de mozilla, car là, franchement, il date un peu le tien ;-)

    J'avais à un moment un problème étrange aussi, avec un effet moins compliqué pourtant : c'était un effet avec la pseudo-classe :hover sur des liens, qui affichait, avec l'autre pseudo-classe :after, une petite image après le lien, et quand on cliquait, ça ne marchait pas. Mais en utilisant la nouvelle version de moz, miracle, ça marche :-)
    • [^] # Re: Vieille version

      Posté par  . Évalué à 1.

      J'ai installé la Mozilla 1.7 et mon hyper-lien est actif sur toute la zone, y compris si je la déborde avec des paddings assez conséquents et que je clique à côté du texte. J'ai testé avec ma version de galeon 1.2.5. et ça ne marche pas. Pour résumer, mon menu risque de ne pas être très portable.
      Mrci en tout cas.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.