Besoin d'aide pour menu en css

Fredo73 · 28 Septembre 2009

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:

#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 · 28 Septembre 2009

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:

<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 · 28 Septembre 2009

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 · 28 Septembre 2009

tu dois pouvoir affecter la class en javascript

Fredo73 · 29 Septembre 2009

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 ... :wink:

Fred

forty · 29 Septembre 2009

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 · 29 Septembre 2009

+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 · 29 Septembre 2009

Merci à nickargall et forty pour vos réponses. :wink:

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 · 29 Septembre 2009

en php tu peux faire :

Code:

<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 · 29 Septembre 2009

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. :wink:

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 · 29 Septembre 2009

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

Peltios · 30 Septembre 2009

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:

@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:

<!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:

<!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:

<!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 · 30 Septembre 2009

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. :wink: