[DELESTAGE] menu css ie et firefox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [DELESTAGE] menu css ie et firefox

bioinfo_djib

j'ai fait un code, j'aimerai que vous m'aidiez qui je cale depuis hier.
Mon menu fonctionne sous firefox, mais pas sous IE, je sais pas quoi faire, quoi modifier ou ajouter dans mon CSS.
voici le lien de la page menu
et voici le code,
Merci

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Test de menu
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
/*background: #6A6458;*/
width: 800px;
height: 21px;
list-style-type: none;
margin: 0px;
padding-left: 10px;
border: 0;
font-size : 12px;
}
#menuDeroulant li
{
float: left;
width: 111px;
margin: 0px;
padding: 0px;
border: 0;
text-align : center;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: auto;
color: #FFF;
background: #669933;
margin: 0px;
padding: 4px 8px;
border-right: 0px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #CCCC66; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu
{
position:absolute;
display: none;
list-style-type: none;
border: 0;
margin: 0px;
padding: 0px;
/*position:absolute;*/
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0px;
padding: 0px;
border: 0;
width: 109px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0px;
border: 0;
text-decoration: none;
/*background: transparent url("fondTR.png" ) repeat;*/
}
#menuDeroulant .sousMenu li a:hover
{
/*background-image: none; #F2462E*/
background-color: #33CC66;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
#content {
clear: left;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function hover(obj){
if(document.all){
UL = obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu = UL[0].style;
if(sousMenu .display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
} else {
sousMenu.display = 'none';
}
}
}
}
function setHover_dev(){
LI = document.getElementById('menuDeroulant').getElementsByTagName('li');
nLI = LI.length;
for(i=0; i < nLI; i++){
LI[i].onmouseover = function(){ hover(this); }
LI[i].onmouseout = function(){ hover(this); }
}
}
</SCRIPT>
</head>
<body onload="setHover_dev();">
<ul id="menuDeroulant">
<li>
<a href="#">Le club</a>
<ul class="sousMenu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Présentation</a></li>
<li><a href="#">Dirigeant</a></li>
<li><a href="#">Staff technique</a></li>
<li><a href="#">Partenaires</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Boutiques</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</li>
<li>
<a href="#">Championnats</a>
<ul class="sousMenu">
<li><a href="#">Equipes</a></li>
<li><a href="#">Calendriers</a></li>
<li><a href="#">Résultats</a></li>
<li><a href="#">Planning</a></li>
</ul>
</li>
<li>
<a href="#">Entrainements</a>
<ul class="sousMenu">
<li><a href="#">Fiches techniques</a></li>
<li><a href="#">Lieux et horaires</a></li>
<li><a href="#">Plan d'accès</a></li>
</ul>
</li>
<li>
<a href="#">Sponsors</a>
<ul class="sousMenu">
<li><a href="#">Vous êtes intéressé par l'achat d'espace publicitaire sur ce site?</a></li>
</ul>
</li>
<li>
<a href="#">Membres</a>
<ul class="sousMenu">
<li><a href="#">Se connecter en page d'accueil</a></li>
</ul>
</li>
<li>
<a href="#">Liens</a>
<ul class="sousMenu">
<li><a href="#" alt="toto">Sites sympa</a></li>
<li><a href="#">Faire un lien vers ce site</a></li>
<li><a href="#">Ajouter un site</a></li>
</ul>
</li>
<li>
<a href="#" alt="Aller au forum">Forum</a>
<ul class="sousMenu">
</ul>
</li>
</ul>
<div id="content">
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
</div> </body>
</html>

Message édité par bioinfo_djib le 01-09-2005 à 20:08:34

Publicité

gatsusat

if(document.all)

pour moi ce veut dire : Je fais les actions que sous IE, et pas sous FF

Je dois me planter peut etre. A quand des scripts avec des commentaires please

Message édité par gatsusat le 31-08-2005 à 13:32:50

bioinfo_djib

oui et?
Pour que IE puisse faire « comme s'il comprenait » la pseudo-class :hover, nous allons définir une fonction JavaScript qui sera chargée d'émuler le comportement CSS ci-dessus
Cette fonction prend comme argument l'objet HTML auquel doit s'appliquer le comportement, en l'occurrence, ce sera la balise LI qui va appeler la fonction. Nous verrons par la suite comment appliquer ce comportement exactement. En tout premier lieu, la fonction va vérifier si le navigateur qui l'appelle est bien IE (ou Opéra qui souffre du meme problème) avec « if(document.all) ». Si ce n'est pas le cas, rien ne se passera car ce seront les CSS qui prendront le comportement en charge. Ensuite, la fonction va rechercher s'il y a un sous-menu disponible (matérialisé par la première balise UL incluse dans notre objet HTML) avec la fonction getElementsByTagName. Si un sous-menu est détecté, il ne reste plus qu'à modifier son style d'affichage en fonction de son style d'affichage précédent : soit le sous-menu est invisible et il faut le rendre visible, soit le sous-menu est visible et il faut le rendre invisible.

Message édité par bioinfo_djib le 31-08-2005 à 13:36:06

bioinfo_djib

personne n'a de solutions!!

bioinfo_djib

:cry: :cry: :cry: :cry:

bioinfo_djib

pas d'inspiration??

bioinfo_djib

j'avais ajouter un js pour que la classe hover soit comprise avec IE
mais mon souci reside avec les positions:absolute je pense et ou relative.
personne pour m'aider???
sans positions:absolute il fontionnr sur ie et ff, sauf que le texte se decale a chaque, vous pouvez tester

FORUM HardWare.fr

Programmation

HTML/CSS

[DELESTAGE] menu css ie et firefox

Sujets relatifs
probleme de menu contextuel crée avec dreamweaver	Menu déroulant
Pb sous Firefox	Firefox et balise META http-equiv
[AJAX] Les boutons ne sont pas cliquables dans firefox	créer menu fixe + aide
XHTML, CSS et FireFox 1.0.6	menu déroulant
Menu déroulant et FireFox
Plus de sujets relatifs à : [DELESTAGE] menu css ie et firefox

Page générée en 0.071 secondes