5545 sujets

Sémantique web et HTML

Problème de code html

Bonjour à tout le monde sur le forum !

Je débute en html/css (c'est un euphémisme, c'est la première fois que j'essaie de créer une ligne de code, sur les conseils du support technique de mon site Internet qui ne peut pas s'en charger !).

Je souhaite modifier la police de caractères d'un bouton "ENTRER" (celui qu'on voit typiquement en page d'accueil d'un site !).

Pour cela, j'ai commencé par isoler la valeur du bouton, que je joins en capture d'écran : upload/1612528123-82205-capturedancran2021-02-0513255.jpg

Après de nombreuses heures passées à essayer de comprendre comment modifier la police d'un élément, voilà ce que j'ai pondu (après 1000 autres tentatives !) pour appliquer la police Alegreya Sans, mais cela ne fonctionne pas :

<style>

/*<![CDATA[*/
<link href='https://fonts.googleapis.com/css?family=Alegreya' rel='stylesheet'>
<a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="/" data-title="ENTRER" style=" font-family: 'Alegreya';"> ENTRER <\/a>

/*]]>*/

</style>



Est-ce que quelqu'un saurait me dire où est/sont le(s) problème(s) dans cette ligne de code ?

Merci par avance Smiley smile
Modérateur
Bonjour,

1) La ligne
<link href='https://fonts.googleapis.com/css?family=Alegreya' rel='stylesheet'>
doit être mise quelque part entre <head> et </head>

2) tu n'as pas besoin ici de <style> et </style>

3) ensuite, tu n'as plus qu'à mettre la ligne :
<a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="/" data-title="ENTRER" style="font-family:'Alegreya';">ENTRER</a>
à l'endroit où doit apparaitre "ENTRER" dans la page quelques part entre les balises <body> et </body>

Amicalement,
Bonjour parsimonhi,

Un grand merci pour cette réponse ultra-rapide et bien détaillée Smiley smile

Pour le moment ça donne ça :

<style>
/* <![CDATA[ */
<head> <link href='https://fonts.googleapis.com/css?family=Alegreya' rel='stylesheet'> </head>
<body> <a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="/" data-title="ENTRER" style="font-family:'Alegreya';">ENTRER</a> </body/>
/*]]>*/
</style>


Le problème est que si je retire les balises <style>, mon code est refusé, je ne sais pas pourquoi, cela vient peut-être du programme utilisé par mon fournisseur de site Internet ? Smiley ohwell

Pour l'instant, même en laissant les balises <style>, au moins le code est accepté, mais ça ne fonctionne pas. Quand tu dis "à l'endroit où doit apparaitre "ENTRER" dans la page", qu'est-ce que ça veut dire exactement ? En fait moi j'ai juste un bloc où je peux rentrer du code, je n'ai pas l'impression de pouvoir choisir un endroit. À moins qu'il ne s'agisse d'une ligne spécifique du bloc en question ?

Je mets une capture d'écran de l'interface qui permet d'entrer du code Smiley smile

upload/1612562019-82205-capturedancran2021-02-0522501.jpg

Merci encore pour tes lumières Smiley smile
Modifié par Wonderland_Story (05 Feb 2021 - 22:53)
Modérateur
Bonjour,

1) Il est en ligne quelque part, ce site ? On peut le voir ou bien c'est un secret d'Etat?

2) il n'y a que ça comme code dans ta page ?

Amicalement,
Pas si secret que ça non, le voici Smiley smile
https://www.lilaakal.com
Tu verras le bouton ENTRER en question.

Effectivement oui, c'est le seul code entré sur cette page "HOME".

Sinon il y a ça entré dans l'onglet "Site entier", je ne sais pas si ça a une incidence !

upload/1612601766-82205-capturedancran2021-02-0609550.jpg
Modérateur
Bonjour,

Bon, c'est juste une question de mauvaise utilisation de l'interface pour mettre à jour la page. À l'endroit où tu essaies de changer quelque chose, il ne faut pas mettre de balise <head> ou <body>. Il faut mettre des balises <style> ou peut-être également des balises <link>, <title>, ... mais ça, il faudrait que j'ai l'outil sous la main pour le vérifier.

Quoiqu'il en soit, au lieu d'essayer de mettre
<style>
/* <![CDATA[ */
<head> <link href='https://fonts.googleapis.com/css?family=Alegreya' rel='stylesheet'> </head>
<body> <a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="/" data-title="ENTRER" style="font-family:'Alegreya';">ENTRER</a> </body/>
/*]]>*/
</style>

tu peux essayer de mettre
<style>
/* <![CDATA[ */
@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');
.content-options a.j-calltoaction-link-style-2,
.content-options a.j-calltoaction-link-style-2:link,
.content-options a.j-calltoaction-link-style-2:visited {font-family:Alegreya,serif;}
/*]]>*/
</style>

Amicalement,
Modifié par parsimonhi (06 Feb 2021 - 12:38)
Meilleure solution
Wow, j'étais très loin d'un tel code !!! Smiley eek

Ça y est, enfin, après des jours de prise de tête face à mon écran, voilà mon problème résolu, merci beaucoup parsimonhi !! Smiley biggrin

Je ne sais pas si tu résous des problèmes aux échecs comme pourrait le suggérer ton avatar, mais en tout cas le code n'a pas l'air d'avoir de secrets pour toi... Smiley cligne

Très bon week-end à toi !
Sujet clos
Aller à