Menu déroulant dynamique
Hors ligneBlublu Le 07/01/2007 à 19:16 Profil de Blublu Configuration de Blublu

Bonsoir à toutes et à tous!

J'ai un soucis comme le titre l'indique avec un menu déroulant dynamique[/couleur] qui me donne des cheveux blancs...
Donc voici mon problème: il fonctionne mais affiche ceci >> devant chaque lien... Je ne sais pas si je suis claire... Car je ne connais pas bien les termes techniques.... En fait ceci vient des balises <li> et </li>... mais je ne vois pas comment faire autrement un menu déroulant sans elles....   je pense que c'est dans le code css qu'il faut éventuellement changer quelque chose... mais je suis perdue...

Voilà, j'espère qu'il y aura une bonne âme pour m'aider.
Merci d'avance!!
Hors ligneAnthony Le 07/01/2007 à 19:48 Profil de Anthony Configuration de Anthony

Admin
Salut,

si tu souhaites faire sauter les puces des listes, il faut faire ceci en CSS :

li{
  list-style-type:none;
}


a +
--

Hors ligneBlublu Le 08/01/2007 à 19:08 Profil de Blublu Configuration de Blublu

Merci pour ta réponse!!!

Mais en fait j'ai trouvé la solution!!! C'était dans la feuille de style qu'était le problème!!!!  Donc plus de soucis de ce côté, mais maintenant j'ai remarqué que mon menu déroulant ne fonctionnait pas avec internet explorer.... Et aussi avec certaines version de Mozilla.... quelqu'un aurait une idée?

Merci!!!
Hors ligneAnthony Le 08/01/2007 à 19:56 Profil de Anthony Configuration de Anthony

Admin
Faudrait donner le code CSS et XHTML du menu, histoire qu'on puisse voir :)
--

Hors ligneBlublu Le 08/01/2007 à 21:08 Profil de Blublu Configuration de Blublu

<style type="text/css">

ul, li
{list-style-type: none; margin:0; padding:0;}

.l1 li
{float: left;}

.l1 a
{width: 140px; margin: 0 5px 0 0; color: #000; ; border: none; padding: 2px 0; display: block; text-align: center; text-decoration: none;}

.l1 a:hover
{font-weight: bold;}

.l2
{width: 140px; margin: -1px 0 0 0; border: 1px solid none; background: #fff; display: none; position: absolute;}

.l2 li
{float: none;}

.l2 a
{border: none; margin: 0 0 0 0px; background: #fff;}

body > ul.l1 ul.l2 a
{margin:0;}

.l2 a:hover
{background: #ffcc99; font-weight: normal;}

ul.l1 li:hover ul.l2
{display: block;}

#corps
{border: 1px dashed #f00; clear: both; height: 500px;}

-->



<!--[if lt IE 7]>

<script type="text/javascript">

window.onload=montre;

function montre(id)
{

  for(var i = 1; i<=20; i++)
{

    if (document.getElementById('sm'+i))
{document.getElementById('sm'+i).style.display='none';
}

  }

  document.getElementById('sm'+id).style.display='block';

}

</script>

<! endif .style3
{     font-family: Geneva, Arial, Helvetica, sans-serif;
     color: #B02114;
     font-weight: bold;
}
.style2
{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-weight: bold;
}
-->


</style>





<tr>
<td valign="top" width="127" height="118">
<img src="images/1_p10.jpg" style="margin-left:11px" alt="" border="0"><br>   <td valign="top" width="177" height="118" class="block1">
                                                                                                 <ul class="l1">
<li><a href="elchiens/repertoir_annuaire.html"  onmouseover="montre(1)">Annuaire-r&eacute;pertoire des &eacute;leveurs de chiens </a>
<ul class="l2" id="sm1">

<li><a href="elchiens/belgique/repannuairebelg.html">Belgique</a></li>
<li><a href="elchiens/canada/repannuairecanada.html">Canada</a></li>
<li><a href="elchiens/france/repannuairefrance.html">France</a></li>
<li><a href="elchiens/suisse/repannuairesuisse.html">Suisse</a></li>
</ul>
</li>
</ul></td></tr>

<tr>
<td valign="top" width="127" height="117">
<img src="images/1_p10.jpg" style="margin-left:11px" alt="" border="0"><br></td>
<td valign="top" width="177" height="117" class="block1"><ul class="l1">  <li><a href="#" onMouseOver="montre(2)">Annuaire-r&eacute;pertoire des &eacute;leveurs de chats </a></b>   <ul class="l2" id="sm2">                                                                               <li><a href="#">Belgique</a></li>
<li><a href="#">Canada</a></li>
<li><a href="#">France</a></li>
<li><a href="#">Suisse</a></li>
</ul></ul></td>
</tr>





Je précise que j'ai copié ce code, je n'en suis pas la créatrice.
Et peut-être que le problème vient du fait que j'ai "séparé" le menu dans un tableau? Car en effet c'est ce qui se prêtait  le mieux par rapport à la page du site. Et je suis une débutante en ce qui concerne les codes, donc soyez indulgents...
En tout cas un grand merci!!!!
Hors ligneAnthony Le 08/01/2007 à 21:48 Profil de Anthony Configuration de Anthony

Admin
IE6 ne prend pas en compte le sélecteur ">".
--

Hors ligneBlublu Le 09/01/2007 à 15:36 Profil de Blublu Configuration de Blublu

Merci!
Mais comment ça le selecteur ">"? Et comment y remédier?

Donc là j'édite mon message, j'ai cherché une alternative et voilà ce que j'ai trouvé:

#top   { [ne touchez pas ce qui existe dejà]; height:200px; }

.menuIE
{
    display:none !important;
    display:block;
}

a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active
{
    color:#000;
    width:150px;
    height:18px;
    display:block;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:10px;
    line-height:18px;
    overflow:hidden;
}

a.boutonIE:hover
{
    color:#fff;
    background:#000;
    overflow:visible;
}

a.boutonIE:hover table
{
    display:block;
    background:#eee;
    border-collapse:collapse;
}

.boutonFF
{
    color:#000;
    width:150px;
    height:18px;
    display:block !important;
    display:none;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:10px;
    line-height:18px;
    overflow:hidden;
}

.boutonFF:hover
{
    height:auto;
    cursor:pointer;
    color:#fff;
    background:#000;
}


a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active
{
    display:block;
    width:150px !important;
    width:150px;
    height:18px;
    border-bottom:1px solid #000;
    text-decoration:none;
    color:#000;
    font-family: verdana;
    font-size:10px;
    text-align:center;
    background:#eee;  
}


a.SousMenu:hover
{background:#BCCCD2;}


<tr>
<td valign="top" width="127" height="118">
<img src="images/1_p10.jpg" style="margin-left:11px" alt="" border="0">   <td valign="top" width="177" height="118" class="block1">
<div class="menuIE">
<a class="boutonIE" href="#">Eleveurs de chiens
<table><tr><td>
<a class="SousMenu" href="#">
Belgique</a>
<a class="SousMenu" href="#">
Canada</a>
<a class="SousMenu" href="#">
France</a>
<a class="SousMenu" href="#">
Suisse</a>
</td>
</tr></table>
</a>

</div>


<div class="boutonFF">Eleveurs de chiens
<a class="SousMenu" href="#nogo">Belgique</a>
<a class="SousMenu" href="#nogo">
Canada</a>
<a class="SousMenu" href="#nogo">
France</a>
<a class="SousMenu" href="#nogo">
Suisse</a>
</div>

</td></tr>

Donc, tout fonctionne bien sous IE... mais plus sous Firefox!!!!!!! Lors que mets ces codes dans une page vièrge, elle fonctionne aussi sous FF, mais si je l'insère dans l'index du site, ça ne fonctionne plus.... J'sais plus quoi faire...
Hors ligneAnthony Le 09/01/2007 à 17:46 Profil de Anthony Configuration de Anthony

Admin
Personnellement je n'ai plus IE6, il est impossible de "faire comprendre" à IE quelque chose qu'il ne comprend pas (enfin c'est pas totalement vrai, y'a des hacks, mais pas pour ">" tout du moins pas à ma connaissance).

Ensuite je n'ai pas IE6, donc je ne peux pas simuler ton problème. Quel est le problème avec ce menu ? Quand tu dis qu'il affiche ">>" devant chaque lien, tu peux faire une capture d'écran stp ?
--

Hors ligneBlublu Le 09/01/2007 à 17:52 Profil de Blublu Configuration de Blublu

En fait les >> ne s'affichent plus, j'ai trouver d'où venait ce problème. Maintenant j'ai un problème de compabilité de navigateurs... il existait déjà avant mais utilisant seulement Firefox je ne m'en étais pas apercue.....
Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels