@philiga, ta solution fonctionne mais trop bien, ou pas du tout... en faisant comme tu dis, tous les liens seront toujours en vert quelle que soit la page sur laquelle on se trouve. Le css n'a aucun moyen de détecter sur quelle page un visiteur se trouve.
Il est possible de le faire en php :
<?php
// Gère l'état actif des liens.
if ( !function_exists("set_active") )
{
function set_active($file, $class = "ici")
{
// Recherche et retourne le nom du template après avoir supprimé tous les /.
$page = trim( strrchr($GLOBALS["template"], "/"), "/" );
return ( ($page === $file . ".view.phtml") ? 'class="'. $class . '"' : "" );
}
}
?>
Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.
Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).
De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.
Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.
Pour modifier votre titre, éditez le premier message de votre sujet.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Dans un script inséré ou appelé dans chaque page avant </body>, on parcourt les onglets du menu, et pour chaque onglet, on teste si le lien href de l'onglet est identique à la page courante. Si c'est le cas, on change la couleur du lien, ou autre chose (soulignement, background, gras, puce ou flèche avant le lien...)
@philiga, ta solution fonctionne mais trop bien, ou pas du tout... en faisant comme tu dis, tous les liens seront toujours en vert quelle que soit la page sur laquelle on se trouve. Le css n'a aucun moyen de détecter sur quelle page un visiteur se trouve.
Je crois qu'il parlait d'ajouter la règle CSS dans la page html concernée directement.
Mais il y a encore plus simple : créer une classe "active", et juste la mettre sur le bon item dans chaque page html (rien ne dit qu'il utilise un langage serveur).
- Edité par EmmanuelBeziat 24 mai 2018 à 11:35:52
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Une solution est d'utiliser du javascript. J'ai proposé une autre solution en php, mais quoi qu'il en soit, ce n'est pas faisable avec uniquement du html et du css, il faut obligatoirement recourir à un langage de programmation, javascript, php ou autre. Pour ça, il n y a pas nécessairement besoin de l'interactivité du javascript, car une fois qu'on est sur une page, eh bien... on y est.
@me-moi: Je ne vois pas pourquoi ça ne fonctionnerait pas si l'on a 10 pages et qu'on les édite individuellement en ajoutant un css spécifique dans l'html (avec nth-child incrémenté comme je l'évoquais ou en ajoutant une class sur la bonne li (différente donc sur chaque fichier) comme le suggère rhooManu).
C'est fou comme beaucoup aiment faire compliqué sur ce forum au point de ne même plus pouvoir concevoir les choses les plus simples...!
Les routines JS ou PHP ont bien sûr l'avantage de s'adapter à un nombre de pages variable, mais pour un site vitrine basique, la solution pure css est parfaitement valide.
- Edité par philiga 24 mai 2018 à 13:56:31
"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)
Tout dépend du nombre de page sur le site de l'auteur. Le javascript est selon moi pratique pour éviter les répétitions à gogo mais si tu as 2 pages et des brouettes, autant passer par une balise style différente de une ligne sur chaque page html/php que tu as. Complètement d'accord avec philiga sur ce coup .
Par contre quand tu commences à en avoir 20, c'est vrai que mettre autant de balises style, c'est un peu lourd... Le jour où tu veux modifier ta couleur, tu vas bien t'amuser. Donc là je recommanderai une solution javascript qui est appelée sur toutes les pages avec un footer/header include contenant l'appel du fichier js.
Au final de nos jours, se balader avec javascript désactivé, faut vraiment le faire j'ai envie de dire... Même s'il y' en a toujours. Et personnellement je ne qualifierai pas ce qui a été proposé sur ce post de compliqué (je suis sûr que si l'auteur a des bases sur les deux, il comprendra, ou bien suffit de demander). C'est du JS et PHP basique, et si ça peut éviter les répétitions à n'en plus finir, tant mieux !
@philiga Est-ce que tu peux me montrer un exemple s'il te plaît ?
Je me trompe peut-être, mais avec mes connaissances actuelles en css, il me semble que le style appliqué à un lien lui sera appliqué même si on se trouve sur une page différente que celle liée au lien. Si je reprend mon exemple de code en php dans lequel il y a quatre pages - home, about, projects et contact - et que j'attribue une couleur de fond, disons orange (#F90), au lien "about", je me demande si ce lien n'aurait la couleur orange que lorsque je me trouve sur la page associée au lien (donc la page "about"), ou bien le lien "about" aurait la couleur orange même lorsque je me trouve sur une page autre que "about" ? Il me semble que c'est le deuxième cas de figure qui sera appliqué car le css n'est pas un langage dynamique qui permet de détecter sur quelle page je me trouve. Est-ce que je me trompe ? Si je donne la couleur #090 (vert) au lien "contact", ce lien aura cette couleur verte également lorsque je me trouve sur la page "home" ou "about" ou "projects".
C'est bien pour ça que rhooManu suggérait l'utilisation d'une classe "active" ou "current", qui serait ajoutée comme bon vous semble (JS ou langage serveur), et définie une seule fois dans un fichier CSS externe.
Je dois avouer ne pas vraiment comprendre la problématique, là.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
D'accord, il faut quand même utiliser JS ou un langage serveur, en fait on dit la même chose. Je ne l'ai pas mis mais j'ai effectivement défini une classe en css dans un fichier externe, tu peux vérifier que la classe "ici" n'est définie nulle part dans ma fonction "set_active". Voici ma classe css :
je ne voulais pas compliquer en proposant une solution en Javascript, j'avais compris qu'il s'agissait d'automatiser le truc et d'avoir une solution qui fonctionne pour toutes les pages, avec un menu identique pour toutes les pages, et du JS
@me_moi: Non, il n'est pas obligatoire d'utiliser JS ou PHP si l'on se contente (-pour un petit site vitrine, je suis d'accord Ekyss-) de modifier à la main dans chaque fichier le code css voulu dans l'html de chaque page.
Tu édites tes fichiers .html ou .php et:
Page Accueil tu mets class="active" sur la 1ère <li>
Puisque tu as défini en dur où était le menu à colorer sur chaque fichier, pas besoin que css soit actif ; c'est toi qui l'a été!
Mais bien sûr une routine est plus souple et s'adaptera automatiquement si le nombre de pages change et c'est le genre de chose qu'on oubliera facilement en cas de changement ultérieur, donc va pour le JS ou PHP.
"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)
Oui, mais dans ce cas, il faut réécrire le menu dans chaque page. Depuis le temps que j'utilise include et require, j'avais oublié qu'il fallait réécrire tout le code à nouveau dans chaque page.
Sauf si tu utilises la technique de nth-child(n): tu te contentes de mettre cette ligne de css spécifique à chaque page entre deux balises <style>...</style> et l'html du nav peut être inchangé donc "included"...
"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)
Question simple css / js?
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Pas d'aide concernant le code par MP, le forum est là pour ça :)