Partage

Fichier CSS inactif

Je n'arrive pas à faire le lien entre mon fichier CSS et celui HTML

1 2 >>

debacqpauline

1 avril 2015 à 17:49:09

Bonjour à tous !

Je n'arrive pas à lier mon fichier style.css avec mon fichier html. Ils sont pourtant dans le même dossier...

Voici ce que j'ai mis dans l' " head" :

<head>

Merci pour votre aide !

Dlazzy

1 avril 2015 à 17:58:11

Bonjour,

Si les deux fichiers sont dans le même dossier pourquoi il y a OpenClassRoom devant le /style.css ?

debacqpauline

4 avril 2015 à 17:58:47

J'avais testé avant sans le "openclassroom" et cela ne marchait pas non plus. J'ai pensé que remonter la source pouvait aider... mais non :s

Cocopop

4 avril 2015 à 18:34:59

Salut,

Quel architecture à ton site précisément ?

As-tu essayé ceci (après c'est un peu de l'aide à l'aveuglette...) :

  <link rel="stylesheet" href="../tafeuilledestyle.css" />

themagicdavid

4 avril 2015 à 19:26:46

Bonjour pauline,

avant d'évoquer quelques pistes, il est intéressant de se pencher sur ton utilisation.
Quels OS utilises-tu ?
Comment accedes tu à ta page web ?

car dans certains cas, un logiciel traitera différemment les chemins de fichiers.
Par exemple :

dans un explorateur de fichier ?

/Users/themagicdavid/sites/mon-site.ext/styles.css
C:/utilisateurs/documents/monsite/style.css

ou dans un navigateur ?

http://localhost/styles.css
./styles.css
etc ...

autre chose; penses à l'informatique de nos grand-parents : pas d'accents, pas d'espaces et pas de majuscules dans un nom de fichier ...
Ca t'éviteras pas mal d'ennuis ...

Cordialement.

Adepte de wordpress et de Génésis - je dois finir mon degliame.net, mais c'était après electroniques.fr ...

debacqpauline

4 avril 2015 à 19:37:16

Je passe par Espresso, donc un explorateur de fichiers. N'est-ce pas?

Je débute tout juste, j'ai encore plein de choses à apprendre.

Ok c'est noté pour les noms de fichiers.

Mon problème est lié à l'exercice du CV dans le cours 2 de " Apprenez à créer votre site"

Merci à vous pour vos réponses !!

debacqpauline

4 avril 2015 à 20:00:14

Ca ne semble pas marcher...

Personne n'utilise le logiciel Espresso, par hasard ?

J'ai sûrement oublié une étape !

debacqpauline

4 avril 2015 à 20:08:48

<!DOCTYPE html>

<head>

<style>

Voici ce que j'ai marqué

Lucky13

4 avril 2015 à 20:35:25

Hello,

Je ne connais pas Expresso, mais avant de travailler sur quelque chose, il faut penser à son organisation.

Quand on fait un pique-nique on décide du lieu, de comment y aller et on prend une nappe (ou pas)

la c'est pareil, il te faut un dossier racine pour le projet, il sera le point de référence à tous tes liens d'accès, qu'ils soient relatifs ou absolus.

Exemple:

monProjet /

- fichier_1.html

- fichier_2.html

- style.css

/mesImages /

- img1.png

- img2.png

-
Edité par Lucky13 4 avril 2015 à 20:37:51

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

thenif

4 avril 2015 à 21:10:30

Bonsoir,

Teste tu ton code avec IE?

" Choisissez un travail que vous aimez et vous n'aurez pas à travailler un seul jour de votre vie " (Confucius)

debacqpauline

4 avril 2015 à 21:54:11

Bonsoir,

Non. Je ne sais pas ce que c'est...

Foghall

4 avril 2015 à 22:19:17

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

Essaye ceci

debacqpauline

4 avril 2015 à 23:46:08

Haal a écrit:

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

Merci mais c'est déjà fait. D'où mon problème !

debacqpauline

4 avril 2015 à 23:46:27

debacqpauline a écrit:

Bonjour à tous !

Je n'arrive pas à lier mon fichier style.css avec mon fichier html. Ils sont pourtant dans le même dossier...

Voici ce que j'ai mis dans l' " head" :

<head>

<meta charset="utf-8"/>

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

Merci pour votre aide !

DES69U

5 avril 2015 à 8:46:09

Essais sa :

<LINK href="style.css" rel="stylesheet" type="text/css">

Voir le site : http://www.w3.org/TR/html401/present/styles.html

-
Edité par DES69U 5 avril 2015 à 8:47:31

Aymeric, des69u.fr

Lamecarlate

5 avril 2015 à 9:09:24

Pas besoin de type="text/css" . Plus besoin

En revanche, Pauline, peux-tu nous faire une capture d'écran de ton arborescence de fichiers et dossiers ? Où se trouve ton fichier css par rapport à ton html ? Es-tu sûre du nom de ton fichier css (casse incluse) ? (je ne sais si MacOS est sensible à la casse)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

themagicdavid

5 avril 2015 à 9:57:06

Bonjour et bon dimanche,

A ma connaissance, Espresso n'est pas disponible sur windows, donc je ne vois pas pourquoi tu utiliserais un chemin de fichier qui ne fonctionne "que" sur windows :

debacqpauline a écrit:

<!DOCTYPE html>

<head>

<meta charset="utf-8"/>

<link rel="stylesheet" href="C:/pauline/bureau/OpenClassRoom/style.css" />

<style>

Voici ce que j'ai marqué

Espresso utilise un navigateur web basé sur webkit pour afficher la prévisualisation.
Mais j'utilise de moins en moins cette fonctionnalité. je te conseille plutôt de rester avec un couple navigateur + IDE ( ici espresso )

Ensuite, comme je le disais dans mon message precedent, il y'a plusieurs chemin possibles, mais a priori ton objectif c'est de mettre le site disponible à tous. Donc on va éviter d'utiliser un chemin de fichier qui soit disponible uniquement sur ta machine.

Normalement on utilise un serveur web.
Pour ne pas te prendre la tête je te conseille sur mac : MAMP.
Dans ta barre d'adresse tu ne dois plus voir un chemin de fichier long de style file:///Users/Pauline/Desktop/OpenClassRoom/
Mais une adresse web de type http://localhost/openclassroom/
Il y'a des tuto pour Mamp un peu partout et donc il ne devrait pas t'être difficile de mettre tes fichier au bon endroit.

-
Edité par themagicdavid 5 avril 2015 à 9:58:30

Adepte de wordpress et de Génésis - je dois finir mon degliame.net, mais c'était après electroniques.fr ...

thenif

5 avril 2015 à 11:49:08

Bonjour,

IE c'est Internet Explorer.

Si tes 2 fichiers sont dans le même dossier ne modifie pas ton : <link rel="stylesheet" Href="style.css" />

En revanche j'essaierais d'installer un autre navigateur, ex: Firefox, et d'ouvrir mon fichier html avec cet autre navigateur pour voir si lui prend en compte mon fichier css

" Choisissez un travail que vous aimez et vous n'aurez pas à travailler un seul jour de votre vie " (Confucius)

Lucky13

5 avril 2015 à 12:35:41

thenif > je vois pas le rapport avec le navigateur, quelle est ton idée?

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

thenif

5 avril 2015 à 13:12:01

Lucky13 a écrit:

thenif > je vois pas le rapport avec le navigateur, quelle est ton idée?

J'ai le problème chez moi, lorsque je fait une page web avec un fichier css, IE ne va pas lire mon css, pour qu'il le prenne en compte il faut que j'ouvre ma page en passant par wamp! et oui bizarre vous avez dit bizarre!

Alors que si j'ouvre mon fichier html avec Firefox je n'ai pas besoin de passer par wamp pour que mon css soit pris en compte.

Voilà pourquoi je suggère de tester avec un autre navigateur étant donner que le lien vers le css à l'air d'être bon.

" Choisissez un travail que vous aimez et vous n'aurez pas à travailler un seul jour de votre vie " (Confucius)

Lucky13

5 avril 2015 à 13:43:21

Ok, jamais eu se comportement et Wamp n'est pas fait pour ça.

Peut-être dans la config de lecture de ce type de fichier par défaut, vu que ton IE ne reconnait pas l'extension.

Donc oui bizarre...

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Cocopop

5 avril 2015 à 15:11:20

C'est toujours pas réglé cette histoire de CSS introuvable

Bon voilà la solution que je te propose car personne ne connait ton architecture...

Là où il y a ton fichier css met une image.

Là où il y a ton fichier html créer un fichier "test.html".

Dedans mets ceci :

    <img src="../liendetonimage.jpg" alt="" title="" />

Ensuite ouvre le fichier test.html via n'importe quel navigateur, si l'image est affiché alors tu sauras quel chemin prendre pour ton css.

debacqpauline

5 avril 2015 à 22:57:34

Cocopop, l'idée de l'image est bonne pour voir si je suis le bon chemin. J'ai réussi à mettre une image provenant du même dossier où le css est rangé donc ce n'est pas ça.

Voici mon arborescence :

<!DOCTYPE html>

<head>

href="Users/POPO/Desktop/OpenClassRoom/CV.html/style.css" />

<style>

{

color: blue;

}

</style>

<title> CV de Pauline Debacq </title>

</head>

<body>

<h1> <strong> CV de Pauline Debacq </strong> </h1> <br/>

<h2> Assistante Marketing </h2> <img src="/Users/POPO/Pictures/photoCV.jpeg" alt="PhotoCV" />

<h3> Formation </h3>

<p>

<ul>

<li>Licence Professionnelle en Marketing International 2013 - 2014</li>

<li>BTS Commerce International 2011-2013</li>

<li>Baccalauréat Littéraire 2008</li>

</ul>

</p>

<h3> Expérience </h3>

<p>

<ul>

<li>Missions de Freelance en Webmarketing 2014 - 2015</li>

<li>Stage en Agence Web 2014</li>

<li>Chef de projet en communication numérique pour agence touristique marocaine 2014 - 2014 </li>

</ul>

</p>

<h3>Compétences</h3>

<p>

<ul><h4>Experte:</h4>

<li> Création de contenu optimisé</li>

<li>Analyse de réseaux</li>

</p>

<h4>Utilisation courante:</h4>

<p>

<ul>

<li>screaming frog</li>

<li>google analytics</li>

<li>google adwords</li>

</ul>

</p>

</body>

et le css :

{

font-family: impact;

}

J'attends de télécharger MAMP... je vous tiens au courant. Merci pour votre aide !

Lucky13

5 avril 2015 à 22:59:48

Non une arborescence ressemble à cela:

Exemple:

monProjet /

- fichier_1.html

- fichier_2.html

- style.css

/mesImages /

- img1.png

- img2.png

C'est ta base de travail...

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Foghall

6 avril 2015 à 17:34:16

Qu'as-tu dans ton dossier "/OpenClassRoom" ? Liste nous les fichiers.

debacqpauline

7 avril 2015 à 16:32:06

Bonjour,

J'ai :

/OpenClassRoom

- 1CVOpenClassRoom.esproj

- Archive.zip

- CV.txt

- Style.css

- Css.txt

- CV.html

- CV.zip

- Style.css.esproj

...mué c'est trop le bazar non ? Ca peut poser problème ?

Lamecarlate

7 avril 2015 à 16:49:06

Ton fichier c'est Style.css avec une majuscule ? Alors mets la majuscule dans l'appel au css dans le fichier html.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

debacqpauline

7 avril 2015 à 17:20:16

ah non c'est moi, le fichier css tout seul est:

style.css

mais il y a Style.css.esproj

themagicdavid

7 avril 2015 à 18:09:01

Les fichier .esproj sont des fichier de conf pour espresso, c'est grace à cela qu'il est capable de garder ton espace de travail comme tu l'as quitté …

Mais tu ne devrais en avoir qu'un seul.
Tu as du probablement ajouter deux Projets le meme dossier.
tu peux en supprimer un sans problème.

Adepte de wordpress et de Génésis - je dois finir mon degliame.net, mais c'était après electroniques.fr ...

rga

7 avril 2015 à 18:24:00

salut,

je vais peut-être dire une c****rie, mais dans le html, tu devrais avoir :

<!DOCTYPE html>
<html>
 <head> TITRE, CSS
 </head>
 <body> TON TEXTE
 </body>
</html>

sauf que dans ton code affiché le 05/04 à 22h57, tu as :

<!DOCTYPE html>
 <head> TITRE, CSS
<link href="Users/POPO/Desktop/OpenClassRoom/CV.htmlstyle.css" rel="stylesheet" 
 href="Users/POPO/Desktop/OpenClassRoom/CV.html/style.css" />
 </head>
 <body>
 </body>

là forcément, il va pas en vouloir (deux href dans un link ). à ta place :

<link rel="stylesheet" href="Users/POPO/Desktop/OpenClassRoom/style.css" media="screen" />

-
Edité par rga 7 avril 2015 à 18:25:06

Winter Is Coming - Explorez le forum : votre problème a déjà dû être traité ailleurs

1 2 >>

Fichier CSS inactif

Je n'arrive pas à faire le lien entre mon fichier CSS et celui HTML

Supprimer

Modérer

Signaler le message aux modérateurs