Code lien
TOONIE
-
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Bonsoir,
J’essaye de créer un lien avec un code un peu moderne (en tout cas pour le débutant que je suis, je trouve cela moderne… !), et ça ne fonctionne pas. J’ai du texte comme si je n’avais pas de lien.
Si vous pouviez m’aider à corriger, ce serait super. Par ailleurs, je souhaiterais que le lien ne soit pas surligné par un trait simple mais par 2 traits et je ne trouve pas le nom pour cela.
Bidule1 est le nom du style pour ce lien.
<style type="text/css">
<!--
.stylemachin {
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin : 0;
padding : 0;
}
.bidule1 a
{
color:#0AA14B;
text-decoration:underline;
}
.bidule1 a:hover
{
color:# 0AA14B;
text-decoration:underline;
}
.bidule1 a:visited
{
color:# C33FEB;
text-decoration:underline;
}
-->
</style>
<p align="justify" class="stylemachin">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>
Toonie
J’essaye de créer un lien avec un code un peu moderne (en tout cas pour le débutant que je suis, je trouve cela moderne… !), et ça ne fonctionne pas. J’ai du texte comme si je n’avais pas de lien.
Si vous pouviez m’aider à corriger, ce serait super. Par ailleurs, je souhaiterais que le lien ne soit pas surligné par un trait simple mais par 2 traits et je ne trouve pas le nom pour cela.
Bidule1 est le nom du style pour ce lien.
<style type="text/css">
<!--
.stylemachin {
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin : 0;
padding : 0;
}
.bidule1 a
{
color:#0AA14B;
text-decoration:underline;
}
.bidule1 a:hover
{
color:# 0AA14B;
text-decoration:underline;
}
.bidule1 a:visited
{
color:# C33FEB;
text-decoration:underline;
}
-->
</style>
<p align="justify" class="stylemachin">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>
Toonie
A voir également:
- Code lien
- Code ascii - Guide
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Code puk bloqué - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
7 réponses
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
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
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
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).
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.
--
