28220 sujets

CSS et mise en forme, CSS3

[Résolu]Ss-menu qui s'ouvre mais innaccessible

Bonjour,

j’ai un problème avec mon menu vertical en cascade créer avec des listes. C’est un menu qui quand on pointe sur un lien ouvre un sous-menu, etc … Ce menu est dans un div. J’ai voulu insérer un petit gif animé devant chaque lien, j’ai donc fait ceci 

<table>
<tr><td><img src='./gif/bouton.gif'></td>
<td rowspan=7> <? include('fnath-menu.html') ?> </td></tr>
<tr><td height=12%><img src='./gif/bouton.gif'></td></tr>
<tr><td height=12%><img src='./gif/bouton.gif'></td></tr>
<tr><td height=12%><img src='./gif/bouton.gif'></td></tr>
<tr><td height=12%><img src='./gif/bouton.gif'></td></tr>
<tr><td height=12%><img src='./gif/bouton.gif'></td></tr>
<tr><td height=12%><img src='./gif/bouton.gif'></td></tr>
</table>

Et la, les soucis sont arrivés. Quand je pointe sur un lien, le sous-menu s’ouvre toujours mais je ne peux pas l’atteindre avec la souris. En effet lorsque le menu était directement dans le div (c'est-à-dire sans la table et les boutons) l’interactivité du lien prenait « toute la case » on pouvait donc en décalant la souris allez dans le sous-menu. Depuis que j’ai ajouté ma table avec mes boutons, l’interactivité du lien s’arête dès que le nom du lien est terminé.

Je n’ai aucune idée pour résoudre ce problème, je ne vois vraiment pas. Si toutefois vous pouvez m’aider … Smiley smile

Elo
Modifié par Elo44 (01 Jun 2005 - 16:08)
Modérateur
Hmmm... ce que je vois c'est un tableau, pas une liste (ul li). Je ne vois pas le code de ton menu. Ce sera difficile de t'aider.
voila une partie de mon menu (j'ai pas tout mis, il est assez long). Mais, il marchait avant que je ne rajoute la table que j'ai expliquer dans le premier post. Je ne comrpend vraiment pas ... Smiley rolleyes Smiley decu 


      <ul id="menuList1">
       <li>
         <a class="actuator" href="#">Qui sommes-nous ?</a>
          <ul class="menu">
            <li><a href="fnath.php?page=historique.html" title="Historique">Historique</a></li>
            <li><a href="fnath.php?page=chiffres.html" title="Quelques chiffres">Quelques chiffres</a></li>
            <li><a href="fnath.php?page=victoires.html" title="Nos principales victoires">Nos principales victoires</a></li>
            <li><a href="fnath.php?page=fnath-loire-atlantique.html" title="La fnath en Loire Atlantique">La fnath en Loire Atlantique</a></li>
            <li><a href="fnath.php?page=conseil-administration.html" title="Le conseil d'administation">Le conseil d'administration</a></li>
            <li><a href="fnath.php?page=statut-groupement.html" title="Les statuts du groupements">Les statuts du groupements</a></li>
            <li><a href="fnath.php?page=statut-section.html" title="Exemple de stauts pour une section">Exemple de stauts pour une section</a></li>
            <li><a href="fnath.php?page=service-conseil-defense.html" title="Le service conseil defense">Le service conseil defense</a></li>
            <li><a class="actuator" href="#">Le journal de l'association</a>
		   <ul class="menu">
            	<li><a href="fnath.php?page=http://www.fnath.org/ape/APE%20241/sommaire..htm" title="Septembre-Octobre">Septembre - Octobre</a></li>
            	<li><a href="fnath.php?page=.html" title="">Juillet - Août</a></li>
            	<li><a href="fnath.php?page=.html" title="">Mai juin</a></li>
               </ul>
		</li>
            <li><a href="fnath.php?page=partenariat.html" title="partenariat">Partenariat</a></li>
          </ul>
        </li>

        <li>
          <a class="actuator" href="#">Nos buts</a>
          <ul class="menu">
            <li><a href="fnath.php?page=solidarite.html" title="La solidarité">La solidarite</a></li>
            <li><a href="fnath.php?page=action_revendicative.html" title="L'action revendicative">L'action revendicative</a></li>
          </ul>
        </li>
        <li>
...

Modifié par Elo44 (31 May 2005 - 16:15)
Pourquoi le coup du tableau? Tu ne peux pas rajouter tes images directement dans tes éléments de liste?

Pas compris... Smiley ohwell
j'ai voulu mettre mes boutons comme des puce avec la commande "list-style-image" mais ca faisait des trucs bizarre les puces ne sont pas présente, elle apparaissent de temps en temps au passage de la souris puis disparaissent. Mais c'est vrai que ça serait mieux comme ça. Je laisse donc le code css, et continue de chercher en attendant qu'on m'éclaire ...


/* menuV.css
 * For: menuDropdown.js (version: 0.1x)
 */

#mainMenu1 {
  background-color: #FFFFFF;	
  color: #000;
  margin: 0;
  padding: 0;
  z-index: 1;
  position: absolute;
 }
#menuList1 {
  border: 1px solid #CCC;
  margin: 0;
  padding: 2px;
}
#menuList1 li {
  display: text-item;;
  margin: 0;
  padding: 0;
  list-style-image :url('./gif/bouton.gif');
}
#menuList1 li a {
  background-color: #FFFFFF;
  color: #000000;	
  display: block;
  border: 1px solid #ff8000;	
  margin: 0;
  padding: 2px 10px;
 }
#menuList1 li a:hover, #menuList1 li a:focus {
  background-color: #f8f8f8;	
  color: #000;		
  border-color: #ccc;	
}
#menuList1 li a.actuator {
  background: url("images/fleche-noire.jpg") no-repeat 100% 50% #f8f8f8;	
color: #B0B0FF;
  padding-right: 20px;
}
#menuList1 li a.actuator:hover, #menuList1 li a.actuator:focus {
  background: url("images/fleche-grise.jpg") no-repeat 100% 50% #f8f8f8;
 color: #F0F000;
}
#menuList1 .menu {
  background-color: #EEE;
  color: #000;
  border: 1px solid #CCC;
  margin: 0;
  padding: 2px;
   z-index: 1;
  position: absolute;
  visibility: hidden;
 }
#menuList1 .menu .menu {
  margin-left: 2px;
 }

Modifié par Elo44 (31 May 2005 - 17:00)
Et avec une simple image?


<li><img src="./gif/bouton.gif" alt="&bull;" /><a href="fnath.php?page=historique.html" title="Historique">Historique</a></li>


Par contre si me permet une remarque, les gif animés dans tous les sens c'est trés génant pour la lecture et c'est aggressif à l'oeil. Tu devrais plutôt essayer de faire sobre et lisible, ça empeche pas une certaine touche de gaiété pour autant.

Surtout pour le type de site que tu réalise, je trouve tes pages déjà beaucoup trop chargées et flashy, il m'a fallu plus d'une minute pour trouver le lien pour entre sur la site en partant de la page d'accueil Smiley ohwell
Bonjour,

C'est vrai que mon site actuel est pas très estétique, c'est pourquoi je suis actuellement en train de tout reprendre notamment pour essayer de me rapporcher des standard et pour l'améliorer. C'était en fait mon premier site que j'avais fait il y a longtemps à base de nombreux tableaux. C'et pourquoi je refais tous ça avec css et des div.

Mais tu as raison, j'ai abandonné les gif, c'est mieux comme ça. Et mon menu marche bien. Je mettrais prochainement (ce we j'espère ...) la nouvelle version, tu pourras peu être me dire si le changement est mieux.

En tout cas merci de tes conseil.
Bonne après midi
Elo
Sujet clos
Aller à