Besoin d'aide pour menu en css

[Fredo73]

Bonjour,

j'ai un petit soucis.
Je voudrais faire un menu en css :
Ca serait un menu avec plusieurs boutons, et lorsqu'on survol ces boutons, ils changent de couleur. Jusque là ça va, mais je voudrais que sur la page active, celle sur laquelle on se trouve, le bouton reste de la même couleur que la couleur de survol. C'est cette partie qui me manque. J'ai mis en ligne un bout d'exemple : http://ponfred.free.fr

Ci dessous le css que j'ai fait :
(en fait je me suis inspiré d'un template gratuit sur internet)

Code: Tout sélectionner

#menu {
   width: 740px;
   margin: 25px auto 5px 230px;
   padding: 0;
   background: #fff;
   float: left;
}

#menu ul {
   margin: 0;
   padding: 0;
   list-style: none;
   line-height: normal;
}

#menu li {
   float: left;
}

#menu a {
   display: block;
   width: 60px;
   height: 18px;
   padding-top: 5px;
   border-right: 4px solid #fff;
   text-decoration: none;
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: normal;
   color: #CF162F;
   background-color: #C1C1C1;
}
#menu a:hover, #menu .current_page_item a   {
   text-decoration: none;
   background-color: #FFF;
}
#menu .current_page_item a {
   background-color: #000;
}

Si quelqu'un avait une idée, je suis preneur.

Merci d'avance

Fred

[forty]

tu as une classe current_page_item mais elle n'est pas utilisée.
il faut un truc du style (si la page courante est la 2) :

Code: Tout sélectionner

<div id="menu">
      <ul>
          <li><a href="index.html">Page 1</a></li>
          <li class="current_page_item"><a href="page2.html">Page 2</a></li>
          <li><a href="page3.html">Page 3</a></li>
        </ul>
</div>


[Fredo73]

Oui mais comme ça il faut rajouter <li class="current_page_item"> dans chaque page, dans la ligne correspondante.

J'aurais voulu que ça soit automatique, grace à la feuille de style.

[forty]

tu dois pouvoir affecter la class en javascript

[Fredo73]

Je pense que je vais avoir du mal.
Je suis assez novice dans ces domaines.
Comment ça marche pour affecter une classe en javascript ?
Peut-être est-ce un peu chaud à expliquer dans le cadre du forum ?
Je vais essayer de trouver des explications la dessus.

Par contre si quelqu'un à quand même une idée me permettant de gérer mon problème uniquement en CSS, je suis toujours à l'écoute et preneur ...

Fred

[forty]

en php c'est pas très compliqué à faire. en css c'est impossible (ou alors tu devras modifier le css pour chaque page)

[nickargall]

+1, en CSS uniquement ce ne sera pas possible.
Ce que tu dois faire en PHP ou en Javascript, c'est identifier la page ou tu te trouves et ajouter dynamiquement class="current_page_item" à l'item désignant la page ou tu te trouves.

[Fredo73]

Merci à nickargall et forty pour vos réponses.

Sans vouloir abuser de votre patience, savez-vous où je pourrai trouver un script js ou php qui fait ça ? Parce-que mon soucis majeur c'est mon manque (ou plutôt absence) de compétence dans ces domaines ...
Sinon je m'en tiendrai à rajouter une classe à la ligne correspondante sur chaque page comme me le suggérait forty hier ...

Merci d'avance.

Fred

[forty]

en php tu peux faire :

Code: Tout sélectionner

<div id="menu">
      <ul>
          <li<?php if ($_SERVER['SCRIPT_URL'] == '/index.html') echo ' class="current_page_item"'; ?>><a href="index.html">Page 1</a></li>
          <li<?php if ($_SERVER['SCRIPT_URL'] == '/page2.html') echo ' class="current_page_item"'; ?>><a href="page2.html">Page 2</a></li>
          <li<?php if ($_SERVER['SCRIPT_URL'] == '/page3.html') echo ' class="current_page_item"'; ?>><a href="page3.html">Page 3</a></li>
        </ul>
</div>


[Fredo73]

j'ai mis le code que tu m'as donné à la place de l'ancien, et appelé le fichier php à la place de html.
Et ça ne marche pas.
Comme dit plus haut, mes connaissances dans le domaine du php sont inexistantes.

Je vais essayé de m'en tenir à mon niveau : faire une modif de code à chaque nouvelle page ...
Ou peut être que le menu ne changera pas de couleur.
Un jour peut-être je serai grand (en réalisation de site) et j'aurai les notions de base de php.

En tout cas je te remercie pour ta patience et le temps que tu as passé à lire mes posts et y répondre.

Cdt

Fred

[forty]

si tu as renommé le fichier il faut aussi modifier l'url du test

[Peltios]

Bonjour je sais pas si ta résolu ton problème mais j ai quelque chose qui fonctionne en css qui pourrais peut être te convenir.

J ai pris ton css et ton code source de ta page! je met le code css et ensuite le html

Code: Tout sélectionner

@charset "UTF-8";
body,td,th {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000;
}
body {
   background-color: #fff;
   margin-left: 5px;
   margin-top: 5px;
}

a {
   text-decoration: none;
}
a:link {
   color: #999;
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #999;
}
a:hover {
   text-decoration: none;
   color: #CCC;
}
a:active {
   text-decoration: none;
   color: #F00;
}
h1 {
   font-size: 16px;
   color: #333;
   font-weight: lighter;
}
h2 {
   font-size: 14px;
   color: #333;
}
h3 {
   font-size: 12px;
   color: #666;
}
h4 {
   font-size: 10px;
   color: #999;
}
h5 {
   font-size: 10px;
   color: #CCC;
}
/* CSS Document */


#menu1 {
   width: 740px;
   margin: 25px auto 5px 230px;
   padding: 0;
   background: #fff;
   float: left;
}

#menu1 ul {
   margin: 0;
   padding: 0;
   list-style: none;
   line-height: normal;
}

#menu1 li {
   float: left;
}

#menu1 a {
   display: block;
   width: 60px;
   height: 18px;
   padding-top: 5px;
   border-right: 4px solid #fff;
   text-decoration: none;
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: normal;
   color: #CF162F;
   background-color: #C1C1C1;
}
#menu1 a.index:hover   {
   text-decoration: none;
   background-color: blue;
}
#menu1 a.page2:hover   {
   text-decoration: none;
   background-color: yellow;
}
#menu1 a.page3:hover   {
   text-decoration: none;
   background-color: green;
}
#menu1 .current_page_item a {
   background-color: #000;}
#menu1  a.index {
   background-color: blue;
}   

#menu2 {
   width: 740px;
   margin: 25px auto 5px 230px;
   padding: 0;
   background: #fff;
   float: left;
}

#menu2 ul {
   margin: 0;
   padding: 0;
   list-style: none;
   line-height: normal;
}

#menu2 li {
   float: left;
}

#menu2 a {
   display: block;
   width: 60px;
   height: 18px;
   padding-top: 5px;
   border-right: 4px solid #fff;
   text-decoration: none;
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: normal;
   color: #CF162F;
   background-color: #C1C1C1;
}
#menu2 a.index:hover   {
   text-decoration: none;
   background-color: blue;
}
#menu2 a.page2:hover   {
   text-decoration: none;
   background-color: yellow;
}
#menu2 a.page3:hover   {
   text-decoration: none;
   background-color: green;
}
#menu2 .current_page_item a {
   background-color: #000;
   }
#menu2  a.page2 {
   background-color: yellow;
}


#menu3 {
   width: 740px;
   margin: 25px auto 5px 230px;
   padding: 0;
   background: #fff;
   float: left;
}

#menu3 ul {
   margin: 0;
   padding: 0;
   list-style: none;
   line-height: normal;
}

#menu3 li {
   float: left;
}

#menu3 a {
   display: block;
   width: 60px;
   height: 18px;
   padding-top: 5px;
   border-right: 4px solid #fff;
   text-decoration: none;
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: normal;
   color: #CF162F;
   background-color: #C1C1C1;
}
#menu3 a.index:hover   {
   text-decoration: none;
   background-color: blue;
}
#menu3 a.page2:hover   {
   text-decoration: none;
   background-color: yellow;
}
#menu3 a.page3:hover   {
   text-decoration: none;
   background-color: green;
}
#menu3 .current_page_item a {
   background-color: #000;
   }
#menu3  a.page3 {
   background-color: green;
}

HTML index.html

Code: Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="menu1">
      <ul>
          <li><a class="index" href="index.html">Page 1</a></li>
          <li><a class="page2" href="page2.html">Page 2</a></li>

          <li><a class="page3" href="page3.html">Page 3</a></li>
        </ul>
</div>
</body>
</html>

HTML page2.html

Code: Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="menu2">
      <ul>
          <li><a class="index" href="index.html">Page 1</a></li>
          <li><a class="page2" href="page2.html">Page 2</a></li>

          <li><a class="page3" href="page3.html">Page 3</a></li>
        </ul>
</div>
</body>
</html>

HTML page3.html

Code: Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="menu3">
      <ul>
          <li><a class="index" href="index.html">Page 1</a></li>
          <li><a class="page2" href="page2.html">Page 2</a></li>

          <li><a class="page3" href="page3.html">Page 3</a></li>
        </ul>
</div>
</body>
</html>

Voila moi ca fonctionne assez bien je suis sur firefox!

peltios@live.fr

[Fredo73]

Merci beaucoup pour ce message et ce long code.
Effectivement ça marche, mais ca ne change pas mon pb de départ : dans tous les cas ça fait une ligne à changer à chaque page.
Et le but, c'est de ne pas avoir à toucher au code à chaque nouvelle page. En tout cas, un grand merci pour le temps passé à cette réponse.