Lien CSS manquant

**lola2009** · 31/12/2014, 17h26

Bonjour,

Je suis débutante dans l’utilisation de CSS et j’essaie d’avoir une première approche en commençant à développer un petit site facile. Mais déjà je rencontre un problème.

J’ai juste commencé par créer mon Header avec Dreamweaver. Lorsque j’attache ma feuille de style avec mon html, le tout fonctionne très bien sur le logiciel mais quand je prévisualise sous navigateurs (je les ai tous essayés) la feuille de style n’est pas reconnue! Du coup je me retrouve avec une page avec 2 images et quelques titres....J’ai essayé de voir d’ou pouvait bien provenir mon erreur en téléchargeant Firebug et il me dit bien que ma feuille de style est manquante.

J’ai du faire une erreur en attachant ma feuille avec le panneau CSS de Dream mais je ne vois pas laquelle!

Quelqu’un a t il rencontré cette erreur?

Voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>mapage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

Merci

**miss_socrates** · 01/01/2015, 17h16

Envoyé par lola2009

Lorsque j’attache ma feuille de style avec mon html, le tout fonctionne très bien sur le logiciel mais quand je prévisualise sous navigateurs (je les ai tous essayés) la feuille de style n’est pas reconnue!

Je pense que la feuille de style n'a pas été enregistrée dans le même répertoire que le fichier html. D'où il ne la trouve pas. Ou alors il faut indiquer le chemin vers le répertoire qui la contient (par ex. Mes documents/style.css)

**lola2009** · 01/01/2015, 23h59

Bonjour miss_socrates,

J’ai bien vérifié, mes fichiers sont tous dans un même dossier.
Je précise que dans ce dossier je n’ai pas de sous-dossier.

J’ai recréer mon lien CSS mais toujours rien!

**miss_socrates** · 02/01/2015, 00h59

Envoyé par lola2009

J’ai essayé de voir d’ou pouvait bien provenir mon erreur en téléchargeant Firebug et il me dit bien que ma feuille de style est manquante.

Pourtant ceci signifie que le chemin vers le fichier n'est pas bon puisqu'il ne le trouve pas.
Et est-ce que ça fonctionne en inline ? (en plaçant les instructions css entre les balises <head> et </head> )
Et avec le bouton "Code en direct", qu'est-ce que cela dit ?

**lola2009** · 03/01/2015, 01h11

Lorsque je passe en code direct cela ne fonctionne plus. Mais lorsque je décoche le bon ’live’ le CSS réapparait!

**lola2009** · 03/01/2015, 02h55

Voici mon CSS peut être qu’il y a un problème à l’intérieur du fichier...pourtant il n’est pas bien complexe

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@charset "UTF-8";
/* CSS Document */
 
@font-face { /* Définition d'une nouvelle police nommée Lighthouse_PersonalUse */
    @font-face { 	font-family: "Lighthouse_PersonalUse"; 
	src:url(Lighthouse_PersonalUse.ttf); 
	src:url(Lighthouse_PersonalUse.otf); 
	src:url(Lighthouse_PersonalUse.eot); 
}	
/*******************************************/
/*                BALISES GEN              */
/*******************************************/
 
* 		{margin:0; padding:0px; border:0;}
body 	{ background:url(file:///Macintosh%20HD/Users/.../Desktop//.png); font-size:14px; color:#000; font-family: 'Lighthouse_PersonalUse', Lucida sans, serif;}
p		{text-align:justify;}
 
/*******************************************/
/*                STRUCT GEN               */
/*******************************************/
 
#global				{width:1280px; height:auto; margin:auto; overflow:auto; float:left;}
#img-ban			{ background-image:url(IMAGE/img-ban.png); width:1280px; height:315px; z-index:0; position:relative;}
#ban-trans			{ background-image:url(IMAGE/ban.png); width:1280px; height:180px; z-index:1; position:absolute;}
#position-titre		{ margin-top:60px; margin-left:45px; z-index:0; position:relative;}
#position-coor		{ margin-bottom: 0px; margin-left: 1000px; font-size: 20px; z-index: 1; position: absolute; left: 3px; top: 54px;}
#global-centre		{width:961px; height:auto; margin:auto; overflow:auto; top:316px; left:161px;}
.titre				{ font-size:60px; font-family:"Lighthouse Personal Use"; color:#000; text-decoration:none;}
.titre2				{ font-size:20px; font-family:"Lighthouse Personal Use"; color:#000; text-decoration:none;}
.coor				{ font-size:18px; font-family:"Lucida Sans Unicode", sans-serif; color:#000;}

**miss_socrates** · 03/01/2015, 06h19

Ce n'est pas le contenu qui est en cause. C'est le fichier qui n'est pas bien lié au fichier html.
Attention dans Dreamweaver il faut bien placer tous les fichiers dans le dossier du projet qui est à créer lors de l'enregistrement du nouveau site. Sinon DW risque de les enregistrer aléatoirement n'importe où. Je pense que c'est ce qui s'est passé.
Il faudrait essayer de recommencer un nouveau projet en faisant attention de ne pas sauter au début cette étape de l'emplacement du site à enregistrer pour que tous les fichiers soient dans le même répertoire.

**lola2009** · 03/01/2015, 17h05

Rien à faire, j’ai fais un nouveau site avec un nouveau dossier sur mon bureau et j’ai créer et enregistré mes pages via le logiciel directement. J’ai copié tout mon code. Copié les images. Je n’ai pas fais de sous-dossier. C’est peut être la façon dont j’attache ma feuille de style qui ne va pas. Je vais pourtant dans la fenêtre CSS à droite de mon logiciel et je clique sur le petit icône lien. Je fais ’attacher ma feuille de style’ et il me génère mon code dans le header.
Toujours le même résultat!!!

**lola2009** · 03/01/2015, 17h24

J’ai également essayé sur le mac de mon amie. J’obtiens les mêmes résultats et je viens de m’apercevoir que la police que j’importe ne fonctionne pas non plus, c’est la loose.

Une semaine pour attacher un CSS faut le faire!! Est ce que cela te dérangerais de jeter un coup d’oeil à mes fichiers??

Le pb doit être évident mais je ne le trouve pas. ( si tu as un adresse mail c mieux, je n’arrive pas à envoyer des fichiers en pièce jointe sur le forum)!!!!

**miss_socrates** · 04/01/2015, 14h29

Pour la police c'est compréhensible, si une police n'est pas installée sur l'ordinateur, elle ne sera pas prise en compte. Et cela arrive souvent entre Mac et PC qui sont deux environnements différents.
OK je vais regarder ton code, je t'envoie un MP.

**miss_socrates** · 05/01/2015, 19h13

Apparemment le fichier style.css est bien lié au fichier index.html mais il y a quelques erreurs au niveau du code css du fichier style.css qui expliquent que la mise en forme principale ne se fait pas
1) Ligne 7: il ne faut pas mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

@font-face{les propriétés}

mais il faut attribuer les propriétés au sélecteur càd à un identifiant (ID) ou à une classe
Donc au lieu de ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

@font-face { font-family: "Lighthouse_PersonalUse";

il faut rédiger quelque chose comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#identifiant {font-family: "Lighthouse_PersonalUse"; }

(#identifiant peut être un <p> ou <body>)
Ceci explique pourquoi le texte n'est pas mis en forme avec la police Lighthouse comme souhaité

2) A la ligne 17, le code n'est pas bon:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

body 	{ background:url(file:///Macintosh%20HD/Users//Desktop//.png); font-size:14px; color:#000; font-family: 'Lighthouse_PersonalUse', Lucida sans, serif;}

Il faut corriger les double et triple /// dans l'url.
Ceci explique que l'image de fond ne s'affiche pas.

Une fois ceci corrigé, j'espère que l'aspect du site sera meilleur...

**lola2009** · 06/01/2015, 21h11

It Works! Merci beaucoup! J’ai juste enlevé la ligne body qui ne servait à rien et j’ai recréé une ligne avec la font comme tu me l’a suggéré.
Par contre dans mon navigateur tout me parait énorme! Je pense que je vais redimensionner mes éléments.