Compatibilité IE/Firefox
azqsazqs
Messages postés
83
Date d'inscription
jeudi 27 juillet 2006
Statut
Membre
Dernière intervention
28 novembre 2010
-
25 mars 2008 à 00:03
azqsazqs Messages postés 83 Date d'inscription jeudi 27 juillet 2006 Statut Membre Dernière intervention 28 novembre 2010 - 31 mars 2008 à 12:54
azqsazqs Messages postés 83 Date d'inscription jeudi 27 juillet 2006 Statut Membre Dernière intervention 28 novembre 2010 - 31 mars 2008 à 12:54
9 réponses
neigedhiver
Messages postés
2480
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
19
25 mars 2008 à 20:08
25 mars 2008 à 20:08
Salut,
Tout d'abord, un commentaire dans un Javascript s'écrit soit :
// comme ça
soit
/* comme ça */
mais
<!-- pas comme ça -->
Il me semble qu'une fonction, pour être appelée, doit l'être avec les parenthèses :
window.onload=montre();
<hr size="2" width="100%" />Neige
Tout d'abord, un commentaire dans un Javascript s'écrit soit :
// comme ça
soit
/* comme ça */
mais
<!-- pas comme ça -->
Il me semble qu'une fonction, pour être appelée, doit l'être avec les parenthèses :
window.onload=montre();
<hr size="2" width="100%" />Neige
azqsazqs
Messages postés
83
Date d'inscription
jeudi 27 juillet 2006
Statut
Membre
Dernière intervention
28 novembre 2010
25 mars 2008 à 20:12
25 mars 2008 à 20:12
j'ai beau appliqué les différentes solutions que tu m'as donné, rien ne change.
je pense que l'erreur vient de la structure du menu, mais je vois vraiement pas ou.
je pense que l'erreur vient de la structure du menu, mais je vois vraiement pas ou.
neigedhiver
Messages postés
2480
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
19
26 mars 2008 à 01:25
26 mars 2008 à 01:25
C'était pas forcément des solutions, mais au moins des erreurs que j'ai relevées. Comme le fait que tu as plusieurs éléments qui ont le même id :
<li>[terminus test]</li>
<li>[terminus test]</li>
Je me doute que c'est juste pour remplir pour les tests, mais bon...
Parce que ton code HTML est également incorrect :
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
Que fait ce ici alors que la balise n'a pas été ouverte ?
Je sais pas si ça peut t'aider : http://www.quirksmode.org/dom/w3c_core.html
Je cite :
var x = document.getElementById('test')
Take the element with
If there is more than one element with
others are ignored.
<li class="">IE7- also returns the element with
<hr size="2" width="100%" />Neige
<li>[terminus test]</li>
<li>[terminus test]</li>
Je me doute que c'est juste pour remplir pour les tests, mais bon...
Parce que ton code HTML est également incorrect :
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
Que fait ce ici alors que la balise n'a pas été ouverte ?
Je sais pas si ça peut t'aider : http://www.quirksmode.org/dom/w3c_core.html
Je cite :
var x = document.getElementById('test')
Take the element with
id="test"(wherever it is in the document) and put it in
x.
If there is more than one element with
id="test", the method selects the first in the document. All
others are ignored.
<li class="">IE7- also returns the element with
name="test".</li>Sinon, des scripts qui affichent/cachent des éléments d'un menu, il y en a des millions sur le net... Ca doit pas être bien difficile d'en trouver un assez simple à adapter pour faire juste ce que tu veux...
<hr size="2" width="100%" />Neige
azqsazqs
Messages postés
83
Date d'inscription
jeudi 27 juillet 2006
Statut
Membre
Dernière intervention
28 novembre 2010
26 mars 2008 à 03:09
26 mars 2008 à 03:09
en fait, c'est la première fois que ce probleme ce pose (j'utilise ce script sur plusieurs sites), car ce script est généré par un script PHP, mais au final, c'est le code source HTML qui bug.
Pour le , j'y ai remédién, mais cela n'influe pas sur le code. J'ai plutot l'impression, qu'il s'agit d'une balise non fermé qui pose probleme, mais je n'ai pas trouvé laquelle.
Quand au id="lien" qui se répetent, c'est simplement parce que les ont la même mise en forme.
Du coté des différents script de menu "déroulant", j'aime bien celui-ci car il est facile à mettre en forme.
Mais si vous en avez d'autres à proposé, je suis preneur...
Pour le , j'y ai remédién, mais cela n'influe pas sur le code. J'ai plutot l'impression, qu'il s'agit d'une balise non fermé qui pose probleme, mais je n'ai pas trouvé laquelle.
Quand au id="lien" qui se répetent, c'est simplement parce que les ont la même mise en forme.
Du coté des différents script de menu "déroulant", j'aime bien celui-ci car il est facile à mettre en forme.
Mais si vous en avez d'autres à proposé, je suis preneur...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
neigedhiver
Messages postés
2480
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
19
26 mars 2008 à 08:30
26 mars 2008 à 08:30
Salut,
Tu fais quelques erreurs dans ton code html...
Quand au id="lien" qui se répetent, c'est simplement parce que les ont la même mise en forme
J'ai peur de comprendre ce que tu veux dire par là... Est-ce que tu veux dire que tu mets le même id pour appliquer le même style CSS ? Si c'est le cas, c'est une monumentale erreur, j'espère que tu le réalises... Un id doit être unique, sinon, c'est le bazar. Pour appliquer un même style, il faut utiliser des classes CSS qui servent justement à ça, pas des id qui servent à identifier des éléments uniques...
Par ailleurs, les balises <dd> et <dt> ne servent pas à faire ce que tu fais... Elles servent à ce pour quoi elles ont été conçues :
dd : description de définition
dt : terme de définition
dl : liste de définitions
Si ça n'est pas important sur l'apparence que tu peux contrôler, c'est absolument capital d'un point de vue sémentique. Le HTML et encore plus le xHTML, sont une sous-famille de XML. xHTML sert donc à structurer des données, tandis que CSS est utilisé pour les mettre en forme. La structure a toute son importance, dans la mesure où un menu ne doit pas être défini avec des balises servant à stocker des définitions, mais plutôt avec des balises servant à faire une liste... couplé avec <li> sont beaucoup plus adaptées.
sert normalement à définir une partie de texte sur laquelle un style particulier sera appliqué, et pas trop à coller un simple js, qui peut se mettre sur une balise avec l'attribut d'événement adéquat.
Par ailleurs, ton CSS ne colle pas avec ton code html... Par exemple, tu utilises li_lien comme identifiant (id) dans ton code html, mais dans ton css, tu y fais référence comme une balise standard (ce qui n'est pas le cas) : tu omets de mettre un # devant le nom li_lien. Soit dit en passant, li_lien devrait être une classe, dont le style est définie en y faisant référence avec un . : .li_lien
Je me rends compte, en y regardant de plus près, que ton code HTML n'est pas vraiment très bien écrit... Essaie de le rendre plus propre, non seulement tu y verras plus clair, mais en plus ta page voudra dire quelque chose.
Si j'ai un peu de temps dans la matinée, je te propose un code un peu plus adapté avec le CSS correspondant (d'après le tien) et peut-être le JS qui fait ce qu'il faut...
<hr size="2" width="100%" />Neige
Tu fais quelques erreurs dans ton code html...
Quand au id="lien" qui se répetent, c'est simplement parce que les ont la même mise en forme
J'ai peur de comprendre ce que tu veux dire par là... Est-ce que tu veux dire que tu mets le même id pour appliquer le même style CSS ? Si c'est le cas, c'est une monumentale erreur, j'espère que tu le réalises... Un id doit être unique, sinon, c'est le bazar. Pour appliquer un même style, il faut utiliser des classes CSS qui servent justement à ça, pas des id qui servent à identifier des éléments uniques...
Par ailleurs, les balises <dd> et <dt> ne servent pas à faire ce que tu fais... Elles servent à ce pour quoi elles ont été conçues :
dd : description de définition
dt : terme de définition
dl : liste de définitions
Si ça n'est pas important sur l'apparence que tu peux contrôler, c'est absolument capital d'un point de vue sémentique. Le HTML et encore plus le xHTML, sont une sous-famille de XML. xHTML sert donc à structurer des données, tandis que CSS est utilisé pour les mettre en forme. La structure a toute son importance, dans la mesure où un menu ne doit pas être défini avec des balises servant à stocker des définitions, mais plutôt avec des balises servant à faire une liste... couplé avec <li> sont beaucoup plus adaptées.
sert normalement à définir une partie de texte sur laquelle un style particulier sera appliqué, et pas trop à coller un simple js, qui peut se mettre sur une balise avec l'attribut d'événement adéquat.
Par ailleurs, ton CSS ne colle pas avec ton code html... Par exemple, tu utilises li_lien comme identifiant (id) dans ton code html, mais dans ton css, tu y fais référence comme une balise standard (ce qui n'est pas le cas) : tu omets de mettre un # devant le nom li_lien. Soit dit en passant, li_lien devrait être une classe, dont le style est définie en y faisant référence avec un . : .li_lien
Je me rends compte, en y regardant de plus près, que ton code HTML n'est pas vraiment très bien écrit... Essaie de le rendre plus propre, non seulement tu y verras plus clair, mais en plus ta page voudra dire quelque chose.
Si j'ai un peu de temps dans la matinée, je te propose un code un peu plus adapté avec le CSS correspondant (d'après le tien) et peut-être le JS qui fait ce qu'il faut...
<hr size="2" width="100%" />Neige
neigedhiver
Messages postés
2480
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
19
26 mars 2008 à 09:38
26 mars 2008 à 09:38
Re,
J'ai pas IE pour tester... Est-ce que tu peux tester ça me dire si ça marche sous IE ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function toggle(id) {
if (document.getElementById) {
var x = document.getElementById(id); x.style.display (x.style.display 'block') ? 'none' : 'block';
}
}
function cache_tout() {
var i=0;
while (++i) {
var x = document.getElementById('smenu'+i);
if (x) {
x.style.display='none';
}
else {
break;
}
}
}
-->
</script>
<link rel="stylesheet" href="style.css" />
<title>Test de menu</title>
</head>
<li>
Tete 1
<li>[terminus test]</li>
<li>[terminus test]</li>
</li>
<li>
Tete 2
<li>[terminus test]</li>
<li>[terminus test]</li>
</li>
<script type="text/javascript">cache_tout();</script>
</html>
<hr size="2" width="100%" />Neige
J'ai pas IE pour tester... Est-ce que tu peux tester ça me dire si ça marche sous IE ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function toggle(id) {
if (document.getElementById) {
var x = document.getElementById(id); x.style.display (x.style.display 'block') ? 'none' : 'block';
}
}
function cache_tout() {
var i=0;
while (++i) {
var x = document.getElementById('smenu'+i);
if (x) {
x.style.display='none';
}
else {
break;
}
}
}
-->
</script>
<link rel="stylesheet" href="style.css" />
<title>Test de menu</title>
</head>
<li>
Tete 1
<li>[terminus test]</li>
<li>[terminus test]</li>
</li>
<li>
Tete 2
<li>[terminus test]</li>
<li>[terminus test]</li>
</li>
<script type="text/javascript">cache_tout();</script>
</html>
<hr size="2" width="100%" />Neige
azqsazqs
Messages postés
83
Date d'inscription
jeudi 27 juillet 2006
Statut
Membre
Dernière intervention
28 novembre 2010
26 mars 2008 à 14:13
26 mars 2008 à 14:13
le script marche très bien sous IE et Firefox, merci.
Afin de le faire correspondre parfaitement à mes attentes, j'ai du modifier:
onclick="toggle('smenu1');"
en
onmouseover="toggle('smenu1');"
Et ca marche super bien, merci encore.
Afin de le faire correspondre parfaitement à mes attentes, j'ai du modifier:
onclick="toggle('smenu1');"
en
onmouseover="toggle('smenu1');"
Et ca marche super bien, merci encore.
azqsazqs
Messages postés
83
Date d'inscription
jeudi 27 juillet 2006
Statut
Membre
Dernière intervention
28 novembre 2010
30 mars 2008 à 16:49
30 mars 2008 à 16:49
heu, je relance ce topic suite un un probleme que j'ai remarqué.
Avec le code donné par [auteur/NEIGEDHIVER/924195.aspx neigedhiver], on ne peut pas séléctionner les lien "test" car le volet disparais quand on passe dessus.
j'ai tenté quelques truc, mais rien n'vraiment marché.
Avec le code donné par [auteur/NEIGEDHIVER/924195.aspx neigedhiver], on ne peut pas séléctionner les lien "test" car le volet disparais quand on passe dessus.
j'ai tenté quelques truc, mais rien n'vraiment marché.
azqsazqs
Messages postés
83
Date d'inscription
jeudi 27 juillet 2006
Statut
Membre
Dernière intervention
28 novembre 2010
31 mars 2008 à 12:54
31 mars 2008 à 12:54
je vous affiche le code source obtenu par la génération php:
="menu">
<h3>Menu 1</h3>
<a href="test.php"><span onmouseover="toggle('smenu2');" onmouseout="cache_tout();">Menu 1.1</span></a>
<div id="smenu2" onmouseover="toggle('smenu2');"><ul>
<li>Menu 1.1.1</li>
<li>Menu 1.1.2</li>
<a href="test.php"></ul></div>
<span onmouseover="toggle('smenu3');" onmouseout="cache_tout();">Menu 1.2</span></a>
<h3>Menu 2</h3>
<a href="test.php"><span onmouseover="toggle('smenu4');" onmouseout="cache_tout();">Menu 2.1</span></a>
<a href="ringo.php"><span onmouseover="toggle('smenu5');" onmouseout="cache_tout();">Menu 2.2</span></a>
</div>
Au niveau du design tout va bien (presque). Juste que le
<div id="smenu2" onmouseover="toggle('smenu2');">...
ne reste pas afficher quand on veut séléctionner les liens qui contient.
Pour le css, ya unh probleme de puces invisible.
="menu">
<h3>Menu 1</h3>
<a href="test.php"><span onmouseover="toggle('smenu2');" onmouseout="cache_tout();">Menu 1.1</span></a>
<div id="smenu2" onmouseover="toggle('smenu2');"><ul>
<li>Menu 1.1.1</li>
<li>Menu 1.1.2</li>
<a href="test.php"></ul></div>
<span onmouseover="toggle('smenu3');" onmouseout="cache_tout();">Menu 1.2</span></a>
<h3>Menu 2</h3>
<a href="test.php"><span onmouseover="toggle('smenu4');" onmouseout="cache_tout();">Menu 2.1</span></a>
<a href="ringo.php"><span onmouseover="toggle('smenu5');" onmouseout="cache_tout();">Menu 2.2</span></a>
</div>
Au niveau du design tout va bien (presque). Juste que le
<div id="smenu2" onmouseover="toggle('smenu2');">...
ne reste pas afficher quand on veut séléctionner les liens qui contient.
Pour le css, ya unh probleme de puces invisible.