Bien en espérant ne pas me planter cette fois ci !
Bonjour,
Toute nouvelle alors j'espère être dans la bonne catégorie ! ma question concerne un problème sur les sprite. J'ai utilisé l'exemple 2 du tuto des sprites.
Tout fonctionne correctement, j'ai remplacé #bandeau par #fd_menu et menugauche par #menu-fr (n'ayant pas besoin de menudroite je l'ai supprimé), mon menu de navigation est enregistré sous nav_fr1.php
Comme dit précédemment tout fonctionne parfaitement.... sauf que lorsque j'intègre mon menu à ma page via <?php include("/nav_fr1.php"); ?> les fonctions hover, active,focus ne fonctionnent plus dès que je remplace le <a href="#" .....> par <a href="nom_de_ma_page.php">
Plus bas le code complet.... j'ai réuni le code sur une page pour plus de compréhension mais tout les styles sont réunis dans ma css.
J'imagine qu'il s'agit d'un problème d'appel de page ou .... d'ailleurs j'en sais rien ! ce que je sais c'est que je n'ai pas le choix, pour gérer plus facilement le site par la suite, je dois avoir un seul fichier menu. En espèrant avoir été claire ! Merci pour vos réponses
Modifié par Florent V. (25 Oct 2010 - 19:07)
Bonjour,
Toute nouvelle alors j'espère être dans la bonne catégorie ! ma question concerne un problème sur les sprite. J'ai utilisé l'exemple 2 du tuto des sprites.
Tout fonctionne correctement, j'ai remplacé #bandeau par #fd_menu et menugauche par #menu-fr (n'ayant pas besoin de menudroite je l'ai supprimé), mon menu de navigation est enregistré sous nav_fr1.php
Comme dit précédemment tout fonctionne parfaitement.... sauf que lorsque j'intègre mon menu à ma page via <?php include("/nav_fr1.php"); ?> les fonctions hover, active,focus ne fonctionnent plus dès que je remplace le <a href="#" .....> par <a href="nom_de_ma_page.php">
Plus bas le code complet.... j'ai réuni le code sur une page pour plus de compréhension mais tout les styles sont réunis dans ma css.
J'imagine qu'il s'agit d'un problème d'appel de page ou .... d'ailleurs j'en sais rien ! ce que je sais c'est que je n'ai pas le choix, pour gérer plus facilement le site par la suite, je dois avoir un seul fichier menu. En espèrant avoir été claire ! Merci pour vos réponses
<!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" xml:lang="fr" lang="fr">
<head>
<title>test navi sprite</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--[if lte IE 8]><script type="text/javascript" src="roundies.js"></script><![endif]-->
<!-- Javascript -->
<style type="text/css">
/* SPRITE COMPLEXE : EXEMPLE 2 */
#fd_menu {
position:relative;
margin-top: 10px;
margin-bottom:0px;
margin-left:0px;
height: 42px;
background: #fff;
padding:0px;
/*soluc autres navigateurs*/
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
behavior:url(script/border-radius.htc);
}
#menu-fr {
display:block;
position: relative;
min-width:850px;
bottom:0;
padding:0px;
top: 4px;
left: 0px;
}
#menu-fr span
{
display:none;
}
#menu-fr ul
{
list-style-type:none;
border:0;
margin:0;
padding:0;
}
#menu-fr li
{
margin:0;
padding:0;
}
#menu-fr li a
{
position:absolute;
left:0px;
display:block;
height:35px;
background:url("images/navi_fr.png") 0 0 no-repeat;
border:0;
margin:0;
}
#menu-fr #n1
{
width: 60px;
left: 4px;
background-position:0 0;
}
#menu-fr #n1:hover,#menu-fr #n1:active,#menu-fr #n1:focus
{
background-position:0 -35px;
}
#menu-fr #n2
{
width: 126px;
left:64px;
background-position:-60px 0;
}
#menu-fr #n2:hover,#menu-fr #n2:active,#menu-fr #n2:focus
{
background-position:-60px -35px;
}
#menu-fr #n3
{
width:126px;
left:190px;
background-position:-186px 0;
}
#menu-fr #n3:hover,#menu-fr #n3:active,#menu-fr #n3:focus
{
background-position:-186px -35px;
}
#menu-fr #n4
{
left:314px;
width:126px;
background-position:-310px 0;
}
#menu-fr #n4:hover,#menu-fr #n4:active,#menu-fr #n4:focus
{
background-position:-310px -35px;
}
#menu-fr #n5
{
width:126px;
left:439px;
background-position:-435px 0;
}
#menu-fr #n5:hover,#menu-fr #n5:active,#menu-fr #n5:focus
{
background-position:-435px -35px;
}
#menu-fr #n6
{
width:126px;
left:564px;
background-position:-560px 0;
}
#menu-fr #n6:hover,#menu-fr #n6:active,#menu-fr #n6:focus
{
background-position:-560px -35px;
}
#menu-fr #n7
{
left:690px;
width:126px;
background-position:-686px 0;
}
#menu-fr #n7:hover,#menu-fr #n7:active,#menu-fr #n7:focus
{
background-position:-686px -35px;
}
</style>
</head>
<body bgcolor="#CCCCCC">
<div id="fd_menu">
<div id="menu-fr">
<ul>
<li><a href="#" id="n1" title="navi1"><span>navi1</span></a></li>
<li><a href="/fr/page2.php" id="n2" title="navi2"><span>navi2</span></a></li>
<li><a href="#" id="n3" title="navi3"><span>navi 3</span></a></li>
<li><a href="#" id="n4" title="navi4"><span>navi4</span></a></li>
<li><a href="#" id="n5" title="navi5"><span>navi5</span></a></li>
<li><a href="#" id="n6" title="navi6"><span>navi6</span></a></li>
<li><a href="#" id="n7" title="navi7"><span>navi7</span></a></li>
</ul>
</div> <!-- fin de menu-fr -->
</div> <!-- fin de fd_menu -->
</body>
</html>Modifié par Florent V. (25 Oct 2010 - 19:07)
