[Résolu] Span Active + php

Salut à tous,

J'ai un petit problème concernant l'affichage de mes "span" du menu.

Le principe : lorsque que l'on clique sur un des liens du menu (ou qu'on le survole) une image s'affiche dans l'ecran.

Cela fonctionne trés bien à priori.

Il y a quand même quelque chose qui cloche :

Si par exemple vous cliquez sur le lien "creation graphique" (ou un autre), quand vous survolez les liens se trouvant en dessous de celui cliqué, les spans s'affichent encore mais pas ceux se trouvant au dessus du lien cliqué ...

Quelqu'un peut il m'expliqué pourquoi ?

ps: ce n'est pas un probleme important car au final c'est juste un effet visuel mais j'aimerai au moins savoir pourquoi ...

Merci !

Le code html/php :

<div class="menu">
<?php
$page1_active = "";
$page2_active = "";
$page3_active = "";
$page4_active = "";
$page5_active = "";
$page6_active = "";
switch ($_GET['page']) {
case 'pres';
$page1_active = 'class="image"';;
break;
case 'prod';
$page2_active = 'class="image"';;
break;
case 'creag';
$page3_active = 'class="image"';;
break;
case 'tarifs';
$page4_active = 'class="image"';;
break;
case 'contact';
$page5_active = 'class="image"';;
break;
case 'liens';
$page6_active = 'class="image"';;
break;
}
?>
<ul class="menugauche">
<li><a <?php echo $page1_active;?> href="index.php?page=pres" title="Pr&eacute;sentation" tabindex="20">Pr&eacute;sentation<span><img src="visuels/presentation.png" alt="Presentation" /></span></a></li>
<li><a <?php echo $page2_active;?> href="index.php?page=prod" title="Produits et Services" tabindex="24">Produits et Services<span><img src="visuels/prod.png" alt="Produits et Services"/></span></a></li>
<li><a <?php echo $page3_active;?> href="index.php?page=creag" title="Cr&eacute;ation graphique" tabindex="28">Cr&eacute;ation graphique<span><img src="visuels/crea.png" alt="Cr&eacute;ation graphique"/></span></a></li>
<li><a <?php echo $page4_active;?> href="index.php?page=tarifs" title="Tarifs et Devis" tabindex="32">Tarifs et Devis<span><img src="visuels/tarifs.png" alt="Tarifs et Devis"/></span></a></li>
<li><a <?php echo $page5_active;?> href="index.php?page=contact" title="Contact" tabindex="36" accesskey="7">Contact<span><img src="visuels/contact.png" alt="Contact"/></span></a></li>
<li><a <?php echo $page6_active;?> href="index.php?page=liens" title="Liens" tabindex="40">Liens<span><img src="visuels/links.png" alt="Liens"/></span></a></li>
</ul>
</div>

Et le code php sur chaque page (en début de page) appellée :

<?php
$page5_active = 'class="image"';
?>

Modifié par yank (08 Oct 2007 - 14:39)

Salut,

$page1_active = 'class="image"';;

Tu as un double ;

A+

Hacken a écrit :
Salut,

$page1_active = 'class="image"';;

Tu as un double ;

A+

Salut

Je viens d'enlever les doubles ; mais rien n'y change ...

Merci quand même ... Une autre idée ?

<mode raleur>
C'est gentil de nous filer du code PHP, mais quel est le rapport entre PHP et un problème de rendu HTML/CSS?
</mode raleur>

Sinon, plus calmement, le problème vient du fait que lorsque tu affiches une image correspondant à un lien, l'image correspondant à la page en cours reste affichée également. Et l'empilement des images (la première qui arrive dans le code est en dessous, la seconde au dessus, la troisième encore au dessus...) fait que l'image en cours cache les images des liens précédents.

Le code incriminé est le suivant:

a span { /* définition de la balise <span> inclue dans <a> */
	display: none;
}
a:hover span {
	display: inline;
	position: absolute;
	top: 245px;
	right: 40px;
	width: 90px;
	height: 80px;
}
.image span {
	display: inline;
	position: absolute;
	top: 245px;
	right: 40px;
	width: 90px;
	height: 80px;
}

Déjà, il faudrait commencer par rendre ces styles un peu plus spécifiques. Cibler a span quand ce que l'on souhaite c'est uniquement cibler les span dans les liens du menu, c'est une bêtise. Si jamais on met un span dans un lien ailleurs dans la page, ça va être sympathique à démêler.

Donc, on utilisera plutôt des sélecteurs de ce type: .menugauche a span.

Ensuite, on règlera ces histoires d'empilement avec un peu de z-index qui va bien:

.menugauche a span {
	display: none;
}
.menugauche a:hover span {
	display: inline;
	position: absolute;
	z-index: 2;
	top: 245px;
	right: 40px;
	width: 90px;
	height: 80px;
}
.menugauche .image span {
	display: inline;
	position: absolute;
	z-index: 1;
	top: 245px;
	right: 40px;
	width: 90px;
	height: 80px;
}

Et voilà.

Florent V. a écrit :
<mode raleur>
C'est gentil de nous filer du code PHP, mais quel est le rapport entre PHP et un problème de rendu HTML/CSS?
</mode raleur>

Et voilà.

Salut

Le rapport ? Ben justement je ne savais pas si cela venait du php ou de la css et apparement c'est la css.

Merci pour les conseils Mr Raleur , je vais essayer ça dès que je serais un peu au calme ^^

yank a écrit :
Le rapport ? Ben justement je ne savais pas si cela venait du php ou de la css et apparement c'est la css.

Les erreurs PHP provoquent... des erreurs PHP (des lignes de texte toutes bizarres avec des messages en anglais le plus souvent).
PHP n'intervient pas dans les problèmes de rendu, vu qu'il n'est interprété que par le serveur. Le navigateur qui tente d'afficher la page ne sait même pas forcément que la page a été générée avec PHP (à vrai dire, il s'en fiche).

Un problème de rendu sera donc dû à des problèmes de HTML, de CSS, ou à l'occasion de Javascript (notamment si on manipule les styles via JS). Il faut donc chercher de ce côté là.

Ensuite, si le résultat de ta recherche c'est que tu as un code HTML mal formé ou problématique, et que ce code est généré via PHP, tu peux plonger dans ton code PHP pour tâcher d'obtenir un code HTML correct au final.
Mais on ne commencera pas par chercher du côté de PHP.
Modifié par Florent V. (08 Oct 2007 - 12:22)

Florent V. a écrit :

Les erreurs PHP provoquent... des erreurs PHP (des lignes de texte toutes bizarres avec des messages en anglais le plus souvent).
PHP n'intervient pas dans les problèmes de rendu, vu qu'il n'est interprété que par le serveur. Le navigateur qui tente d'afficher la page ne sait même pas forcément que la page a été générée avec PHP (à vrai dire, il s'en fiche).

Oui en même temps c'est logique ... je dois être fatigué !