Code lien
Fermé
TOONIE
-
8 déc. 2007 à 20:12
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 11 déc. 2007 à 01:13
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 11 déc. 2007 à 01:13
A voir également:
- Code lien
- Lien url - Guide
- Verifier un lien - Guide
- Créer un lien pour partager des photos - Guide
- Code asci - Guide
- Code puk bloqué - Guide
7 réponses
JBiN-1
Messages postés
57
Date d'inscription
vendredi 26 octobre 2007
Statut
Membre
Dernière intervention
11 mai 2009
18
8 déc. 2007 à 20:42
8 déc. 2007 à 20:42
Essaye un truc du genre
<p class="stylemachin"><a href="http://nomdusite.free.fr>text_cliquable</a></p>
.styelemachin a:link{
...................
}
.stylemachin a:hover{
...................
}
.stylemachin a:visited{
....................
}
JBiN-1
<p class="stylemachin"><a href="http://nomdusite.free.fr>text_cliquable</a></p>
.styelemachin a:link{
...................
}
.stylemachin a:hover{
...................
}
.stylemachin a:visited{
....................
}
JBiN-1
Posotaz
Messages postés
489
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
19 juin 2011
225
9 déc. 2007 à 00:47
9 déc. 2007 à 00:47
Salut, on ne sait pas double souligner en CSS2 mais certains utilisent une astuce que tu trouveras quelque part sur cette page :
http://fr.wikibooks.org/wiki/Programmation_CSS/Fonds_et_bordures
Le text-decoration combiné à un border-bottom... sinon à mon sens y'aurait peut-être aussi moyen de jouer avec une image en background repeat-x
Pour être certain que tu comprennes bien l'erreur que JBiN-1 a corrigée (bon y'a aussi une petite erreur dans sa correction, faute de frappe ça arrive), je te retape ce que tu as mis :
Petite précision tant qu'à rester dans la modernité... si un jour tu passes en xhtml strict tu ne pourras pas utiliser l'attribut target... peu de gens l'utilisent car de toute façon le navigateur peut être configuré pour forcer l'ouverture du site dans la même fenêtre.
http://fr.wikibooks.org/wiki/Programmation_CSS/Fonds_et_bordures
Le text-decoration combiné à un border-bottom... sinon à mon sens y'aurait peut-être aussi moyen de jouer avec une image en background repeat-x
Pour être certain que tu comprennes bien l'erreur que JBiN-1 a corrigée (bon y'a aussi une petite erreur dans sa correction, faute de frappe ça arrive), je te retape ce que tu as mis :
<p align="justify" class="stylemachin">Tu as bien une balise de paragraphe mais à partir du moment où tu lui définis un style CSS au moyen d'une classe de style, la propriété align vient écraser tes bonnes intentions de faire du code "moderne" comme tu le dis.
J’aime le<bidule1 a href=" http://nomdusite.free.fr" target="_blank" title="cliquez pour visiter le site">chocolat</a>. C’est si bon.</p>La balise bidule1 n'existe pas... c'est pourtant ce que tu as écrit. Tu voulais peut-être écrire <a class="bidule" href="...">chocolat</a>. La correction de JBiN est correcte sauf qu'il manque les guillemets fermants à la fin de l'URL.
Petite précision tant qu'à rester dans la modernité... si un jour tu passes en xhtml strict tu ne pourras pas utiliser l'attribut target... peu de gens l'utilisent car de toute façon le navigateur peut être configuré pour forcer l'ouverture du site dans la même fenêtre.
Bonjour,
Merci pour votre aide. Quelques zones d'ombre restent encore :
Citation : la propriété align vient écraser tes bonnes intentions de faire du code "moderne"
Question : concrètement, est-ce que ça signifie que class="stylemachin" prend le dessus de class="bidule1" ? Pourtant, les infos sont différentes; donc les infos de l'une de devraient pas contrarier les infos de l'autre ?
Citation : Tu voulais peut-être écrire <a class="bidule" ...
Réponse : bien vu Posotaz !!
Question : la correction suivante fait que le lien fonctionne
<p align="justify" class="stylemachin">J’aime le<a href=" http://nomdusite.free.fr" target="_blank" title="cliquez pour visiter le site" class="bidule1">chocolat</a>. C’est si bon.</p>, seulement 2 détails ne fonctionnent pas, à savoir :
1)- Contrairement à mon css qui demande pourtant le soulignement (laissons tomber le double soulignement, trop complexe!) pour a, hover et visited, je ne l’ai pas :
.bidule1 a
{
color:#0AA14B;
text-decoration:underline; }
.bidule1 a:hover
{
color:# 0AA14B;
text-decoration:underline; }
.bidule1 a:visited
{
color:# C33FEB;
text-decoration:underline; }
2)- Pour les couleurs du lien ça fonctionne pour hover et visited, mais pas pour "a" :
.bidule1 a
{
color:#0AA14B; text-decoration:underline;
}
Peux-tu me dire quelque chose à ce sujet ?
Toonie
Merci pour votre aide. Quelques zones d'ombre restent encore :
Citation : la propriété align vient écraser tes bonnes intentions de faire du code "moderne"
Question : concrètement, est-ce que ça signifie que class="stylemachin" prend le dessus de class="bidule1" ? Pourtant, les infos sont différentes; donc les infos de l'une de devraient pas contrarier les infos de l'autre ?
Citation : Tu voulais peut-être écrire <a class="bidule" ...
Réponse : bien vu Posotaz !!
Question : la correction suivante fait que le lien fonctionne
<p align="justify" class="stylemachin">J’aime le<a href=" http://nomdusite.free.fr" target="_blank" title="cliquez pour visiter le site" class="bidule1">chocolat</a>. C’est si bon.</p>, seulement 2 détails ne fonctionnent pas, à savoir :
1)- Contrairement à mon css qui demande pourtant le soulignement (laissons tomber le double soulignement, trop complexe!) pour a, hover et visited, je ne l’ai pas :
.bidule1 a
{
color:#0AA14B;
text-decoration:underline; }
.bidule1 a:hover
{
color:# 0AA14B;
text-decoration:underline; }
.bidule1 a:visited
{
color:# C33FEB;
text-decoration:underline; }
2)- Pour les couleurs du lien ça fonctionne pour hover et visited, mais pas pour "a" :
.bidule1 a
{
color:#0AA14B; text-decoration:underline;
}
Peux-tu me dire quelque chose à ce sujet ?
Toonie
Posotaz
Messages postés
489
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
19 juin 2011
225
9 déc. 2007 à 23:04
9 déc. 2007 à 23:04
Re,
Le CSS prend le dessus sur les attributs de style déclarés dans la balise.
Si on imbrique un bloc B dans un bloc A, le style du bloc A va s'appliquer à tout ce qui est à l'intérieur, sauf si le bloc B redéfinit des styles de A (là c'est B qui a la priorité sur A).
Alors pourquoi tes styles ne sont pas appliqués à la classe "bidule" ?
Parce que de la façon dont tu l'écris on s'attend à avoir le code suivant :
<span class="bidule">
<a href=".....">visitez ma page</a>
</span>
Or ta classe bidule est associée à la balise "a", ce qui veut dire que tu dois te contenter de référencer ".bidule" tout court ou mieux encore enlever la classe bidule et te servir de la classe du paragraphe "stylemachin".
.stylemachin a {.....}
PS : sympa tes noms de test :-p
Le CSS prend le dessus sur les attributs de style déclarés dans la balise.
Si on imbrique un bloc B dans un bloc A, le style du bloc A va s'appliquer à tout ce qui est à l'intérieur, sauf si le bloc B redéfinit des styles de A (là c'est B qui a la priorité sur A).
Alors pourquoi tes styles ne sont pas appliqués à la classe "bidule" ?
Parce que de la façon dont tu l'écris on s'attend à avoir le code suivant :
<span class="bidule">
<a href=".....">visitez ma page</a>
</span>
Or ta classe bidule est associée à la balise "a", ce qui veut dire que tu dois te contenter de référencer ".bidule" tout court ou mieux encore enlever la classe bidule et te servir de la classe du paragraphe "stylemachin".
.stylemachin a {.....}
PS : sympa tes noms de test :-p
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonjour Posotaz,
Le problème semble presque résolu...
citation : ta classe bidule est associée à la balise "a"
question : si au lieu d'écrire .bidule1 a etc., je renseignais plutôt .stylebidule1 { (un peu comme stylemachin en quelque sorte), les attributs s'appliqueraient ? Mais surtout, est-ce que ce serait faire du code propre ou ce serait du bidouillage non conforme (que ça marche ou pas) ? Auquel cas je suppose que ça ne marcherait pas avec tous les navigateurs...
Citation : sympa tes noms de test
Réponse : ;-)
Toonie
Le problème semble presque résolu...
citation : ta classe bidule est associée à la balise "a"
question : si au lieu d'écrire .bidule1 a etc., je renseignais plutôt .stylebidule1 { (un peu comme stylemachin en quelque sorte), les attributs s'appliqueraient ? Mais surtout, est-ce que ce serait faire du code propre ou ce serait du bidouillage non conforme (que ça marche ou pas) ? Auquel cas je suppose que ça ne marcherait pas avec tous les navigateurs...
Citation : sympa tes noms de test
Réponse : ;-)
Toonie
Posotaz
Messages postés
489
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
19 juin 2011
225
10 déc. 2007 à 21:54
10 déc. 2007 à 21:54
Bonsoir Toonie,
En fait c'est simple, dès que tu as une balise avec un attribut class="stylenimportequoi", tous ce que tu vas déclarer dans ta CSS à l'aide de
.stylenimportequoi {}
s'appliquera à tout ce qui est dans cette balise (sauf si tu as d'autres balises internes qui vont venir redéfinir des mêmes propriétés).
Donc oui tu peux te contenter de faire
<p>Visitez <a class="stylebidule1" href="htttp://monsite.com">mon site</>.</p>
et dans ta CSS de référencer directement .stylebidule1 (y compris .stylebidule1:hover ... ça fonctionne aussi et ça reste tout à fait propre).
En fait c'est simple, dès que tu as une balise avec un attribut class="stylenimportequoi", tous ce que tu vas déclarer dans ta CSS à l'aide de
.stylenimportequoi {}
s'appliquera à tout ce qui est dans cette balise (sauf si tu as d'autres balises internes qui vont venir redéfinir des mêmes propriétés).
Donc oui tu peux te contenter de faire
<p>Visitez <a class="stylebidule1" href="htttp://monsite.com">mon site</>.</p>
et dans ta CSS de référencer directement .stylebidule1 (y compris .stylebidule1:hover ... ça fonctionne aussi et ça reste tout à fait propre).
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
11 déc. 2007 à 01:13
11 déc. 2007 à 01:13
Bonjour,
En reprenant l'idée de Posotaz, je te propose cette solution pour avoir un soulignement double. Avec une image de fond dans les <a>.
Et de petits effets utilisant la méthode des portes coulissantes en plus.
Dans cet exemple, les liens sont dans une liste
Si tu veux que tes effets sur les liens soient pris en compte, il te faut les présenter dans l'ordre : LoVeHAte.
Et donc
Dans ton exemple initial “bidule1” n'est pas défini.
Alors, appliquer “bidule1 a” n'a pas vraiment de sens.
--
En reprenant l'idée de Posotaz, je te propose cette solution pour avoir un soulignement double. Avec une image de fond dans les <a>.
Et de petits effets utilisant la méthode des portes coulissantes en plus.
Dans cet exemple, les liens sont dans une liste
<li id="lien_2"><a href="#">Lien 2</a></li>
Si tu veux que tes effets sur les liens soient pris en compte, il te faut les présenter dans l'ordre : LoVeHAte.
Et donc
.styelemachin a:link {
…
}
.stylemachin a:visited {
…
}
.stylemachin a:hover {
…
}
Dans ton exemple initial “bidule1” n'est pas défini.
Alors, appliquer “bidule1 a” n'a pas vraiment de sens.
--
