Aspect de cellule indiquant la page où l'on se trouve

**Gilles17** · 15/01/2007, 01h55

Bonjour

Je vais essayer d'être clair

Mon site comporte 4 frames (top gauche, top droite, gauche et droite)

dans la top gauche : c'est le logo
dans la top droite : le bandeau
dans la gauche : le menu
dans la droite : la page principale

Le menu est une table

Les différentes frames sont gérées par des css (obligé car les body sont différents) - si vous ayez une idée pour avoir 4 types de body différents sur une même css je suis preneur aussi

Ma question est :

Lorsque je clique dans une cellule du menu pour afficher une page dans la frame principale, est-il possible que cette cellule change de couleur pour indiquer que c'est cette partie que je suis en train de lire (et bien sûr quand on change de cellule, qu'elle repasse en "normal") ?

J'espère avoir été clair

Merci d'avance

et Bonne Année à Toutes et Tous

**Strix** · 15/01/2007, 08h11

Salut

Envoyé par Gilles17

Les différentes frames sont gérées par des css (obligé car les body sont différents) - si vous ayez une idée pour avoir 4 types de body différents sur une même css je suis preneur aussi

Ben faire 4 CSS avec le Body qui change

(ou 1 CSS principale et 4 "petites" Body)

Envoyé par Gilles17

Lorsque je clique dans une cellule du menu pour afficher une page dans la frame principale, est-il possible que cette cellule change de couleur pour indiquer que c'est cette partie que je suis en train de lire (et bien sûr quand on change de cellule, qu'elle repasse en "normal") ?

Pour ça va falloir passer par du javascript car en css tu ne peut pas avoir les 4 états (normal/survol/"appuyé"/"En cours").

**blueice** · 15/01/2007, 10h53

Oui bien sûr en CSS, c'est tout à fait faisable, il suffit d'indiquer un état particulier pour le lien de la cellule.

Exemple :

Code html :

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

<a href="#" id="current">Ton lien</a>

**Gilles17** · 15/01/2007, 12h59

Envoyé par blueice

Oui bien sûr en CSS, c'est tout à fait faisable, il suffit d'indiquer un état particulier pour le lien de la cellule.

Exemple :

Code html :

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

<a href="#" id="current">Ton lien</a>

Merci de ta réponse

Donc pour être sûr et si je comprends bien :

dans la .css je fais un "current" avec l'aspect de la cellule que je désire et je l'appelle dans le html de la page de la façon que tu indiques ?

il devra être sous la forme :

Code :

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

1
2
3
4
5
a.current { 
etc;
etc;
etc;
}

ou sous une autre forme ?

Merci de votre rapidité

**Strix** · 15/01/2007, 13h07

Je crois que je suis allez trop vite dans ma réponse.

Tu veux que ce soit indiquer comment ?

J'étais parti sur des images (c'est là où j'ai eu un soucis et en plus j'ai pas de frames)

Sorry

**MasterOfChakhaL** · 15/01/2007, 13h09

Salut,

Pour faire référence à un id dans ton css, il faut préfixer par #

Code :

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

a#current

Cela dit, j'aurais tendance a croire qu'il serait mieux de cibler ton lien via une classe plutôt qu'un id.

En effet, le fait que ton lien corresponde à la page courante ne le définit pas spécialement (ce qui est le but de l'attribut id). Dans ce cas, le lien devient:

Code :

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

<a href="#" class="current" >le lien</a>

alors, tu fais référence à ton élément de cette manière

Code :

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

a.current

De plus, je te suggère de remplacer ton lien par un span par exemple.
Je trouve toujours déroutant dans un menu le fait de pouvoir cliquer sur l'item qui correspond à la page courante.
Tu vois que tu peux cliquer, tu penses que ca va t'amener ailleurs, et finalement, tu retombes sur la même page...

**blueice** · 15/01/2007, 13h31

En effet, le fait que ton lien corresponde à la page courante ne le définit pas spécialement (ce qui est le but de l'attribut id). Dans ce cas, le lien devient:

Je ne t'ai pas compris là ?
Son id sera unique et son aspect aussi, celà indiquera à l'internaute où il se trouve... non ?
A chaque page l'id sera sur un lien différent !

Exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

avec le css qui va bien :

Code css :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
 
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
 
#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
 
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
 
#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
 
#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}

**Gilles17** · 15/01/2007, 14h02

A y est je suis perdu

Mon menu est défini ainsi :

Code html :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<table width="145" border="0" cellspacing="3" cellpadding="3">
	<tr>
		<td class="row1"><a href="frame_accueil.html" target="main">Accueil</a></td>
	</tr>
	<tr>
		<td>
			<hr>
		</td>
	</tr>
	<tr>
		<td class="row1"><a href="frame_1.html" target="main">Page 1</a></td>
	</tr>
	<tr>
		<td class="row1"><a href="frame_2.html" target="main">Page 2</a></td>
	</tr>
	<tr>
		<td class="row1"><a href="frame_3.html" target="main">Page 3</a></td>
	</tr>
	<tr>
		<td>
			<hr>
		</td>
	</tr>
	<tr>
		<td class="row1"><a href="frame_4.html" target="main">Page 4</a></td>
	</tr>
	<tr>
		<td class="row1"><a href="frame_5.html" target="main">Page 5</a></td>
	</tr>
	<tr>
		<td>
			<hr>
		</td>
	</tr>
	<tr>
		<td class="row1"><a href="frame_6.html" target="main">Page 6</a></td>
	</tr>
	<tr>
		<td class="row1"><a href="frame_7.html" target="main">Page 7</a></td>
	</tr>
	<tr>
		<td class="row1"><a href="frame_8.html" target="main">Page 8</a></td>
	</tr>
	<tr>
		<td>
			<hr>
		</td>
	</tr>
</table>

Code css :

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

1
2
3
4
5
6
7
td.row1 {
	background-color: #b0ffda;
	border-left : 1px solid #006a00;
	border-top : 1px solid #006a00;
	border-right : 1px solid #ffffff;
	border-bottom : 1px solid #ffffff;
}

Donc que devrais-je faire pour que la cellule devienne :

Code css :

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

1
2
3
4
5
6
7
{
	background-color: #940000;
	border-left : 1px solid #ffffff;
	border-top : 1px solid #ffffff;
	border-right : 1px solid #006a00;
	border-bottom : 1px solid #006a00;
}

quand la page est active, et repasse en row1 quand on est sur une autre page

ou alors faut-il faire un menu par page active ?

Merci

**blueice** · 15/01/2007, 14h31

Tiens un exemple complet, à toi de finir de l'adapter

Code html :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<!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>Untitled Document</title>
<style type="text/css">
<!--
#navcontainer { width: 200px; }
 
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
 
}
 
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #b0ffda;
border-bottom: 1px solid #eee;
}
 
#navcontainer a:link, #navlist a:visited
{
color: navy;
text-decoration: none;
}
 
#navcontainer a:hover
{
background-color: navy;
color: #fff;
}
#navcontainer li a#current {
background-color:gray;
}
-->
</style></head>
 
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
<li><a href="#">Lien 5</a></li>
</ul>
</div>
</body>
</html>

**Gilles17** · 15/01/2007, 14h44

Merci bien

Je viens de faire l'essai

dans le code indiqué, le lien 1 est bien d'une autre couleur, donc c'est parfait
mais quand je passe au lien 2 rien ne se passe :
Le lien 1 reste d'une autre couleur et le lien 2 ne change pas de couleur

Soit j'ai pas compris un truc ou alors faut faire un menu par lien et je ne le souhaite pas (si possible)

Merci

**blueice** · 15/01/2007, 14h59

Si tu ne comptes pas changer de page en cliquant sur un autre menu, dans ce cas il faudra passer par du JS pour modifier l'affichage.
Je ne vois pas d'autre moyen.

Si tu comptes changer de pages en cliquant sur le menu, dans ce cas si tu ne souhaites pas modifier le menu pour chaque page, tu peux le coupler avec du PHP pour déterminer automatiquement où l'internaute se trouve et modifier l'affichage du menu.

**Gilles17** · 15/01/2007, 15h03

Envoyé par blueice

Si tu ne comptes pas changer de page en cliquant sur un autre menu, dans ce cas il faudra passer par du JS pour modifier l'affichage.
Je ne vois pas d'autre moyen.

Si tu comptes changer de pages en cliquant sur le menu, dans ce cas si tu ne souhaites pas modifier le menu pour chaque page, tu peux le coupler avec du PHP pour déterminer automatiquement où l'internaute se trouve et modifier l'affichage du menu.

Le menu est dans une fram et je ne souhaite pas changer de menu pour chaque lien

donc le solution "tu peux le coupler avec du PHP pour déterminer automatiquement où l'internaute se trouve et modifier l'affichage du menu." me semble la + à même de correspondre à ce que je souhaite ... mais je comprends encore moins le php que le css ou html

.... je vais poster dans le forum adéquat alors, à moins que tu sâches comment faire

merci bcp

**MasterOfChakhaL** · 15/01/2007, 15h03

Envoyé par blueice

Je ne t'ai pas compris là ?
Son id sera unique et son aspect aussi, celà indiquera à l'internaute où il se trouve... non ?
A chaque page l'id sera sur un lien différent !

Techniquement, ta solution ne me pose pas de problème. C'est plutot au niveau sémantique.
Petit exemple.
un site sur la pêche a la ligne qui contient une page sur les hamecons, une page sur les moulinets et une sur mes plus belles prises.
je propose le menu suivant:

Code :

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

1
2
3
4
5
<ul id="main_menu">
  <li><a id="hamecon" href="/hamecon.html">Tout sur les hameçons</a></li>
  <li><a id="moulinet" href="/moulinet.html">Tout sur les moulinets</a></li>
  <li><a id="prise" href="/prise.html">Mes plus belles prises</a></li>
</ul>

Cette structure me permet si je le veux, de mettre une petite icone devant mes liens qui serait spécifique a chacune des pages. Et ceci, avant de se poser la question de savoir sur quelle page on est.
Quelle que soit la page sur laquelle je suis, mes id restent les même. Et cela me semble cohérent puisque, que je sois entrain ou non de lire telle page, l'id conserve le lien avec la page pointée.

En revanche, le fait d'être la page courante me semble être une donnée générique (chaque page peut devenir la page courante), elle ne caractérise pas la page. C'est pourquoi il me semble plus logique de transcrire ceci dans une classe plutot que dans un id.
Je crois que la différence entre id et classe va plus loin que 'utilisation unique' / 'utilisation multiple'

@Gilles17:
Manifestement, tu utilises les frames, donc ton menu ne sera pas rechargé au cours de son utilisation.
Il va falloir que tu t'orientes vers javascript pour modifier dynamiquement ton menu.
Ou alors, que tu abandonnes le principe des frames en répétant le menu sur chaque page (avec un langage côté serveur, c'est facilement automatisable)

**blueice** · 15/01/2007, 15h15

Envoyé par MasterOfChakhaL

Cette structure me permet si je le veux, de mettre une petite icone devant mes liens qui serait spécifique a chacune des pages. Et ceci, avant de se poser la question de savoir sur quelle page on est.
Quelle que soit la page sur laquelle je suis, mes id restent les même. Et cela me semble cohérent puisque, que je sois entrain ou non de lire telle page, l'id conserve le lien avec la page pointée.

En revanche, le fait d'être la page courante me semble être une donnée générique (chaque page peut devenir la page courante), elle ne caractérise pas la page. C'est pourquoi il me semble plus logique de transcrire ceci dans une classe plutot que dans un id.
Je crois que la différence entre id et classe va plus loin que 'utilisation unique' / 'utilisation multiple'

Tout à fait d'accord avec toi

Envoyé par Gilles17

mais je comprends encore moins le php que le css ou html

Dans ce cas tu vas avoir beaucoup de mal à faire ce que tu veux, même avec une solution donnée, tu devras mettre la main à la pâte pour adapter.
Bon courage !

**Gilles17** · 15/01/2007, 16h28

Merci pour vos réponses

je crois tout simplement que je vais abandonner cette idée

devant l'ardeur de la tâche

Encore merci

Aspect de cellule indiquant la page où l'on se trouve

HTML

Discussions similaires

Partager

Partager