28172 sujets

CSS et mise en forme, CSS3

Quels attributs pour le lien actif

Salut,

voilà, j'aimerais juste savoir comment faire pour que le lien actif, celui qui renvoit (dans mon menu) vers la page que je visite actuellement, soit souligne comme en a:hover.

Merci d'avance,

Arthur69
C'est exactement ça.

Dans mon menu, quand on survole un lien, ça souligne en bleu (avec a:hover)

Je voudrais que quand je sois sur la page contact, dans le menu, Contact soit souligné en rouge. (quelle propriété utiliser ??)


Le problème de ton lien, c'est que mon menu n'est pas une liste^^ (menu horizontal)
Arthur69 a écrit :
Le problème de ton lien, c'est que mon menu n'est pas une liste^^ (menu horizontal)

Houlà... si ça te semble être un problème, c'est que tu as de graves lacunes en HTML et CSS! (Pour rappel, on peut assez simplement faire un menu horizontal à partir d'une liste non ordonnée.) Et quelques problèmes de compréhension, car l'article pointé par Igor ne dit pas «utilisez une liste»; il s'avère juste que l'exemple utilisé utilise une liste, mais rien ne t'empêche d'utiliser le principe décrit avec un autre balisage HTML. Smiley cligne
Non mais je pensais que ça ne s'appliquait qu'aux listes^^

Tu me conseilles plutôt de faire des menus listés ??


Ce n'est pas un problème, je vais m'adapter, je ne demande que ça !!
J'ai organisé mon menu avec une liste, et ça marche comme avant.

Mais je n'arrive pas à régler ce soulignement du lien actif (ouvert)...

HTML
<ul id="underlinemenu">
	
	<li><a href="locations.html"><strong>Locations</strong></a></li> 

	<li><a href="contact.html"><strong>Contact</strong></a></li> 

	<li><a href="dossier.html"><strong>Dossier</strong></a></li>
	
</ul>


CSS
#underlinemenu {
 margin: 0;
 margin-bottom: 0em;
 padding-left: 0;
 padding-bottom: 3px;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 color: #808080;
 background-color: #ffffff;
 font-size: large;
 width: 40%;
 border: 2px solid #DFDFDF;
 border-width: 1px 0;
}

ul#underlinemenu {
 color: #808080;
 background-color: #ffffff;
 font-size: large;
 list-style-type: none; 
}
 
ul#underlinemenu li{
 display: inline;
}

ul#underlinemenu li a:active {
 color: #0000FF;
 background-color: #ffffff;
 border-bottom: 4px solid #0000FF;
}

#underlinemenu a:hover{
 color: #0000FF;
 background-color: #ffffff;
 border-bottom: 4px solid #0000FF;
 margin-bottom: 0;
 margin-top: 0;
 font-weight: bold;
 text-decoration: none;
}
Arthur69 a écrit :
Tu me conseilles plutôt de faire des menus listés ??

Disons que c'est une convention, et que ça peut être pratique (en plus de chaque lien, ça fournit un conteneur pour chaque item -- LI -- et un conteneur pour l'ensemble des items -- UL).

Sinon, je lis ton code et j'ai l'impression que tu n'as pas lu l'astuce indiquée par Igor -- ou alors en diagonale -- car tu fais toujours la confusion dénoncée dans cette astuce. À savoir: il ne faut pas utiliser la pseudo-classe :active, ça ne sert pas à ça!

Mais les torts sont partagés, car le texte et les exemples de cette astuce peuvent entretenir la confusion si on les lit de manière un peu distraite (;)). Pour éviter cela, j'ai complètement réécrit cet article. Maintenant, ça devrait être plus clair. Je te renvoie donc à cette nouvelle lecture:
http://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html

Bonne continuation. Smiley smile
Merci de la réécriture, je viens de comprendre pas mal de choses !!

Et merci, puisque je suis arrivé à ce que je voulais.


Merci pour tout, tu m'as déjà aidé une paire de fois^^
Bonjour,

Est-ce que c'est vraiment inutile et une perte de temps de styler a:active ?

Navigation au clavier sous IE
Avec les connexions haut débit, ça sert vraiment à rien...

Quand tu cliques sur un lien, la page se recharge, donc tu vois que tu as cliqué^^
knarf a écrit :
Est-ce que c'est vraiment inutile et une perte de temps de styler a:active ?

Navigation au clavier sous IE

Oui, mais le fait qu'IE 6-7 n'utilise pas :focus mais :active est un bug. Dans un article sur les pseudo-classes pour les liens, je développerais sans doute ce point, mais là la digression est déjà suffisamment importante.
Tiens, pour ma part, j'opte généralement pour une mise en exergue de l'élément actif dans le genre:
<a href="/apropos.html">À propos</a>
<strong>Contact</strong>
<a href="/mentions.html">Mentions légales</a>
Arthur69 a écrit :
Mieux vaut remettre le lien contact

Pourquoi donc? Mis à part certains cas précis (catalogues à plusieurs niveaux de navigation par exemple), c'est plutôt un non-sens de laisser le lien vers la page sur laquelle je me trouve…

Arthur69 a écrit :
lui mettre l'id "lien_actif"

Re-pourquoi donc?

Arthur69 a écrit :
et en CSS le mettre en gras.

Rappel: l'élément strong ne sert pas à mettre en gras…
Modifié par Benjamin D.C. (03 Feb 2009 - 11:00)
Benjamin D.C. a écrit :
c'est plutôt un non-sens de laisser le lien vers la page sur laquelle je me trouve…

C'est un point à prendre en considération. À l'inverse, il peut être gênant de modifier le comportement d'un item du menu de navigation: un coup cliquable, un coup plus cliquable. L'utilisateur peut vouloir cliquer à nouveau sur la rubrique ou l'article en cours pour s'assurer qu'il est au bon endroit par exemple («c'est bien ici que je suis? bon on va vérifier... ok c'est bon»), lorsqu'il est un peu perdu.

Sans étude avancée des avantages de l'un et de l'autre, difficile de trancher. Et même avec une étude, pas sûr que le résultat soit valable pour tout site web. Smiley cligne

Pour ma part je préfère garder un lien, et me contenter d'une mise en forme graphique. Si l'utilisateur s'attend à ce que ce ne soit pas cliquable, il est probable (mais pas garanti) qu'il ne cliquera pas. S'il s'attend à ce que ce soit un lien, et qu'il clique pour une raison ou une autre, ça tombe bien, ça marchera.
Je trouve évident de mettre un menu complet sur chaque page, même le lien de la page active.

strong ne sert pas à mettre en gras, certes, mais il sert à montrer qu'un élément est important, généralement retranscrit par une mise en gras, c'est du pareil au même...

L'important ici est de savoir comment mettre en avant le lien de la page active, pour montrer qu'on est bien dessus.


Florent : Je penses également qu'il est important de laisser ce lien de page active cliquable, déjà pour vérifier qu'on y est bien, et ça peut permettre d'actualiser la page aussi, même si en html, ça n'a pas d'intérêt... Smiley biggol
Florent V. a écrit :
Et même avec une étude, pas sûr que le résultat soit valable pour tout site web.

En effet, c'est d'ailleurs un sujet assez controversé. Une piste de réflexion pourrait être d'observer un parallélisme avec les breadcrumbs où l'item courant n'est que rarement cliquable…

Arthur69 a écrit :
strong ne sert pas à mettre en gras, certes, mais il sert à montrer qu'un élément est important, généralement retranscrit par une mise en gras, c'est du pareil au même...

Désolé d'insister mais non, ce n'est pas pareil. Exemple avec un menu en images:
<strong><img alt="Accueil" src="home.png" /></strong>
Sujet clos
Aller à