Bonjour,
J aurais besoin d un petit peu d aide sur mon menu.
Voila j utilise la biblioteque JQUERY et j ai fais un menu a partir de ce site avec l exemple ici.
Le probleme c est que le menu fonctionne tres bien sur FireFox mais sur IE il y a un decalage que je n arrive pas a resoudre
Pouvez vous me venir en aide?
Ci dessous mon code HTML/Java et plus bas le CSS
Pour les images, vous pouvez prendre les image sur le site de l exemple
Code HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Association Red Hot Chili Local - Présentation</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://webiswell.fr/contents/includes/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".menu .menu_liste li:even").addClass("alt");
// On cache les sous-menus :
$(".menu ul").hide();
$(".menu > img").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul:visible").length != 0) {
$(this).next("ul").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".menu ul").slideUp("normal");
$(this).next("ul").slideDown("normal");
}
});
$(".menu .menu_liste li a").hover(
function () {
$(this).animate({ fontSize: "18px", paddingLeft: "15px" }, 50 );
},
function () {
$(this).animate({ fontSize: "15px", paddingLeft: "3px" }, 50 );
}
);
});
</script>
</head>
<body>
<div id="Menu">
<div align="center"><span class="PresentationMenu">Voici les groupes</span><br />
<br />
</div>
<div class="menu">
<img src="Images/Menu/DATF.jpg" class="menu_bouton1" width="148" height="30" />
<ul class="menu_liste" id="menu_liste">
<li><a { display: inline-block; }
a { display: block; } href="1-DATF/Bio_DATF.html">Bio</a>
<li><a { display: inline-block; }
a { display: block; } href="1-DATF/Dates_DATF.html">Dates</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-DATF/Son_DATF.html">Son</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-DATF/Photo_DATF.html">Photo</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-DATF/Video_DATF.html">Video</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-DATF/Lien_DATF.html">Lien du Groupe</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-DATF/Info-tech_DATF.html">Info Techniques</a></li>
</ul>
</div>
<div class="menu">
<img src="Images/Menu/Esprit_Leger.jpg" class="menu_bouton2" width="148" height="30">
<ul class="menu_liste" id="menu_liste2">
<li><a { display: inline-block; }
a { display: block; } href="1-Esprit_Leger/Bio_EL.html">Bio</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Esprit_Leger/Dates_EL.html">Dates</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Esprit_Leger/Son_EL.html">Son</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Esprit_Leger/Photo_EL.html">Photo</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Esprit_Leger/Video_EL.html">Video</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Esprit_Leger/Lien_EL.html">Lien du Groupe</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Esprit_Leger/Info-tech_EL.html">Info Techniques</a></li>
</ul>
</div>
<div class="menu">
<img src="Images/Menu/Fahrenheit.jpg" class="menu_bouton3" width="148" height="30">
<ul class="menu_liste" id="menu_liste3">
<li><a { display: inline-block; }
a { display: block; } href="1-Fahrenheit/Bio_Fahrenheit.html">Bio</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Fahrenheit/Dates_Fahrenheit.html">Dates</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Fahrenheit/Son_Fahrenheit.html">Son</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Fahrenheit/Photo_Fahrenheit.html">Photo</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Fahrenheit/Video_Fahrenheit.html">Video</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Fahrenheit/Lien_Fahrenheit.html">Lien du Groupe</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Fahrenheit/Info-tech_Fahrenheit.html">Info Techniques</a></li>
</ul>
</div>
<div class="menu">
<img src="Images/Menu/June_Is_Soon.jpg" class="menu_bouton4" width="148" height="30">
<ul class="menu_liste" id="menu_liste4">
<li><a { display: inline-block; }
a { display: block; } href="1-June_Is_Soon/Bio_June_Is_Soon.html">Bio</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-June_Is_Soon/Dates_June_Is_Soon.html">Dates</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-June_Is_Soon/Son_June_Is_Soon.html">Son</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-June_Is_Soon/Photo_June_Is_Soon.html">Photo</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-June_Is_Soon/Video_June_Is_Soon.html">Video</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-June_Is_Soon/Lien_June_Is_Soon.html">Lien du Groupe</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-June_Is_Soon/Info-tech_June_Is_Soon.html">Info Techniques</a></li>
</ul>
</div>
<div class="menu">
<img src="Images/Menu/Meelting_Pot.jpg" class="menu_bouton5" width="148" height="30">
<ul class="menu_liste" id="menu_liste5">
<li><a { display: inline-block; }
a { display: block; } href="1-Meelting_Pot/Bio_Meelting_Pot.html">Bio</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Meelting_Pot/Dates_Meelting_Pot.html">Dates</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Meelting_Pot/Son_Meelting_Pot.html">Son</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Meelting_Pot/Photo_Meelting_Pot.html">Photo</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Meelting_Pot/Video_Meelting_Pot.html">Video</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Meelting_Pot/Lien_Meelting_Pot.html">Lien du Groupe</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Meelting_Pot/Info-tech_Meelting_Pot.html">Info Techniques</a></li>
</ul>
</div>
<div class="menu">
<img src="Images/Menu/Plush.jpg" class="menu_bouton6" width="148" height="30">
<ul class="menu_liste" id="menu_liste6">
<li><a { display: inline-block; }
a { display: block; } href="1-Plush/Bio_Plush.html">Bio</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Plush/Dates_Plush.html">Dates</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Plush/Son_Plush.html">Son</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Plush/Photo_Plush.html">Photo</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Plush/Video_Plush.html">Video</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Plush/Lien_Plush.html">Lien du Groupe</a></li>
<li><a { display: inline-block; }
a { display: block; } href="1-Plush/Info-tech_Plush.html">Info Techniques</a></li>
</ul>
</div></div>
<div id="Haut">
<div align="center"><br />
<span class="TitreHaut">Association Red Hot Chili Local</span><br />
<span class="Sous_Titre"><a href="Presentation.html">Présentation de l'association</a></span></div>
</div>
<div class="Sous_Titre" id="TitrePage">Présentation</div>
<div id="Corps">
</div>
</body>
</html>
-------------------------
CSS
-------------------------
/*------------------------------------------------------------Style MENU */
ul, li {
list-style:none;
font-family: 'segoe ui', 'Tahoma', 'Verdana', 'lucida grande', sans-serif;
}
.menu {
height: auto;
width: 148px;
background-color: #000101;
}
ul, li {
margin: 0;
padding: 0;
list-style:none;
font-family: 'segoe ui', 'Tahoma', 'Verdana', 'lucida grande', sans-serif;
font-size: 15px;
}
/*couleur des sous-repertoires */
.menu {
height: auto;
width: 148px;
/* fond des sous-menu*/
background-color: #9f825e;
/*Bordure*/
border: 1px #000101 solid;
}
.menu .menu_liste {
width: 148px;
display:none;
}
.menu .menu_liste li a {
display:block;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
text-decoration:none;
color: #414141;
}
/*menu DATF fond*/
.menu .menu_liste li.alt {
background:#bba68b;
}
.menu .menu_liste_2 {
width: 148px;
display:none;
}
.menu .menu_liste_2 li a {
display:block;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
text-decoration:none;
color: #414141;
}
.menu .menu_liste_2 li.alt {
background:#bba68b;
}
.menu .menu_liste_3 {
width: 148px;
display:none;
}
.menu .menu_liste_3 li a {
display:block;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
text-decoration:none;
color: #414141;
}
.menu .menu_liste_3 li.alt {
background:#bba68b;
}
.menu .menu_liste_4 {
width: 148px;
display:none;
}
.menu .menu_liste_4 li a {
display:block;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
text-decoration:none;
color: #414141;
}
.menu .menu_liste_4 li.alt {
background:#bba68b;
}
.menu .menu_liste_5 {
width: 148px;
display:none;
}
.menu .menu_liste_5 li a {
display:block;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
text-decoration:none;
color: #414141;
}
.menu .menu_liste_5 li.alt {
background:#bba68b;
}
.menu .menu_liste_6 {
width: 148px;
display:none;
}
.menu .menu_liste_6 li a {
display:block;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
text-decoration:none;
color: #414141;
}
.menu .menu_liste_6 li.alt {
background:#bba68b;
}
/* -----------------------------------------------Style Index */
.Style1 {font-size: 50px}
a:link {
text-decoration: none;
color: #BBA68B;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
a:visited {
text-decoration: none;
color: #BBA68B;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
a:hover {
text-decoration: none;
color: #9f825e;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
a:active {
text-decoration: none;
color: #BBA68B;
}
body {
background-color: #bba68b;
}
#Titre {
position:absolute;
top:30%;
width:100%;
height:299px;
z-index:1;
left: 0;
text-align: center;
}
/*------------------------------------------------------------Style des pages*/
#Menu {
position:absolute;
left:38px;
top:167px;
width:150px;
height:366px;
z-index:1;
}
#apDiv1 {
position:absolute;
left:101px;
top:49px;
width:424px;
height:210px;
z-index:2;
}
body {
background-color: #bba68b;
}
#Haut {
position:absolute;
left:0;
top:0;
width:100%;
height:119px;
z-index:2;
border-bottom-width: 3px;
border-bottom-style: double;
line-height: normal;
background-image: url(Images/Poivron_Titre.jpg);
}
.TitreHaut {
font-size: 50px;
font-weight: bold;
}
#TitrePage {
position:absolute;
left:282px;
top:187px;
width:122px;
height:33px;
z-index:3;
}
.Sous_Titre {
font-size: 18px;
font-weight: bold;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: none;
}
.PresentationMenu {
font-size: 18px;
}
#TitreGroupe {
position:absolute;
left:0px;
top:120px;
width:100%;
height:60px;
z-index:5;
}
#Corps {
position:absolute;
left:262px;
top:278px;
width:715px;
height:500px;
z-index:4;
}
#CorpsPlayer {
position:absolute;
left:303px;
top:245px;
width:780px;
height:570px;
z-index:4;
}
#CorpsPhoto {
position:absolute;
left:222px;
top:180px;
width:780px;
height:570px;
z-index:4;
}
/*---------------------------------------------------------Style Viewer */
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}
#flashcontent {
height: 100%;
}
/* end hide */
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #bba68b;
color:#000000;
}
a {
color:#cccccc;
}