Problème de boutons enfoncés

**tulipe84** · 30/08/2011, 13h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et ainsi de suite.

Dans le CSS j'ai mis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

Invité · 30/08/2011, 13h44

Bonjour,
</ul> manquant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Invité · 30/08/2011, 13h54

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 30/08/2011, 14h09

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**tulipe84** · 31/08/2011, 14h30

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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!

**tulipe84** · 31/08/2011, 14h28

Envoyé par jreaux62

Bonjour,
</ul> manquant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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...)

Invité · 31/08/2011, 14h43

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** · 31/08/2011, 17h36

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**tdutrion** · 31/08/2011, 18h43

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

**Avalion** · 08/09/2011, 16h12

Moi ce que je vois surtout c'est ca

Envoyé par tulipe84

Bonjour!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Il manque peut-être les ';' !

**tdutrion** · 08/09/2011, 16h21

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é.

Problème de boutons enfoncés

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager