[Résolu] Problème d'affichage d'image de lien de menu dans page active

Question

4 Oct 2013 à 19:20

Bonsoir,
Sur un site joomla (www.gersfarine.com) j'ai plusieurs menus. Le client a exigé des menus avec liens en images. Sur le menu gauche ou les menu intérieurs, j'ai une image x en a:link et une image y en a:hover et a:active(?). Or, mes a:link et a:hover fonctionnent avec changement d'image,par contre quand je suis sur la page du lien, je n'arrive pas à afficher mon image (la même que celle du a:hover). Je ne sais pas si ce que je raconte est très clair ?
Sachant que les pages sont générées par du php, je n'ai pas la possiblité de créer un code par page.
Voici mon code html et la css correspondante :

HTML :


<div id="menu_gauche">
<ul id="Menugauche">
<li class="item-109"><a href="./index.php/bles2"></a></li>
<li class="item-110"><a href="./index.php/farine"></a></li>
<li class="item-111"><a href="./index.php/painartisanboulanger"></a></li>
</ul>
</div>


CSS
#menu_gauche {
float:left;
width:100%;
max-width:130px;
height:auto;
margin-left:20px;
margin-top:20px;
}
#menu_gauche #menugauche li {
display:block;
width:100%;
max-width:130px;
height:25%;
text-align:center;
}

#menu_gauche .item-109 a {background:url(http://www.gersfarine.com/images/menu2_li1.png) top center no-repeat; display:block; width:auto; height:100px;}
#menu_gauche .item-109 a:visited, #menu_gauche .item-109 a:hover, #menu_gauche .item-109 a:active {background:url(http://www.gersfarine.com/images/menu_gaucheli1.png) top center no-repeat; display:block; width:auto; height:100px;}
#menu_gauche .item-110 a {background:url(http://www.gersfarine.com/images/menu2_li2.png) top center no-repeat; display:block; width:auto; height:100px;}
#menu_gauche .item-110 a:visited, #menu_gauche .item-110 a:hover, #menu_gauche .item-110 a:active {background:url(http://www.gersfarine.com/images/menu_gaucheli2.png) top center no-repeat; display:block; width:auto; height:100px;}
#menu_gauche .item-111 a {background:url(http://www.gersfarine.com/images/menu2_li3.png) top center no-repeat; display:block; width:auto; height:110px;}
#menu_gauche .item-111 a:visited, #menu_gauche .item-111 a:hover, #menu_gauche .item-111 a:active {background-image:url(http://www.gersfarine.com/images/menu_gaucheli3.png) top center no-repeat; display:block; width:auto; height:110px;}

Voilà, j'espère que quelqu'un pourra m'aider...
J'ai cherché dans le forum et je n'ai pas trouvé de réponse à mon pb.
Merci d'avance
Nathalie

~~supprimé~~

4 Oct 2013 à 20:33

Bonsoir Nathalie.

Désolé mais tu n'es pas très clair dans tes propos.
Alors ce que j'ai fait, j'ai recopié ton exemple et je l'ai testé.

En fait, le problème de la non affichage de la troisième vignette est que tu as mis background-image.
J'ai remplacé cela par background et la troisième vignette s'affiche maintenant, lorsque je passe le curseur dessus.

Afin d'être précis dans mes propos, j'ai mis en rouge ce que j'ai supprimé :

#menu_gauche .item-111 a:visited, #menu_gauche .item-111 a:hover, #menu_gauche .item-111 a:active {background-image:url(http://www.gersfarine.com/images/menu_gaucheli3.png) top center no-repeat; display:block; width:auto; height:110px;}

Je pense que ton problème est une question de fatigue.
A trop vouloir chercher, on finit par ne plus rien voir.
J'espère que cela répond à ton attente.

@+
Modifié par tournikoti (04 Oct 2013 - 20:36)

nathaliegatiendavid

5 Oct 2013 à 00:38

Merci pour ta réponse rapide, en effet pour le 3ème lien de menu, il y avait cette erreur Smiley decu

Par contre en fait, pour essayer d'être plus claire, je voudrais que l'image soit la verte, quand je suis sur la page correspondante : Exemple, si je suis sur la page "blés" je voudrais que l'image du lien "blés" soit la verte.
J'espère que c'est plus compréhensible.
Nathalie

nathaliegatiendavid

5 Oct 2013 à 10:55

Bonjour,

J'ai essayé la "méthode" php que j'ai trouvé à la fois sur la page : http://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html et sur : http://alistapart.com/article/keepingcurrent#

ce qui donnait sur mon lien : <li class="item-109" <?php if ($thisPage =='bles2') {echo 'id="en_cours"';} ?> ><a href="./index.php/bles2"></a></li>

mais ça ne fonctionne pas non plus Smiley eek

Je continue à chercher, mais....
Merci encore

~~supprimé~~

5 Oct 2013 à 21:30

Bonsoir nathalie.

J'ai eu du mal à te comprendre, mais je suis enfin arrivé !!!

Lorsque tu désires mettre sur la balise <a> les pseudo-classes (link, visited, hover et active), il faut respecter l'ordre (LoVE - HATE), mais bon, je pense que ça, tu le sais.

Par contre, en CSS pur, tu ignores que la pseudo-classe "ACTIVE" ne fonctionne pas avec les images en background. Avant de dire cela, j'ai testé ton exemple.

Ensuite, j'ai fait une recherche sur le net et j'ai trouvé ceci !

Je te rassure, il existe une solution avec JavaScript, mais elle a l'inconvénient mineure de réinitialiser cette fonctionnalité si tu sors du site !

Ci-après l'exemple qui fonctionne :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>exemple</title>

<style>
ul#menu {
		display			: block;
		width			: 420px;
		height			: 64px;
		list-style-type	: none;
}

ul#menu li {
		float			: left;
		padding			: 0 10px;
}

ul#menu li a {
		display			: block;
		width			: 120px;
		height			: 64px;
		text-decoration	: none;
}

ul#menu li       a:hover   {background-image:url("http://www.gersfarine.com/images/menu_gaucheli1.png");	}
ul#menu li+li    a:hover   {background-image:url("http://www.gersfarine.com/images/menu_gaucheli2.png");	}
ul#menu li+li+li a:hover   {background-image:url("http://www.gersfarine.com/images/menu_gaucheli3.png");	}

.a1		{background-image:url("http://www.gersfarine.com/images/menu2_li1.png");		}
.a2		{background-image:url("http://www.gersfarine.com/images/menu_gaucheli1.png");	}
.b1		{background-image:url("http://www.gersfarine.com/images/menu2_li2.png");		}
.b2		{background-image:url("http://www.gersfarine.com/images/menu_gaucheli2.png");	}
.c1		{background-image:url("http://www.gersfarine.com/images/menu2_li3.png");		}
.c2		{background-image:url("http://www.gersfarine.com/images/menu_gaucheli3.png");	}

ul#menu:after {
		content			: "";
		height			: 0;
		display			: block;
		clear			: both;
}
</style>

<script language="JavaScript" type="text/javascript">
function ChangeClass1(obj) {obj.className="a2";}
function ChangeClass2(obj) {obj.className="b2";}
function ChangeClass3(obj) {obj.className="c2";}
</script>
</head>

<body>
<ul id="menu">
	<li><a onclick="ChangeClass1(this);" class="a1" href="./index.php/bles2"></a></li>
	<li><a onclick="ChangeClass2(this);" class="b1" href="./index.php/farine"></a></li>
	<li><a onclick="ChangeClass3(this);" class="c1" href="./index.php/painartisanboulanger"></a></li>
</ul>
</body>
</html>

Une autre remarque : tu devrais faire des images ayant les mêmes dimensions. C'est bien moins compliqué à gérer !

J'espère avoir répondu à ton attente !

@+
Modifié par tournikoti (05 Oct 2013 - 21:31)

nathaliegatiendavid

5 Oct 2013 à 23:03

Wahou !! C'est vraiment trop sympa d'avoir une aide aussi rapide et efficace Smiley smile

))
Merci beaucoup sincèrement....
En fait j'ai résolu mon problème en php : je donne mon code dans index.php pour le menu les CSS, su ne sont pas parfaits certes, j'ai qq trucs à reprendre, mais ça fonctionne :

Index.php : code menu

<div id="menu_gauche">
<ul id="Menugauche">
<?php $id = JRequest::getVar('id');?>
<?php if ($id==1): ?>
<li class="item-109"><a id="active_109" href="./index.php/bles2"></a></li>
<li class="item-110"><a href="./index.php/farine"></a></li>
<li class="item-111"><a href="./index.php/painartisanboulanger"></a></li>
<?php elseif ($id==2): ?>
<li class="item-109"><a href="./index.php/bles2"></a></li>
<li class="item-110"><a id="active_110" href="./index.php/farine"></a></li>
<li class="item-111"><a href="./index.php/painartisanboulanger"></a></li>
<?php elseif ($id==3): ?>
<li class="item-109"><a href="./index.php/bles2"></a></li>
<li class="item-110"><a href="./index.php/farine"></a></li>
<li class="item-111"><a id="active_111" href="./index.php/painartisanboulanger"></a></li>
<?php else : ?>
<li class="item-109"><a href="./index.php/bles2"></a></li>
<li class="item-110"><a href="./index.php/farine"></a></li>
<li class="item-111"><a href="./index.php/painartisanboulanger"></a></li>
<?php endif; ?>
</ul>
</div>


CSS

#menu_gauche {
float:left;
width:100%;
max-width:130px;
height:auto;
margin-left:20px;
margin-top:20px;
}
#menu_gauche #menugauche li {
display:block;
width:100%;
max-width:130px;
height:25%;
text-align:center;
}

#menu_gauche .item-109 a {background:url(http://www.gersfarine.com/images/menu2_li1.png) top center no-repeat; display:block; width:auto; height:100px;}
#menu_gauche .item-109 a:visited, #menu_gauche .item-109 a:hover, #menu_gauche .item-109 a:active {background:url(http://www.gersfarine.com/images/menu_gaucheli1.png) top center no-repeat; display:block; width:auto; height:100px;}
#menu_gauche .item-109 #active_109 {background:url(http://www.gersfarine.com/images/menu_gaucheli1.png) top center no-repeat; display:block; width:auto; height:100px;}
#menu_gauche .item-110 a {background:url(http://www.gersfarine.com/images/menu2_li2.png) top center no-repeat; display:block; width:auto; height:100px;}
#menu_gauche .item-110 a:hover, #menu_gauche .item-110 a:active {background:url(http://www.gersfarine.com/images/menu_gaucheli2.png) top center no-repeat; display:block; width:auto; height:100px;}
#menu_gauche .item-110 #active_110 {background:url(http://www.gersfarine.com/images/menu_gaucheli2.png) top center no-repeat; display:block; width:auto; height:100px;}
#menu_gauche .item-111 a {background:url(http://www.gersfarine.com/images/menu2_li3.png) top center no-repeat; display:block; width:auto; height:110px;}
#menu_gauche .item-111 a:hover, #menu_gauche .item-111 a:active {background:url(http://www.gersfarine.com/images/menu_gaucheli3.png) top center no-repeat; display:block; width:auto; height:110px;}
#menu_gauche .item-111 #active_111 {background:url(http://www.gersfarine.com/images/menu_gaucheli3.png) top center no-repeat; display:block; width:auto; height:110px;}

En tous cas, je retiens ta solution et je reviendrai sur le forum Smiley smile

Nathalie

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Problème d'affichage d'image de lien de menu dans page active