Bonjour,

Au niveau de mon menu, je souhaiterais que le lien visité prennent une couleur différente quand je suis sur la page correspondante.

J'ai chercher, mais ce que j'ai trouvé ne fonctionne pas (.bouton:active). C'est à dire que là, la couleur qui correspond à la page visitée ne s'affiche que quand on maintient le clic de la souris sur le lien du menu ! Et quand on relâche, la couleur disparait !

.bouton {
display: block;
width: 230px;
height: 20px;
background-color: #C0C0C0;
text-align: center;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: black;
text-decoration: none;
}
.bouton:hover {
background-color: #969696;
color: black;
text-decoration: underline;
}
.bouton:active {
background-color: #FF6666;
color: black;
text-decoration: underline;
}

Merci pour vos idées et votre aide

a:visited !!!!!!!!!!!!!!!!!!

Dreamer a écrit :

a:visited !!!!!!!!!!!!!!!!!!

J'ai déjà essayé. Mais là, le lien change de couleur, et la garde.

Moi, ce que je recherche, c'est que le lien change de couleur quand on visite la page associée, et reprend sa couleur initiale au changement de page.

a:active est fait pour n'afficher un comportement qu'à l'activation du lien. Sinon il faut que tu le fasses avec une classe CSS spéciale ...

t671 a écrit :

Dreamer a écrit :

a:visited !!!!!!!!!!!!!!!!!!

J'ai déjà essayé. Mais là, le lien change de couleur, et la garde.

Moi, ce que je recherche, c'est que le lien change de couleur quand on visite la page associée, et reprend sa couleur initiale au changement de page.

Alors , il te faut prévoir un refresh , mais je crois que ce n'est pas valide W3C

<meta http-aquiv="refresh" content="30">

30 étant le temps en secondes .........

Ben ça fonctionne pô !!!! J'ai testé à 30s, 10s et 2s. Mais reste la couleur "visited"

En gros tu dois modifier la class de ton lien en fonction de ta page avec du javascript ou php.

Je peux pas te donner d'exemple de suite ...

Cedders a écrit :

En gros tu dois modifier la class de ton lien en fonction de ta page avec du javascript ou php.

Je peux pas te donner d'exemple de suite ...

OK Cedders !

Merci de penser à moi quand tu auras un moment ....

C'est quoi la structure de ton site ?

Tu charges dynamiquement le contenu (en php dans un div par exemple) ou tu as une page/article ?

Cedders a écrit :

C'est quoi la structure de ton site ?

Tu charges dynamiquement le contenu (en php dans un div par exemple) ou tu as une page/article ?

Je charge la page demandée dans un div :

<div class="frame">
<?php

$pages=array(
'manifestations'=>'manifestations_FR.php',
'choristes'=>'choristes_FR.php',
'europe'=>'europe_FR.php',...............

Ok donc manifestations, choristes, europe, etc... c'est passé par URL ?

Cedders a écrit :

Ok donc manifestations, choristes, europe, etc... c'est passé par URL ?

oui

Donc ce que je te propose :

1) Créer la class ".courant" égal à ".bouton:hover" (Attention : il te faut recopier toutes les propriétés car .courant ne va pas hériter de celles de .bouton)

.bouton:active, .courant {
display: block;
width: 230px;
height: 20px;
background-color: #FF6666;
color: black;
text-decoration: underline;
text-align: center;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
}

2) La création du menu. Tu boucles ton tableau pour afficher les elements du menu. Tu compare le nom du lien à afficher avec celui passé dans l'URL. S'il sont égaux c'est que le lien que tu affiches est le courant et donc la variable $class vaudra "courant" sinon elle vaudra "bouton".

<ul>
<?php
foreach($pages as $nom)
{
if(isset($_GET['page']) AND $_GET['page'] == $nom) // Page a afficher = Lien a afficher
$class = "courant";
else
$class = "bouton";

echo "<li><a class=\"".$class."\"href=\"index.php?page=".$nom."\">".$nom."</a></li>\n";
}
?>
</ul>

J'espère que celà t'aideras et n'hésite pas à poser des question si jamais ;)

Ca ne fonctionne pas ! J'ai peut-être pas fait ce qu'il fallait ...

Pour le css, j'ai donc rajouiter la class "courant" (j'ai juste changé la couleur en rouge) :

.courant {
display: block;
width: 200px;
height: 20px;
background-color: red;
text-align: center;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: black;
text-decoration: none;
}

Et pour le script, voilà comment j'ai fait :

<div class="frame">
<?php

$pages=array(
'manifestations'=>'manifestations_FR.php',
'choristes'=>'choristes_FR.php',
'europe'=>'europe_FR.php',
'remerciement'=>'remerciement_FR.php'
);
if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']];
else
include 'accueil_FR.htm';

//----------changer la couleur des liens actif

foreach($pages as $nom)
{
if(isset($_GET['page']) AND $_GET['page'] == $nom) // Page a afficher = Lien a afficher
$class = "courant";
else
$class = "bouton";

echo "<li><a class=\"".$class."\"href=\"index_FR.php?page=".$nom."\">".$nom."</a></li>\n";
}

?>

Pour info, ma page s'appelle index_FR.

J'ai rajouté ta boucle après l'affichage du menu, et ça fonctionne pas. POurquoi ?

C'est quoi qui ne fonctionne pas ? Tu as une erreur ?

EDIT :

Suis-je bête ... j'avais testé sans les include donc ça marchait mais je me suis planté au niveau du foreach...

... soit du fait

foreach($tableau as $valeur) // Comme dans la première version

... ou

foreach($tableau as $cle => $valeur) // Seconde version

Car ce qui nous intéresse comme valeur c'est la cle "europe", "choristes", etc... et non la valeur (europe_FR.php,...). Donc il faut passer par la seconde version

//----------changer la couleur des liens actif

foreach($pages as $cle => $value)
{
if(isset($_GET['page']) AND $_GET['page'] == $cle) // Page a afficher = Lien a afficher
$class = "courant";
else
$class = "bouton";

echo "<li><a class=\"".$class."\"href=\"liens.php?page=".$cle."\">".$cle."</a></li>\n";
}

Désolé de cette faute d'inattention ...

OK, merci pour ton aide ! En fait, j'ai omis de te donner le début de mon code :

<div class="menu2">
<a class="bouton" href="index_FR.php?page=accueil">Qui sommes nous</a>
<a class="bouton" href="index_FR.php?page=manifestations">Nos prochaines sorties</a>
<a class="bouton" href="index_FR.php?page=choristes">Choristes</a> ..............
</div>

<div class="frame">
<?php

$pages=array(
'manifestations'=>'manifestations_FR.php',
'choristes'=>'choristes_FR.php',
'europe'=>'europe_FR.php', .............
);
if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']];
else
include 'accueil_FR.htm';

//----------changer la couleur des liens actif

foreach($pages as $cle => $value)
{
if(isset($_GET['page']) AND $_GET['page'] == $cle) // Page a afficher = Lien a afficher
$class = "courant";
else
$class = "bouton";

echo "<li><a class=\"".$class."\"href=\"index_FR.php?page=".$cle."\">".$cle."</a></li>\n";
}
?>

Là, j'affiche dans ma frame (partie centrale) la page d'accueil avec dessous un menu correspondant à "manifestations, choristes, europe, .......", ce qui correspond à l'array. Il va donc falloir que je mette les divs à leur place !

Et je n'arrive toujours pas à placer le menu ( echo " "<li><a class=\"".$class."\"href=\"index_FR.php?page...) dans la div menu2, pour l'afficher dans la partie gauche, et faire afficher les liens dans la frame !

... là je comprend pas trop ce que tu aimerais et/ou ce qui ne marche pas.

Que l'on soit sur la même longueur d'onde. Le code qui suit "//----------changer la couleur des liens actif " ne modifie pas ton menu et donc le style ... il l'affiche si tu vois ce que je veux dire.

Donc si tu veux que le menu soit dans la div menu2 tu dois insérer le code à l'intérieur et non à la fin.

Voilà ce que j'ai donc fait :

<?php
echo '<div class="frame">';

$pages=array(
'accueil'=>'accueil_FR.htm',
'manifestations'=>'manifestations_FR.php',
'choristes'=>'choristes_FR.php',
'europe'=>'europe_FR.php',
'affiches'=>'affiches_FR.php',
'histo'=>'histo_FR.htm',
'repertoire'=>'repertoire_FR.htm',
'alb_photos'=>'alb_photos_FR.php',
'videos'=>'videos_FR.php',
'cd'=>'cd_FR.php',
'livredor'=>'livredor_FR.php',
'liens'=>'liens_FR.php',

'contact'=>'contact_FR.htm',
);

if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']];
else
include 'accueil_FR.htm';
echo '</div>';

echo '<div class="menu2">';
foreach($pages as $cle => $value)
{
if(isset($_GET['page']) AND $_GET['page'] == $cle) // Page a afficher = Lien a afficher
$class = "courant";
else
$class = "bouton";

echo "<li><a class=\"".$class."\"href=\"index_FR.php?page=".$cle."\">".$cle."</a></li>\n"; // affichage menu
echo '</div>';

}
?>

Et à l'affichage, j'ai un rectangle à droite sans rien dedans (pas d'écriture des lignes du menu), alors que les caractéristiques sont bien précisées dans les "class" menu2, bouton et courant du css :

.menu2 {
float : left;
margin-left: 5px;
margin-top: 90px;
width: 120px;
height: 158px;
}
.bouton {
display: block;
width: 200px;
height: 20px;
background-color: #C0C0C0;
text-align: center;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: black;
text-decoration: none;
}
.bouton:hover {
background-color: #969696;
color: black;
text-decoration: underline;
}
.courant {
display: block;
width: 200px;
height: 20px;
background-color: red;
text-align: center;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: black;
text-decoration: none;
}

Au milieu, je retrouve ma page d'accueil.

A gauche, j'ai le bouton "accueil" (avec la "class" courant). Pourquoi ? Qu'est ce qu'il fait là ?

Si je clic sur un lien du menu, la page demandée s'affiche, mais le menu disparait (div menu2). Donc, à chaque changement de page, je devrais recharger toute la page, et non uniquement la div frame, comme tel était mon choix de départ.

Heuuuuu ..... j'ai du mal à m'y retrouver .....

Oui tu recharges effectivement toute la page.

Si tu ne veux pas recharger la page alors il te faut passer par du Javascript ...

Sinon pour ton problème. Il te faut faire attention avec les balises car dans mon exemple je t'ai juste mis la façon de gérer le lien actif.

Il te faut rajouter les balises

avant le menu et

après le menu.

Désolé, j'aurais dû te le faire remarqué de suite ou alors tout faire alors regarde bien ton code source et corrige les éventuels erreurs.

EDIT : Tu as mis le </div> de menu2 dans la boucle qui affiche le menu donc seul le premier element du tableau est dans menu2.

Bonjour Cedders,

Je pense donc tenter de passer par du javascript .... !

Mais en y repensant, ta solution en php pourrait être adaptée sans avoir à recharger entièrement la page, mais uniquement la div frame, en testant un pointeur qui prend la valeur de la page affichée .... ??? Quand le pointeur change, le lien associé prend la valeur "class courant", et le précédent "class bouton" !

J'ai les idées, mais pour l'écrire, c'est autre chose ....

C'est comme tu veux. Moi pour être franc j'aime pas trop le javascript et puis il y a toujours le soucis des utilisateurs qui le désactivent.

Donc ton site ne peux pas se reposer uniquement sur le javascript tu dois avoir une alternative.

On est d'accord qu'avec ta structure actuel toute la page est rechargée mais qu'elle est le problème à cela ? La page étant dans le cache, seul ce qui ichange serait réellement chargé donc ce n'est pas nécessairement "lourd" pour l'utilisateur.

Si c'est à cause du problème d'affichage de ton menu, regarde bien mon edit car le problème doit venir d'ici est après tout sera ok normalement. Dans le cas contraire regarde le code source de la page ou utilise firebug si tu es sous firefox.

Je suis d'accord avec toi pour le Javascript. Je n'aime pas trop ça non plus !!!!

Si dans mon script j'écris la div_frame puis la div_menu2, je retrouve mon menu à gauche, alors que je le veux à droite.

Si j'écris ma div_menu2 puis ma div_frame, la première n'est pas reconnue, ce qui est normal (Warning: Invalid argument supplied for foreach() in ..... ).

Je n'arrive donc pas à passer mon menu à droite !!!!

Et le résultat obtenu, en tant que rechargement des pages, aurait pu s'écrire simplement en html , non ?

N'est-il pas possible, si j'écris ce qui suit, de tester la valeur de la page,et si la page à la valeur A, le bouton associé s'affichera avec la class A' ?

<div class="menu2">
<a class="bouton" href="index_FR.php?page=accueil">Qui sommes nous</a>
<a class="bouton" href="index_FR.php?page=manifestations">Nos prochaines sorties</a>
<a class="bouton" href="index_FR.php?page=choristes">Choristes</a> .............
</div>

<div class="frame">
<?php

$pages=array(
'manifestations'=>'manifestations_FR.php',
'choristes'=>'choristes_FR.php',
'accueil'=>'accueil_FR.htm',..........

);
if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']];
else
include 'accueil_FR.htm';
?>

Merci

Bonjour,

Concernant le rechargement. Je pense pas que tu peux le faire uniquement avec du HTML. Surtout que tes liens sont en PHP donc autant en profiter pour ce servir de la valeur que tu passes dans l'url.

Un autre point, comme tu utilises de toute façon le php, affiche ton menu avec une boucle foreach comme dans l'exemple que je t'avait fait avant.

Pour ta div menu 2 qui s'aligne à gauche je cite ton code CSS :

.menu2 {
float : left;
margin-left: 5px;
margin-top: 90px;
width: 120px;
height: 158px;
}

C'est float : right pour aligner à droite ;)

Si ça ne marche pas, met ton code complet ici (pour l'index_FR et le CSS) et je te ferais un exemple plus concret qui devrait fonctionner. Tu peux aussi zipper tes fichiers et uploader le zip pour que je le télécharge (pas besoin de recréer les pages de tout ton site). La solution en php est bonne à mon avis, il ne faut pa ste mettre de barrière car ça ne marche pas.

Moi ça fait 2 semaines que je pète un plomb sur le développement d'un editeur wysiwyg cross-browser basique ^^

Salut Cedders,

Pour la div menu2, je veux bien l'aligner à gauche. Donc le "float : left;" est correct. Mais, elle s'aligne à droite ????? J'ai confondu dans mon post précédent .... désolé !

C'est sympa de ta part de vouloir m'aider, et tu peux alors télécharger le zip ici

C'est normal. Cette histoire de menu j'y avais déjà réfléchi sans vraiment trouver la solution et puis là j'en ai trouvé une donc pouvoir aider sur des projets c'est toujours bénéfiques ;)

Je regarde ton zip ;)

EDIT: Je viens de regardé ton CSS et index_FR.php : Tu positionnes tes div en "relative" donc elles vont s'afficher dans l'ordre dans lequel elle sont insérées. menu2 est alignée à droite mais à la suite de frame donc si tu veux l'avoir tout é droite, soit avant frame, tu dois insérer le menu avant. En appliquant ceci tu veras que cela marche mais que menu2 déborde sur frame. A toi de revoir ton CSS pour que cela se combine bien.

Tu peux commencé par supprimer les div inutiles. des balises <p> suffisent pour ton titre car elles se comporte comme des div. Conservent ces div pour un découpage du site (header, contenu, footer, ...).

Je vais aussi essayer de retoucher ton CSS pour que cela fonctionne.

Elle fait quelle dimension ton image du logo ?

Car elle n'est pas dans le zip ...