Pas de lien CSS/html

Signaler
-
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021
-
Bonjour,

J'essaie de créer un site web, je code sur Komodo (sur Mac), le lien ne se fais pas entre mon CSS et mon HTML, pourtant dans le même dossier.

Voici mon code HTML :
<!DOCTYPE html>
<html>
  <head>
  <Meta charset="utf-8">
<Link rel="stylesheet" href="style.css"/>
  </head>
  <div><nav><a href="#Les Transferts";>Les Transferts</a> |
    <a href="#Calendrier";>Calendrier</a> |
    <a href="#Effectif";>Effectif</a> |
    <a href="#News";>News</a>
    </nav>
  </div>
  <br>
  <hr>
  <h3 class="text-align:center; font-family:Verdana";><U>L'actualité en Live</U></h3>
  <h4>Ligue 1 - Fin de saison</h4>
  <article>
    <p>Le PSG termine deuxième à un seul petit point de Lille, champion de France. La lutte aura été belle, quatre équipes s'affrontant pour deux places en <em>Ligue des Champions</em>. A force d'être inconstant, <a style="text-decoration: line-through; text-decoration-color:blue";>Lyon</a> est le grand perdant de cette compétition</p>
  </article>
  <div><nav>
  <a href="#Lire la suite";>Lire la suite</a>
    </nav>
  </div>
  <br>
 <hr>
  <p style="font-family:comic sans ms";>Il est grand temps à notre équipe de faire un tri au niveau de son effectif, se son staff et de voir quels postes renforcer.</p>
  <br>
  <table class="margin";>
  <caption>Tableau récapitulatif
    </caption>
    <tr>
      <th>Nom</th>
      <th>Prix</th>
      <th>Efficacité</th>
      <th>Note</th>
    </tr>
    <tr>
      <td>Kehrer</td>
      <td>15M</td>
      <td>3/10</td>
      <td><strong>3/10</strong></td>
    </tr>
    <tr>
      <td>Florenzi</td>
      <td>Prêt</td>
      <td>6/10</td>
      <td><strong>6/10</strong></td>
    </tr>
    <tr>
      <td>Icardi</td>
      <td>50M</td>
      <td>5/10</td>
      <td><strong>5/10</strong></td>
    </tr>
  </table>
  <br>
  <hr>
  <br>
  <p class="titre";>Dimanche 06 Juin</p>
  <p><span class="rouge";><strong>20h22</strong></span><strong> - Wijnaldum</strong></p>
  <p> Le joueur sous contrat jusqu'à 30 juin avec Liverpool était en passe de rejoindre son compatriote néerlandais <em>Memphis Depay</em> au FC Barcelone. C'était sans compter l'offre alléchante proposée par le PSG, qui compte bien double le club catalan. Affaire a suivre.</p>
  <br>
  <p><span class="rouge"> <strong>10h12</strong></span><strong> - Hakimi</strong></p>
  <p>Le PSG n'a toujours pas fait d'offre pour <em>Hachraf Hakimi</em> bien que le joueur soit tombé d'accord pour un contrat de 5 ans. La somme proposée ne satisfait pas les dirigeants interistes.</p>
<br>
<p class="overflow";> J'aimerai à titre personnel vous faire part de mon enthousiasme. Le recrutement me paraît être bon et les joueurs ciblés vraiment impliqués, malgré quelques uns plus très jeunes. Leonardo fait quand même un bon travail de chasse aux "bonnes affaires".</p>
</Body>
</HTML>

Voici mon CSS :
font-weight:lighter;
      font-family:"comic sans ms";
      font-variant:small caps;
      text-shadow:1px 1px 2px black;
      }
      p{
      text-align:justify;
      line-height:20px;
      }
      .margin{
      margin: 0 auto 0 auto;
      border-style: dashed;
      border-width: 5px;
      border-color: blue red green orange;
      border-radius: 5px;
      }

Est ce un problème dans mon code ou dans le chemin d'accès au fichier ?

Merci a tous ! ✌️


EDIT : Ajout des balises de code

4 réponses

Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553
Bonjour,

Déjà, pour poster du code sur le forum, merci d'utiliser les balises de code.
Explications à lire ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, tu as oublié la balise ouvrant <body>

Et enfin, une fois corrigé .. pense à vider le cache de ton navigateur;
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021

Merci beaucoup, désolé je n'avais pas vu. Même en ajoutant les balises manquantes et vidé le cache, ça ne change rien. Pourtant, quand je prends un lien qu'on m'envoie et que je le copie dans mon éditeur, cela fonctionne et le CSS s'applique au HTML. Quand c'est moi qui le créé non.

Cf: une photo, le fichier HTML paraît normal ? ?

Merci @Jordane.
Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021
3 553 >
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021

Visiblement tu as un dossier style et ton fichier CSS où se trouve pas dans le même dossier que ta page HTML..
Il faut donc spécifier le chemin jusqu'à ton fichier
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021
>
Messages postés
32933
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 juin 2021

Mon fichier style.css se trouve dans le dossier styles, j'ai donc essayé comme suit :

<link rel="stylesheet" href="styles/style.css>


Ou encore :

<link rel="stylesheet" href="..styles/style.css>


Dans les deux cas le CSS ne s'applique pas, ni dans l'éditeur de code ni dans Google Chrome et Safari.

Le problème peut il être le Mac ? Bizarre je ne vois pas ce que ça peut être...
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021
>
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021

Voilà deux images qui peuvent peut être vous aider
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021
>
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021

Messages postés
1376
Date d'inscription
dimanche 6 avril 2014
Statut
Membre
Dernière intervention
9 juin 2021
1 694
Bonjour, les 5 premières lignes du CSS me laissent penser qu'il manque quelque chose qui devrait se trouver au-dessus, mais je ne sais pas ce que vous voulez mettre.

body {

Peut-être ?

Il y a un } à la 5ème ligne qui ne ferme rien.
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021

Bonjour Jean,

En fait c'est caché mais c'est le H4 qui concerne cette partie. J'ai vérifié mon code tout a l'air bon...

Si je copie colle mon code dans un éditeur le CSS s'affiche bien. Mais quand je pars de 0 pour refaire une page HTML et associer un CSS ça ne s'affiche pas..
Messages postés
1376
Date d'inscription
dimanche 6 avril 2014
Statut
Membre
Dernière intervention
9 juin 2021
1 694 >
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021

Je viens de voir quelque chose d'étrange dans votre photo, il y a différents types de guillemets dans l'HTML, je pense que tous les guillemets jusqu'à la ligne 5 doivent être changés.
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021

Ah bon ? Moi je ne vois qu'une sorte de guillemet qui est celle là : ""

C'est de ceux là dont tu parles ?
Messages postés
1376
Date d'inscription
dimanche 6 avril 2014
Statut
Membre
Dernière intervention
9 juin 2021
1 694
Il y a des guillemets un peu plus courbés (guillemets anglais je crois) : ””
Je ne suis pas sûr qu'ils fonctionnent en HTML.
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021

Mais ma page HTML ne s'afficherait pas dans ces cas là je pense, alors que mon HTML est bon, c'est juste mon CSS qui ne s'applique pas dans la page.
Messages postés
1376
Date d'inscription
dimanche 6 avril 2014
Statut
Membre
Dernière intervention
9 juin 2021
1 694
La page peut quand même s'afficher, mais sans le lang="fr", le <meta charset="UTF-8">, et le <link> qui contient le lien vers le CSS.
On peut même voir sur la photo que les accents ne s'affichent pas correctement car l'encodage UTF-8 ne s'est pas appliqué à la page (à cause des guillemets qui cassent le code).
Messages postés
8
Date d'inscription
mercredi 9 juin 2021
Statut
Membre
Dernière intervention
9 juin 2021
>
Messages postés
1376
Date d'inscription
dimanche 6 avril 2014
Statut
Membre
Dernière intervention
9 juin 2021

D'accord merci Jean je vais essayer ça demain elle, mais j'ai bien peur que sur Mac il n'y ait que ce type de guillemets..
Les guillemet droits, donc les bons, provenaient de mon téléphone.