28220 sujets

CSS et mise en forme, CSS3

Probleme d'affichage de menu

bonjour
j'ai crée un menu decoupé en image et je l'ai fait avec un soft de traitement d'image
j'ai donc 8 images sur ce menu en etat normal et quand je survolle ces images il y une 8 images qui s'affichent le principe de image réactive (rollover) sans javascript
voici le lien de la page
http://byahya.free.fr/menuarc.php
ca marche sous internet explorer mais pas sous fire fox


/*---------------le code de la page stylee.css ----------------------*/

BODY {background-image: url(../fond_stardev/fondblue.jpg) ;

background-color: #ffffff;
COLOR: #000000;
MARGIN-TOP: 0px;
MARGIN-BOTTOM: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px ;

}


#menu ul {
margin: 0px;
padding: 0;
list-style-type:none;
display:inline;
/*line-height: 45px;*/
}
#menu li { margin:0; padding:0; display:inline; border:none; }

#menu a.menu1 {
display:inline;
margin: 0px;
padding: 0px;
height: 45px;
width: 97px;
margin-bottom: 0px;
background:url("../arc/arc_ombre/accueil.gif") no-repeat;

}


#menu a.menu2 {
display:inline;
margin: 0px;
padding: 0px;
height: 45px;
width: 74px;
margin-bottom: 0px;
background:url("../arc/arc_ombre/ventes.gif") no-repeat;

}

#menu a.menu3 {
display:inline;
margin: 0px;
padding: 0px;
height: 45px;
width: 104px;
margin-bottom: 0px;
background:url("../arc/arc_ombre/catalogues.gif") no-repeat;

}
#menu a.menu4 {
display:inline;
margin: 0px;
padding: 0px;
height: 45px;
width: 91px;
margin-bottom: 0px;
background:url("../arc/arc_ombre/services.gif") no-repeat;

}

#menu a.menu5{
display:inline;
margin: 0px;
padding: 0px;
height: 45px;
width: 94px;
margin-bottom: 0px;
background:url("../arc/arc_ombre/solutions.gif") no-repeat;

}

#menu a.menu6 {
display:inline;
margin: 0px;
padding: 0px;
height: 45px;
width: 106px;
margin-bottom: 0px;
background:url("../arc/arc_ombre/realisations.gif") no-repeat;

}

#menu a.menu7 {
display:inline;
margin: 0px;
padding: 0px;
height: 45px;
width:102px;
margin-bottom: 0px;
background:url("../arc/arc_ombre/formations.gif") no-repeat;

}
#menu a.menu8 {
display:inline;
margin: 0px;
padding: 0px;
height: 45px;
width: 110px;
margin-bottom: 0px;
background:url("../arc/arc_ombre/contact.gif") no-repeat;

}
#menu a.menu1:hover { background:url("../arc/arc_normal/accueil.gif") no-repeat; }
#menu a.menu2:hover { background:url("../arc/arc_normal/ventes.gif") no-repeat; }
#menu a.menu3:hover { background:url("../arc/arc_normal/catalogues.gif") no-repeat; }
#menu a.menu4:hover { background:url("../arc/arc_normal/services.gif") no-repeat; }
#menu a.menu5:hover { background:url("../arc/arc_normal/solutions.gif") no-repeat; }
#menu a.menu6:hover { background:url("../arc/arc_normal/realisations.gif") no-repeat; }
#menu a.menu7:hover { background:url("../arc/arc_normal/formations.gif") no-repeat; }
#menu a.menu8:hover { background:url("../arc/arc_normal/contact.gif") no-repeat; }

#menu a.menu1:active { background:url("../arc/arc_normal/accueil.gif") no-repeat; }
#menu a.menu2:active { background:url("../arc/arc_normal/ventes.gif") no-repeat; }
#menu a.menu3:active { background:url("../arc/arc_normal/catalogues.gif") no-repeat; }
#menu a.menu4:active { background:url("../arc/arc_normal/services.gif") no-repeat; }
#menu a.menu5:active { background:url("../arc/arc_normal/solutions.gif") no-repeat; }
#menu a.menu6:active { background:url("../arc/arc_normal/realisations.gif") no-repeat; }
#menu a.menu7:active { background:url("../arc/arc_normal/formations.gif") no-repeat; }
#menu a.menu8:active { background:url("../arc/arc_normal/contact.gif") no-repeat; }

/* ------------ fin de la page stylee.css -------------------------*/

/*---- voici le code la page http://byahya.free.fr/menuarc.php ------- */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<META content="text/html; charset=windows-1256" http-equiv=Content-Type>
<LINK REL="SHORTCUT ICON" HREF="icone_stardev/zgava.ico">
<link rel="stylesheet" type="text/css" href="style_stardev/stylee.css" media="screen"/>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="menu">
<ul>
<li><a href="#" class="menu1"></a></li>
<li><a href="#" class="menu2"></a></li>
<li><a href="#" class="menu3"></a></li>
<li><a href="#" class="menu4"></a></li>
<li><a href="#" class="menu5"></a></li>
<li><a href="#" class="menu6"></a></li>
<li><a href="#" class="menu7"></a></li>
<li><a href="#" class="menu8"></a></li>
</ul>
</div>
</body>
</html>
/*---- fin code la page http://byahya.free.fr/menuarc.php ------- */
Sujet clos
Aller à