Blublu |
Le 07/01/2007 Ã 19:16 |
|
|
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!!  |
Anthony |
Le 07/01/2007 Ã 19:48 |
|
 Admin |
Salut,
si tu souhaites faire sauter les puces des listes, il faut faire ceci en CSS :
li{
list-style-type:none;
}
a + -- 
|
Blublu |
Le 08/01/2007 Ã 19:08 |
|
|
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!!! |
Anthony |
Le 08/01/2007 Ã 19:56 |
|
 Admin |
Faudrait donner le code CSS et XHTML du menu, histoire qu'on puisse voir :) -- 
|
Blublu |
Le 08/01/2007 Ã 21:08 |
|
|
<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épertoire des é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épertoire des é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!!!!  |
Anthony |
Le 08/01/2007 Ã 21:48 |
|
 Admin |
IE6 ne prend pas en compte le sélecteur ">". -- 
|
Blublu |
Le 09/01/2007 Ã 15:36 |
|
|
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... |
Anthony |
Le 09/01/2007 Ã 17:46 |
|
 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 ? -- 
|
Blublu |
Le 09/01/2007 Ã 17:52 |
|
|
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.....  |