5568 sujets

Sémantique web et HTML

[Résolu] Créer des styles "en-cours"' pour la navigation.

Salux à tous,

j'ai lu attentivement (sans doute pas assez) la page traitant des liens en-cours.
J'ai donc appliqué le principe sur une page d'essai de mon site.
Mais j'ai un souci de compréhension.

L'exemple pris sur le site montre que la class "en-cours" est dans la ligne "Contact" 

<a href="/apropos.html">À propos</a> &#8901;
<a href="/contact.html" class="en-cours">Contact</a> &#8901;
<a href="/mentions.html">Mentions légales</a>


et le styles CSS correspondant pour les "en-cours est : 
/* Styles pour la rubrique en cours */
#navigation #en-cours a {
	color: black;
}


Bon, déjà il y a une différence entre la "class" dans le html et l'id dans le css, mais bon, ça il faut le changer je pense.
Mon souci est comment faire pour que tous les liens qui sont "en-cours" (donc un lien à la fois) soient marqués comme "en-cours" quand je suis sur le page.
En somme, comment se déplace le "en-cours" dans le page html ?
Suis-je clair ? Smiley confus
Parce qu'avec un lien marqué en "en-cours" ça fonctionne, mais les autres ?
Comment je peux faire ?

J'ai fait des essais en insérant l'id "en-cours" dans le premier lien et en créant le styles :
styles : 
/*Styles pour lien en-cours*/
#menu #en-cours0 a  {
 background: url(bleucla_241.jpg);
 border: 2px inset #FAEBD7;
}


code html : 
<div id="menu">
		  <div class="sous_menu">
		    <h3>Menu principal</h3>
		    <ul>
		       <li id="en-cours0"><a href="index.html" title="Ici c'est l'accueil">Accueil</a></li>
		       <li><a href="quoi_fuste.html" title="Mais c'est quoi au juste une fuste ? C'est quoi ce mot ?">Qu'est-ce qu'une&nbsp;fuste&nbsp;?</a></li>
		       <li><a href="qui_fabrique.html" title="Et qui fabrique les fustes, c'est des hommes, des machines ?">Qui fabrique les fustes&nbsp;?</a></li>
                       <li><a href="fustier.html" title="Le fustier Raphaël HERVIER est celui qui fabrique les fustes">Le fustier</a></li>
		       <li><a href="techni_outils.html" title="Un peu de technique pour comprendre comment construire une fuste.">Technique et outils</a></li>
		       <li><a href="techni_out_suite.html" title="Toujours de la technique et oui, une page c'est pas assez pour tout expliquer.">Technique et outils suite</a></li>
		       <li><a href="photos_details.html" title="Des photos de certains détails pour mieux comprendre comment ça fonctionne.">Photos et détails</a></li>
		       <li><a href="questions.html" title="Pour répondre aux questions les plus importantes que vous ne manquerez pas de vous posez.">Questions sur les fustes</a></li>
		       <li><a href="quel_bois.html" title="Mais qu'est-ce qu'il faut comme essence de bois pour construire ces belles maisons ?">Quel bois choisir&nbsp;?</a></li>
		       <li><a href="diffe_fustes.html" title="Quelque photos de fustes pour voir un peu ce que l'on peut construire.">Différentes fustes</a></li>
	           </ul>
		  </div>


Pour un lien cela fonctionne, mais comment faire lorsque je passe sur un autre lien ?
Parce que quand je fais cela sur les autres liens, ça ne fonctionne pas, tous les liens ont l'image de fond de "en-cours".

J'espère être clair dans ma question.

Merci de vos conseil et de votre aide.
Modifié par Muad'Dib (07 Feb 2009 - 12:58)
Muad'Dib a écrit :
Bon, déjà il y a une différence entre la "class" dans le html et l'id dans le css, mais bon, ça il faut le changer je pense.

La différence vient du fait que l'exemple de CSS correspond au deuxième exemple de code HTML, pas au premier. Ici tu cites le premier.

Muad'Dib a écrit :
En somme, comment se déplace le "en-cours" dans le page html ?
Suis-je clair ? Smiley confus

Ta question est parfaitement claire. Et la réponse est écrite, de manière parfaitement claire aussi, dans l'article que tu as lu un peu rapidement. Smiley cligne

Pour information, j'ai pris le temps de rédiger cet article pour ne pas avoir à expliquer le concept à chaque fois sur le forum. S'il faut faire de la redite parce que l'information ne passe pas, c'est soit que le lecteur est un peu inattentif, soit que j'ai mal expliqué ça dans l'article. Smiley sweatdrop
Modifié par Florent V. (07 Feb 2009 - 10:56)
Pour reprendre ton exemple de code HTML, voici le menu sans marquage particulier:
<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Qu'est-ce qu'une&nbsp;wapitipi&nbsp;?</a></li>
	<li><a href="#">Qui fabrique les wapitipi&nbsp;?</a></li>
	<li><a href="#">Le wapitipitier</a></li>
	<li><a href="#">Technique et outils</a></li>
	<li><a href="#">Technique et outils suite</a></li>
	<li><a href="#">Photos et détails</a></li>
	<li><a href="#">Questions sur les wapitipi</a></li>
	<li><a href="#">Quel bois choisir&nbsp;?</a></li>
	<li><a href="#">Différentes wapitipi</a></li>
</ul>

Maintenant, si on est sur la page d'accueil et qu'on veut mettre en valeur le lien correspondant, on va avoir besoin dans le code HTML d'une différence quelle qu'elle soit pour ce lien, vis-à-vis des autres liens du menu. Ça peut être un SPAN placé dans le A ou autour du A, une classe sur le A, une classe sur le LI, un identifiant sur le A, un identifiant sur le LI, l'utilisation d'un STRONG à la place du A... bref, tout ce qui nous permet d'appliquer une mise en forme différente grâce à un sélecteur spécifique.

Prenons, au hasard, une classe sur l'élément LI. Appelons cette classe "en-cours". Pour la page d'accueil, on aura:
<ul>
	<li class="en-cours"><a href="#">Accueil</a></li>
	<li><a href="#">Qu'est-ce qu'une&nbsp;wapitipi&nbsp;?</a></li>
	<li><a href="#">Qui fabrique les wapitipi&nbsp;?</a></li>
	<li><a href="#">Le wapitipitier</a></li>
	<li><a href="#">Technique et outils</a></li>
	<li><a href="#">Technique et outils suite</a></li>
	<li><a href="#">Photos et détails</a></li>
	<li><a href="#">Questions sur les wapitipi</a></li>
	<li><a href="#">Quel bois choisir&nbsp;?</a></li>
	<li><a href="#">Différentes wapitipi</a></li>
</ul>

Pour la page «Qu'est-ce qu'une wapitipi?», on aura:
<ul>
	<li><a href="#">Accueil</a></li>
	<li class="en-cours"><a href="#">Qu'est-ce qu'une&nbsp;wapitipi&nbsp;?</a></li>
	<li><a href="#">Qui fabrique les wapitipi&nbsp;?</a></li>
	<li><a href="#">Le wapitipitier</a></li>
	<li><a href="#">Technique et outils</a></li>
	<li><a href="#">Technique et outils suite</a></li>
	<li><a href="#">Photos et détails</a></li>
	<li><a href="#">Questions sur les wapitipi</a></li>
	<li><a href="#">Quel bois choisir&nbsp;?</a></li>
	<li><a href="#">Différentes wapitipi</a></li>
</ul>

Pour la page «Qui fabrique les wapitipi?», on aura:
<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Qu'est-ce qu'une&nbsp;wapitipi&nbsp;?</a></li>
	<li class="en-cours"><a href="#">Qui fabrique les wapitipi&nbsp;?</a></li>
	<li><a href="#">Le wapitipitier</a></li>
	<li><a href="#">Technique et outils</a></li>
	<li><a href="#">Technique et outils suite</a></li>
	<li><a href="#">Photos et détails</a></li>
	<li><a href="#">Questions sur les wapitipi</a></li>
	<li><a href="#">Quel bois choisir&nbsp;?</a></li>
	<li><a href="#">Différentes wapitipi</a></li>
</ul>

Et ainsi de suite.

Tu remarqueras que la classe se «déplace», comme tu dis. Ça ne se fait bien sûr pas par magie, c'est à toi de t'arranger pour que suivant qu'on soit sur telle ou telle page, la classe soit écrite ou générée au bon endroit! L'article explique brièvement que cela peut se faire manuellement si tu as des pages HTML statiques, ou de manière un peu plus complexes en utilisant des variables et des tests si tu travailles en PHP ou autre langage de programmation, ou avec un langage de templates intégré au CMS utilisé (dans ce dernier cas il faut voir du côté de la documentation et du support du CMS).

Je ne détaille pas les techniques en PHP ou avec tel ou tel CMS. Décrire une technique de ce type en PHP demanderait un tutoriel complet pour chaque architecture de site simple écrite en PHP, et un tutoriel complet pour chaque CMS existant. Soit des centaines de tutoriels en tout, ce qui n'est pas vraiment souhaitable ou gérable.
Modifié par Florent V. (07 Feb 2009 - 11:13)
Florent V. a écrit :
Pour reprendre ton exemple de code HTML, voici le menu sans marquage particulier:
<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Qu'est-ce qu'une wapitipi ?</a></li>
	<li><a href="#">Qui fabrique les wapitipi ?</a></li>
	<li><a href="#">Le wapitipitier</a></li>
	<li><a href="#">Technique et outils</a></li>
	<li><a href="#">Technique et outils suite</a></li>
	<li><a href="#">Photos et détails</a></li>
	<li><a href="#">Questions sur les wapitipi</a></li>
	<li><a href="#">Quel bois choisir ?</a></li>
	<li><a href="#">Différentes wapitipi</a></li>
</ul>

Maintenant, si on est sur la page d'accueil et qu'on veut mettre en valeur le lien correspondant, on va avoir besoin dans le code HTML d'une différence quelle qu'elle soit pour ce lien, vis-à-vis des autres liens du menu. Ça peut être un SPAN placé dans le A ou autour du A, une classe sur le A, une classe sur le LI, un identifiant sur le A, un identifiant sur le LI, l'utilisation d'un STRONG à la place du A... bref, tout ce qui nous permet d'appliquer une mise en forme différente grâce à un sélecteur spécifique.

Prenons, au hasard, une classe sur l'élément LI. Appelons cette classe "en-cours". Pour la page d'accueil, on aura:
<ul>
	<li class="en-cours"><a href="#">Accueil</a></li>
	<li><a href="#">Qu'est-ce qu'une wapitipi ?</a></li>
	<li><a href="#">Qui fabrique les wapitipi ?</a></li>
	<li><a href="#">Le wapitipitier</a></li>
	<li><a href="#">Technique et outils</a></li>
	<li><a href="#">Technique et outils suite</a></li>
	<li><a href="#">Photos et détails</a></li>
	<li><a href="#">Questions sur les wapitipi</a></li>
	<li><a href="#">Quel bois choisir ?</a></li>
	<li><a href="#">Différentes wapitipi</a></li>
</ul>

Pour la page «Qu'est-ce qu'une wapitipi?», on aura:
<ul>
	<li><a href="#">Accueil</a></li>
	<li class="en-cours"><a href="#">Qu'est-ce qu'une wapitipi ?</a></li>
	<li><a href="#">Qui fabrique les wapitipi ?</a></li>
	<li><a href="#">Le wapitipitier</a></li>
	<li><a href="#">Technique et outils</a></li>
	<li><a href="#">Technique et outils suite</a></li>
	<li><a href="#">Photos et détails</a></li>
	<li><a href="#">Questions sur les wapitipi</a></li>
	<li><a href="#">Quel bois choisir ?</a></li>
	<li><a href="#">Différentes wapitipi</a></li>
</ul>

Pour la page «Qui fabrique les wapitipi?», on aura:
<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Qu'est-ce qu'une wapitipi ?</a></li>
	<li class="en-cours"><a href="#">Qui fabrique les wapitipi ?</a></li>
	<li><a href="#">Le wapitipitier</a></li>
	<li><a href="#">Technique et outils</a></li>
	<li><a href="#">Technique et outils suite</a></li>
	<li><a href="#">Photos et détails</a></li>
	<li><a href="#">Questions sur les wapitipi</a></li>
	<li><a href="#">Quel bois choisir ?</a></li>
	<li><a href="#">Différentes wapitipi</a></li>
</ul>

Et ainsi de suite.

Tu remarqueras que la classe se «déplace», comme tu dis. Ça ne se fait bien sûr pas par magie, c'est à toi de t'arranger pour que suivant qu'on soit sur telle ou telle page, la classe soit écrite ou générée au bon endroit! L'article explique brièvement que cela peut se faire manuellement si tu as des pages HTML statiques, ou de manière un peu plus complexes en utilisant des variables et des tests si tu travailles en PHP ou autre langage de programmation, ou avec un langage de templates intégré au CMS utilisé (dans ce dernier cas il faut voir du côté de la documentation et du support du CMS).

Je ne détaille pas les techniques en PHP ou avec tel ou tel CMS. Décrire une technique de ce type en PHP demanderait un tutoriel complet pour chaque architecture de site simple écrite en PHP, et un tutoriel complet pour chaque CMS existant. Soit des centaines de tutoriels en tout, ce qui n'est pas vraiment souhaitable ou gérable.


Salux Florent V.,
je viens de comprendre en lisant ton post.
En fait, il faut mettre une "class" ou "id" au autres sur
chacune des pages concernées Smiley confused Smiley confused
C'est cela que je n'avais pas capté. J'avais pas compris comment la "class" ou "id"
se déplace sur les différentes pages
Je suis rouge de honte.

Mais merci de m'avoir montré de visu sur les trois exemples.
C'est ce qu'il me manquait pour comprendre.
Et encore mille excuses.

Smiley smile
trop fort
Modifié par Muad'Dib (07 Feb 2009 - 12:58)
Je profite de ce post pour te montrer mon adaptation PHP vraiment simple :

Je récupère le lien url :


<?php
$URL = $_SERVER['PHP_SELF'];
?>


Après je teste si le lien contient mon mot clé.
si c'est le cas j'affiche le en-cours :


<li <?php if (strpos($URL, 'index')) {echo ' id="en-cours"';}?> >
<a href="index.php">Accueil</a></li>

<li <?php if (strpos($URL, 'contact')) {echo ' id="en-cours"';}?> >
<a href="contact.php">Contact</a></li>
...


Voilà si ça peut servir à quelqu'un, depuis le temps que je prends des infos ici Smiley langue
Sujet clos
Aller à