Problème de boutons enfoncés

[tulipe84]

Bonjour!

J'ai un soucis de boutons... Je cherche un code pour que lorsque je suis sur une page de mon site, le bouton correspondant reste enfoncé. Donc que lorsque la "page1" est active dans mon site, que le "bouton1" soit actif, quand c'est la page2, le bouton2, etc. etc.

Est-ce que qqn peut me dire ce que j'ai fait de faux ou oublié dans mon code svp? Car cela ne fonctionne pas et après plusieurs essais, je ne sais vraiment plus ou chercher o_O :

Code :

1
2
3
4
5
6
7
8
 
</div>
<div id="menu">
<ul>
<li><a href="page1.php" class="btn1" <?php if($page == "page1") { echo "id = btn1_actif"; }?>></a></li>
<li><a href="page2.php" class="btn2" <?php if($page == "page2") { echo "id = btn2_actif"; }?>></a></li>
<li><a href="page3.php" class="btn3" <?php if($page == "page3") { echo "id = btn3_actif"; }?>></a></li>
</div>

Sachant que dans le titre de chaque page j'ai inscrit

Code :

1
2
 
<?php $page='page1'?>, <?php $page='page2'?>

et ainsi de suite.

Dans le CSS j'ai mis:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
#btn1_actif
{
	background-image:url("images/btn1_actif.png");
	background-repeat:no-repeat;
}
 
#btn2_actif
{
	background-image:url("images/btn2_actif.png");
	background-repeat:no-repeat;
}
 
#btn3_actif
{
	background-image:url("images/btn3_actif.png");
	background-repeat:no-repeat;
}

Les boutons s'affichent correctement, par contre aucun ne reste "enfoncé" lorsque je suis sur la page correspondante.

Si qqn a une idée, ce serait pas de refus.

Merci et bonne journée!

[jreaux62]

Bonjour,
</ul> manquant

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	<style type="text/css">
#btn1_actif
{
	background:url("images/btn1_actif.png") no-repeat;
}
#btn2_actif
{
	background:url("images/btn2_actif.png") no-repeat;
}
#btn3_actif
{
	background:url("images/btn3_actif.png") no-repeat;
}
	</style>

Mais surtout :

Code :

1
2
3
4
5
6
7
<div id="menu">
<ul>
	<li><a href="page1.php" class="btn1" <?php if($page == "page1") { echo ' id="btn1_actif"'; }?>>page1</a></li>
	<li><a href="page2.php" class="btn2" <?php if($page == "page2") { echo ' id="btn2_actif"'; }?>>page2</a></li>
	<li><a href="page3.php" class="btn3" <?php if($page == "page3") { echo ' id="btn3_actif"'; }?>>page3</a></li>
</ul>
</div>

ps : afficher le code source généré t'aurait permis de voir l'erreur.

[jreaux62]

Perso, j'aurais interverti class et id (c'est plus logique) :

Code :

1
2
3
4
5
6
7
8
	<style type="text/css">
#btn1 { /* ... */ }
#btn2 { /* ... */ }
#btn3 { /* ... */ }
.btn1_actif { background:url("images/btn1_actif.png") no-repeat; }
.btn2_actif { background:url("images/btn2_actif.png") no-repeat; }
.btn3_actif { background:url("images/btn3_actif.png") no-repeat; }
	</style>

Code :

1
2
3
4
5
6
7
<div id="menu">
<ul>
	<li><a href="page1.php" id="btn1"<?php if($page == "page1") { echo ' class="btn1_actif"'; }?>>page1</a></li>
	<li><a href="page2.php" id="btn2"<?php if($page == "page2") { echo ' class="btn2_actif"'; }?>>page2</a></li>
	<li><a href="page3.php" id="btn3"<?php if($page == "page3") { echo ' class="btn3_actif"'; }?>>page3</a></li>
</ul>
</div>

[Benjamin Delespierre]

Avec du css, sert-toi de la pseudo classe :active. et mets une classe supplémentaire pour setter cette propriété manuellement:

Code :

1
2
3
4
5
6
7
8
9
 
a.btn {
  border: 2px outset black;
}
 
a.btn:active,
a.abtn {
  border: 2px inset black;
}

Code :

1
2
3
 
<a class="btn">Un boutton qui s'enfonce au click</a>
<a class="abtn">Un boutton déjà enfoncé</a>

[tulipe84]

Envoyé par jreaux62

Bonjour,
</ul> manquant

Code :

Mais surtout :

Code :

ps : afficher le code source généré t'aurait permis de voir l'erreur.

Hello!

Merci pour ta réponse. J'ai essayé avec tes modifications mais cela ne fonctionne toujours pas... Je dois faire qqch de faux, je ne comprends pas pourquoi malgré tous les essais rien ne fonctionne . Qu'entends-tu par "afficher le code source généré"? (je suis débutante en développement, désolée si la question est un peut bête...)

[tulipe84]

Envoyé par Benjamin Delespierre

Avec du css, sert-toi de la pseudo classe :active. et mets une classe supplémentaire pour setter cette propriété manuellement:

Code :

Code :

Hello!

Merci pour ta réponse! Déjà testé avec le CSS mais cela ne fonctionne pas non plus. Je vais encore tester ta méthode pour en avoir le coeur net. Je reviens plus tard avec le résultat

Bon après-midi!

[jreaux62]

Envoyé par tulipe84

Je dois faire qqch de faux, je ne comprends pas pourquoi malgré tous les essais rien ne fonctionne

Pour t'aider, il faudrait qu'on voit ton code !

Envoyé par tulipe84

Qu'entends-tu par "afficher le code source généré"?

C'est le code html créé (la page qui s'affiche)
-> navigateur IE -> onglet "page" -> "afficher la source"
-> navigateur firefox -> menu "affichage" -> "Code source de la page"

[tulipe84]

En fait c'est ok, cela fonctionne maintenant. La solution était la suivante:

Code :

1
2
3
4
5
6
7
8
 
<div id="menu">
<ul>
<li <?php if ($page == "page1" )  {echo 'id="page1_active"';}  else{echo 'id="btn_page1"';} ?>><a href="page1.php"></a></li>
<li <?php if ($page == "page2"){echo 'id="page2_active"';} else{echo 'id="btn_page2"';} ?>><a href="page2.php"></a></li>
<li <?php if ($page == "page3"){echo 'id="page3_active"';} else{echo 'id="btn_page3"';} ?>><a href="page3.php"></a></li>
</ul>
</div>

et en CSS:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
#btn_page1 a
{
	display:block;
	border:none;
	background:url(images/btn_page1.png);
	background-repeat:no-repeat;
	width:96px;
	height:51px;
}
 
#btn_page1:hover
{
	background:url(images/btn_page1_survol.png);
	background-repeat:no-repeat;
}
 
#page1_active
{
	display:block;
	border:none;
	background:url(images/btn_page1_survol.png);
	background-repeat:no-repeat;
	width:96px;
	height:51px;
}

et ainsi de suite pour les autres pages.

Et bien sûr <?php $page='page1'?> etc. dans le titre de chaque page.

Merci pour votre aide, cela m'a mis sur la voie, et cela m'a aussi permis de corriger des erreurs que je n'avais pas vu avant!

A + et bonne journée!

[Théocrite]

Pour rendre ton code plus lisible, tu devrais utiliser l'opérateur tertiaire ? :

Code :

1
2
3
4
5
6
7
8
 
<div id="menu">
  <ul>
    <li <?php if ($page == "page1" )  {echo 'id="page1_active"';}  else{echo 'id="btn_page1"';} ?>><a href="page1.php"></a></li>
    <li <?php if ($page == "page2"){echo 'id="page2_active"';} else{echo 'id="btn_page2"';} ?>><a href="page2.php"></a></li>
    <li <?php if ($page == "page3"){echo 'id="page3_active"';} else{echo 'id="btn_page3"';} ?>><a href="page3.php"></a></li>
</ul>
</div>

devient :

Code :

1
2
3
4
5
6
7
8
 
<div id="menu">
  <ul>
    <li <?php echo 'page1'==$page?'id="page1_active"':'id="btn_page1"'; ?>><a href="page1.php"></a></li>
    <li <?php echo 'page2'==$page?'id="page2_active"':'id="btn_page2"'; ?>><a href="page2.php"></a></li>
    <li <?php echo 'page3'==$page?'id="page3_active"':'id="btn_page3"'; ?>><a href="page3.php"></a></li>
</ul>
</div>

De manière générale, essaye aussi d'écrire les comparaisons dans l'ordre valeur == variable :

valeur == variable => vrai ou faux selon le cas
variable == valeur => même chose

Par contre en cas d'erreur (si tu oublies de mettre un = dans ton test) :
variable = valeur => affection
valeur = variable => erreur (une string ne peux pas subir d'affection de valeur)

[Atomya Rise]

Un petit exemple...

Tout d'abord, on défini le php qui va établir la fonction de "page" :

Code php :

1
2
3
4
function onglet_actif($onglet) {
	$actif = ($_SERVER["REQUEST_URI"] == "/" && $onglet == 0) || ($_SERVER["REQUEST_URI"] == "/page1.php" && $onglet == 0) || ($_SERVER["REQUEST_URI"] == "/page2.php" && $onglet == 1) || ($_SERVER["REQUEST_URI"] == "/page3.php" && $onglet == 2);
	return $actif ? "_actif" : "";
}

Ensuite le html qui recevra dans l'id l'onglet actif si on est sur cette page...

Code html :

1
2
3
4
5
6
 
<ul>
<li><a href="page1.php" id="btn1<?php echo onglet_actif(0); ?>"></a></li>
<li><a href="page2.php" id="btn2<?php echo onglet_actif(1); ?>"></a></li>
<li><a href="page3.php" id="btn3<?php echo onglet_actif(2); ?>"></a></li>
</ul>

Et pour finir, le css :

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
#btn1_actif
{
	background-image:url("images/btn1_actif.png");
	background-repeat:no-repeat;
}
 
#btn2_actif
{
	background-image:url("images/btn2_actif.png");
	background-repeat:no-repeat;
}
 
#btn3_actif
{
	background-image:url("images/btn3_actif.png");
	background-repeat:no-repeat;
}

[Avalion]

Moi ce que je vois surtout c'est ca

Envoyé par tulipe84

Bonjour!

Code :

Il manque peut-être les ';' !

[Théocrite]

Envoyé par Avalion

Moi ce que je vois surtout c'est ca


Il manque peut-être les ';' !

Pas forcément, le ; n'est pas obligatoire pour la dernière instruction avant la balise fermante, ce qui est le cas ici.

Cependant, les conventions de codage choisies dans l'application peuvent être de mettre systématiquement le ;.

Pour ma part, il m'arrive de l'omettre uniquement dans mes scripts de vue pour des raisons de lisibilité.

[Marc3001]

Envoyé par Théocrite

De manière générale, essaye aussi d'écrire les comparaisons dans l'ordre valeur == variable :

valeur == variable => vrai ou faux selon le cas
variable == valeur => même chose

Par contre en cas d'erreur (si tu oublies de mettre un = dans ton test) :
variable = valeur => affection
valeur = variable => erreur (une string ne peux pas subir d'affection de valeur)

Pas bête du tout ça...
Sinon NetBeans repère ce genre d'erreur et met un warning...