Page précédente | Page suivante | Page : 1

Menu déroulant dynamique
Hors ligne Blublu 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 ligne Anthony Le 07/01/2007 à 19:48 Profil de Anthony Configuration de Anthony
Fou du volant
Salut,

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

li{
  list-style-type:none;
}


a +
--
Hors ligne Blublu 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 ligne Anthony Le 08/01/2007 à 19:56 Profil de Anthony Configuration de Anthony
Fou du volant
Faudrait donner le code CSS et XHTML du menu, histoire qu'on puisse voir :)
--
Hors ligne Blublu 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 ligne Anthony Le 08/01/2007 à 21:48 Profil de Anthony Configuration de Anthony
Fou du volant
IE6 ne prend pas en compte le sélecteur ">".
--
Hors ligne Blublu 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 ligne Anthony Le 09/01/2007 à 17:46 Profil de Anthony Configuration de Anthony
Fou du volant
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 ligne Blublu 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.....

Page précédente | Page suivante | Page : 1

Aide informatique | Communauté d'entraide informatique | Aide informatique | Forum d'assistance informatique | Forum-Vista | Formation informatique | Forum Informatique | Devenir partenaire