[Résolu] href lang?

[Bacchus]

J'ai lu la doc sur le sujet mais je pige pas

Comment je fais pour mettre après mes liens soit le petit (fr) ou (en) automatiquement ou le drapeau du pays?

J'ai essayer des trucs mais rien ne marche.

Merci

[SIBELIUS]

Salut,

Il faut combiner le sélecteur d'attribut et la propriété "after" :

Code : Tout sélectionner

a[hreflang]:after {
	content: "\0000a0(" attr(hreflang) ")";
}

[calimo]

Attention, c'est hreflang, pas href lang

Tu peux nous montrer aussi tes essais si tu veux
Pour revenir un peu plus en détail sur l'explication de Sibelius :

• a[hreflang] sélectionne tous les a qui ont l'attribut hreflang
• :after ça veut tout dire : ça va créer une sorte de conteneur après a[hreflang].
• content: "..."; spécifie qu'on doit mettre du contenu dans ce conteneur généré.
• "\0000a0(" c'est seulement un espace (insécable ?) et l'ouverture de la parenthèse
• attr(hreflang) affiche en fait simplement le contenu de l'attribut hreflang. Remarque qu'il ne doit pas être entre guillemets
• ")" referme la parenthèse.

Tu peux appliquer d'autres styles à ce conteneur, couleur, taille de police...

[Arzo]

Quelqu'un peut me dire où trouver des explications détaillées là-dessus ?, parce que je voulais l'utiliser pour un site et franchement, j'ai toujours rien compris (désolé Calimo).

[SIBELIUS]

En fait, si tu veux vraiment les explications détaillées de toutes ces propriétés, il faut faire un tour ici :
http://www.yoyodesign.org/doc/w3c/css2/ ... ml#minitoc

[Bacchus]

Parfait ça marche, j'ai aucun exemple en ligne, mon hébergeur à un un crash de DD.

Mainteant pour les drapeaux, je suppose que je dois avoir les images et écrire ceci dans mon CSS:

Code : Tout sélectionner

a[hreflang]:after {
   content: "\0000a0(" attr(images/drapeau.gif) ")";
}

Si non, quoi mettre?

[Bobe]

tu dois utiliser la fonction url():

Code : Tout sélectionner

a[hreflang]:after {
   content: "\0000a0" url("images/drapeau.gif");
}

[Bacchus_non_connecter]

D'accord mais comment le CSS va faire la différence entre les liens (fr) et (en).

Par example pour un lien francophone j'met le drapeau du Québec Ou France et pour les liens anglais j'met celui des US ou GB?

[Bobe]

ah, pardon..

Comme ça:

Code : Tout sélectionner

a[hreflang|="fr"]:after {
   content: "\0000a0" url("images/drapeau-fr.gif");
}
a[hreflang|="en"]:after {
   content: "\0000a0" url("images/drapeau-en.gif");
}

Le premier s'appliquera si hreflang vaut "fr" ou "fr-xx" où xx vaut n'importe quelle paire de lettres. De même, le second s'appliquera si hreflang vaut "en" ou n'importe quelle variante en "en-xx".

Et tu peux ajouter après:

Code : Tout sélectionner

a[hreflang="fr-qb"]:after {
   content: "\0000a0" url("images/drapeau-qb.gif");
}

Pour afficher un drapeau plus spécifique pour le français du québec (je suis pas sùr du code de langue ISO par contre).

Mais ce serait qd même mieux avec :

Code : Tout sélectionner

a[hreflang]:after {
   content: "\0000a0(" attr(hreflang) ")";
}

Les drapeaux représentent des pays, non des langues.

[Bacchus]

Oui ça je le savais, je suis perfectionniste

Merci pour ton aide

Parcontre j'ai du louper un truc! Marche pas avec IE (comme d'hab). Nickel sous Firefox.

[Bobe]

Parcontre j'ai du louper un truc! Marche pas avec IE (comme d'hab).

Oui, c'est "normal". IE ne gère pas le sélecteur d'attribut.

[calimo]

Et même en admettant qu'il le gérait, est-ce qu'il gérerait le pseudo-élément :after ? Et le contenu généré (content:) ? La fonction attr() ? Je ne pense pas

[Bacchus]

Merci de votre aide

Ya encore des trucs obscur que je métrise pas en CSS, comme les Z-index, je sais jamais ou et quand les utilisés et l'opacité (CSS3?). Mais ça viendra

[cpdump]

Je profites du thread pour poser une une question à propos des hreflang, comment on fait pour que l'image aussi soit soulignée ? le lien s'arrête avant l'image quand j'utiliser le style suivant

Code : Tout sélectionner

  a[hreflang|="en"]:after {
   content: " " url("images/en.png");
} 

[calimo]

Code : Tout sélectionner

a[hreflang|="en"]:after {
  content: " " url("images/en.png");
  text-decoration:underline;
}