Bonjour à tous,
Je tiens avant tout à vous remercier pour toutes les infos contenu sur ce forum, une vrai mine d'or pour quelqu'un encore en voie de formation comme moi:=)
J'écris mon premier message d'appel à l'aide car je suis en stage et j'ai un problème avec le site d'un photographe sur lequel je dois travailler.
J'ai un petit problème de compatibilité avec le menu de ce site.
C'est un menu horizontale avec un sous menu "normalement" horizontale lui aussi mais je ne trouve pas pourquoi le sous menu s'affiche verticalement sous IE. et en plus il s'affaiche n'importe où! C'est vraiment horrible.
Si quelqu'un peut m'aider ou a déjà rencontré ce problème.
Merci d'avance.
Voici la page : http://www.webguru.fr/visionnage1/
Voici comment devrait s'afficher le menu : http://www.visionnage.fr/
Voici le code de mon menu :
-----------------PARTIE HTML ---début----
<div id="content_menu">
<div id="menu">
<div id="main_menu">
<div id="menu_infos"><a href="infos.html">Infos</a></div>
<div id="menu_films">FILMS</div>
<div id="menu_photos">PHOTOS</div>
<div id="menu_client"><a href="espace-clients.php">Espace Clients</a></div>
<div id="menu_contact"><a href="contact.php">Contact</a></div>
</div>
<div id="sub_menu">
<div id="menu_event">Evénements</div>
<div id="menu_reportage">Reportages</div>
<div id="menu_voyages">Voyages</div>
</div>
</div>
<script>
/*****************************/
/* PREMIERE LIGNE : */
/*****************************/
$("#menu_films").hover(
function () {
$("#sub_menu").css("left","-70px");
$("#menu_event").css("color","#9f9e9e");
$("#menu_reportage").css("color","#9f9e9e");
$("#menu_voyages").css("color","#9f9e9e");
$("#menu_event").empty();
$("#menu_reportage").empty();
$("#menu_voyages").empty();
$("#menu_event").append('<a href="films-evenements.php">Evénements</a>');
$("#menu_reportage").append('<a href="films-reportages.php">Reportages</a>');
$("#menu_voyages").append('<a href="films-voyages.php">Voyages</a>');
$("#sub_menu").show();
$("#menu_films").css("color","#9f9e9e");
$("#menu_photos").css("color","#9f9e9e");
$("#menu_contact").css("color","#9f9e9e");
$("#menu_client").css("color","#9f9e9e");
$("#menu_films").css("color","#EDEDED");
}
);
$("#menu_photos").hover(
function () {
$("#sub_menu").css("left","15px");
$("#menu_event").css("color","#9f9e9e");
$("#menu_reportage").css("color","#9f9e9e");
$("#menu_voyages").css("color","#9f9e9e");
$("#menu_event").empty();
$("#menu_reportage").empty();
$("#menu_voyages").empty();
$("#menu_event").append('<a href="photos-evenements.php">Evénements</a>');
$("#menu_reportage").append('<a href="photos-reportages.php">Reportages</a>');
$("#menu_voyages").append('<a href="photos-voyages.php">Voyages</a>');
$("#sub_menu").show();
$("#menu_films").css("color","#9f9e9e");
$("#menu_photos").css("color","#9f9e9e");
$("#menu_contact").css("color","#9f9e9e");
$("#menu_client").css("color","#9f9e9e");
$("#menu_photos").css("color","#EDEDED");
}
);
$("#menu_contact").hover(
function () {
$("#sub_menu").hide();
$("#menu_films").css("color","#9f9e9e");
$("#menu_photos").css("color","#9f9e9e");
$("#menu_contact").css("color","#9f9e9e");
$("#menu_client").css("color","#9f9e9e");
$("#menu_contact").css("color","#EDEDED");
}
);
$("#menu_client").hover(
function () {
$("#sub_menu").hide();
$("#menu_films").css("color","#9f9e9e");
$("#menu_photos").css("color","#9f9e9e");
$("#menu_contact").css("color","#9f9e9e");
$("#menu_client").css("color","#9f9e9e");
$("#menu_client").css("color","#EDEDED");
}
);
$("#menu_infos").hover(
function () {
$("#sub_menu").hide();
$("#menu_films").css("color","#9f9e9e");
$("#menu_photos").css("color","#9f9e9e");
$("#menu_contact").css("color","#9f9e9e");
$("#menu_client").css("color","#9f9e9e");
$("#menu_client").css("color","#EDEDED");
}
);
/*****************************/
/* DEUXIEME LIGNE : */
/*****************************/
$("#menu_event").hover(
function () {
$("#menu_event").css("color","#9f9e9e");
$("#menu_reportage").css("color","#9f9e9e");
$("#menu_voyages").css("color","#9f9e9e");
$("#menu_event").css("color","#EDEDED");
}
);
$("#menu_reportage").hover(
function () {
$("#menu_event").css("color","#9f9e9e");
$("#menu_reportage").css("color","#9f9e9e");
$("#menu_voyages").css("color","#9f9e9e");
$("#menu_reportage").css("color","#EDEDED");
}
);
$("#menu_voyages").hover(
function () {
$("#menu_event").css("color","#9f9e9e");
$("#menu_reportage").css("color","#9f9e9e");
$("#menu_voyages").css("color","#9f9e9e");
$("#menu_voyages").css("color","#EDEDED");
}
);
</script>
<script type="text/javascript">
$("#content_menu").mouseleave(function() {
timeoutID = setTimeout(function(){
if ((item1_off != "contact") && (item1_off != "client")){
$(item1_on).css("color","#EDEDED");
$(item1_off).css("color","#9f9e9e");
if (item1_on == '#menu_photos'){
$("#sub_menu").css("left","-12px");
$("#menu_event").empty();
$("#menu_reportage").empty();
$("#menu_voyages").empty();
$("#menu_event").append('<a href="photos-evenements.php">Evénements</a>');
$("#menu_reportage").append('<a href="photos-reportages.php">Reportages</a>');
$("#menu_voyages").append('<a href="photos-voyages.php">Voyages</a>');
$("#sub_menu").show();
}
if (item1_on == '#menu_films'){
$("#sub_menu").css("left","-92px");
$("#menu_event").empty();
$("#menu_reportage").empty();
$("#menu_voyages").empty();
$("#menu_event").append('<a href="films-evenements.php">Evénements</a>');
$("#menu_reportage").append('<a href="films-reportages.php">Reportages</a>');
$("#menu_voyages").append('<a href="films-voyages.php">Voyages</a>');
$("#sub_menu").show();
}
$(item2).css("color","#EDEDED");
} else {
$("#menu_photos").css("color","#9f9e9e");
$("#menu_films").css("color","#9f9e9e");
$("#sub_menu").hide();
}
clearTimeout(timeoutID);
}, 3000);
});
$("#content_menu").mouseenter(function() {
clearTimeout(timeoutID);
});
</script>
----FIN PARTIE HTML--------------------------------------
------------------DEBUT CSS---------------------------------
#content_menu{
width: 1000px;
position: relative;
float: left;
height: 59px;
background-image: url(http://www.visionnage.fr/images/fond_menu.gif);
}
#menu {
position: relative;
float: left;
width: auto;
top: 8px;
}
#menu div {
color: #9f9e9e;
font: bold 14px Arial;
}
#menu a {
color: #9f9e9e;
text-decoration: none;
font: bold 14px Arial;
}
#menu a:hover {
color: #FFFFFF;
text-decoration: none;
font: bold 14px Arial;
}
/************************/
/* LIGNE 1 */
/************************/
#main_menu {
position: relative;
float: left;
height: 20px;
margin-right: 40px;
width: 1000px;
}
#menu_infos {
position: relative;
float: left;
margin-right: 400px;
}
#menu_films {
position: relative;
float: left;
margin-right: 40px;
cursor: pointer;
}
#menu_photos {
position: relative;
float: left;
cursor: pointer;
}
#menu_contact {
position: relative;
float: right;
padding-right: 40px;
}
#menu_client {
position: relative;
float: right;
}
/************************/
/* LIGNE 2 */
/************************/
#sub_menu {
position: relative;
clear: both;
float: left;
display: none;
top:8px;
margin-left: 400px;
}
#menu_event {
position: relative;
float: left;
padding-right: 10px;
display: inline
}
#menu_reportage {
position: relative;
float: left;
padding-right: 10px;
display: inline
}
#menu_voyages {
position: relative;
float: left;
display: inline
}
-------------FIN DE LA PARTIE CSS DU MENU-------------------------------------------------