Aller au contenu

[Réglé]Lier une feuille de style externe

Oublieuse

Par Oublieuse
dans (X)HTML et CSS

 Partager

Sujets conseillés

Oublieuse

Oublieuse

Posté
Posté (modifié)

Voilà, j'ai un problème avec ma feuille de style externe. J'ai bien spécifié ceci:

<link rel="stylesheet" type="text/css" href="mafeuille.css">

dans le head de ma page.

Cependant, ça pose problème quand ma page n'est pas située à la racine du site. J'ai essayé plusieurs noms de chemins pour ma feuille de style:

href="../mafeuille.css"

href="Css/mafeuille.css"

(ma feuille de style est située dans le dossier Css qui est lui-même à la racine du site, et ma page est située dans un autre dossier à la racine du site: "site/dossierpage/page.htm" et "site/dossiercss/mafeuille.css")

Là je suis un peu perdue, je ne sais pas comment faire, alors merci d'avance!!!

Modifié par Oublieuse
Denis

Denis

Posté
Posté

Pour que ta feuille de style puisse être lue depuis n'importe quel fichier situé n'importe ou dans l'arborescence de ton site, il suffirait simplement que tu commences l'appel au fichier par un "/" comme dans :

<link rel="stylesheet" type="text/css" href="/css/mafeuille.css" />

Cela fonctionnera toujours dans la mesure ou ton répertoire est effectivement à la racine du serveur, qu'il s'appelle bien css et qu'il contient bien une feuille de style qui s'appelle bien mafeuille.css ^_^

Oublieuse

Oublieuse

Posté
  • Auteur
Posté

Snif! ça marche pas... la page s'affiche, mais sans la mise en page css. Je ne comprends pas pourquoi.

Denis

Denis

Posté
Posté

Tu peux nous donner des exemples de ton code ? Une idée précise de l'organisation de ton site, le nom des fichiers et des répertoires, les technologies utilisées, etc.

Oublieuse

Oublieuse

Posté
  • Auteur
Posté (modifié)

Voici ma feuille de style ("brin_d_ailleurs/Css/majeur.css"):

<style type="text/css">
<!--
html, BODY {
	margin:0;
	padding:0;
	height:100%;
	background-color: #ffcc00;
}
a:link { color:#ffcc99; text-decoration:none; }
a:visited { color:#ff9966; text-decoration:none; }
a:hover { color:#005CB9; text-decoration:underline; }
#titre {
	background-color: #eb613d;
	height: 15%;
	font-family:Book antiqua, Arial;
	font-size:60px;
	text-align:center;
}

#menuhaut {
	width:100%;
	height:5%;
	background-color:#b84747;
	text-align:center;
}
.menuhaut {
	width:12%;
	float:left;
	margin-left:5px;
	text-align:center;
}
.menuhaut1 {
	width:18%;
	float:left;
	text-align:center;
}
#bzg {
	float:left;
	height:20px;
	width:28px;
	link:url(http://www.breun-bed.tk);
}

#contenu {
	min-height: 75%;
	margin-top:10px;
}

#menu {
	float: left;
	width: 20%;
	min-height:75%;
	margin-bottom:4px;
}
.titremenu {
	background-color:#b84747;
	text-align:center;
	font-family:Book antiqua;
	font-size:30px;
	width:100%;
	font-weight:bold;
}
.rubrique, .menuhaut, .menuhaut1 {
	font-family:Comic Sans ms;
	font-size: 16px;
	text-align: left;
	color:#ffcc99;
}
.rubrique {
	background-color: #eb613d;
	float: left;
	width: 100%;
}
.lienmenu {
	font-family:book antiqua, arial;
	font-size:14px;
	color:#ff9966;
}

#centre {
	margin-left:22%;
	font-family:Book antiqua, arial;
	font-size:16px;
}

#image {
	float:left;
	width:200px;
	height:160px;
}
#centre a:link {
	text-decoration:underline;
	font-weight:bold;
	color:black;
}
H1 {
	font-family:Book Antiqua;
	font-size:25px;
	color:#b84747;
	text-align:center;
}
H2 {
	font-family:comic sans ms;
	font-size:16px;
	text-decoration:underline;
	font-weight:normal;
}
.date {
	font-size:14px;
	text-decoration:underline;
	font-style:italic;
	font-weight:bold;
}
.loupe {
	font-weight:bold;
	color:#b84747;
	font-size:15px;
}


-->
</style>

Et voici le code de la page en question ("brin_d_ailleurs/MenuHaut/moi.htm")

<HTML>
<HEAD>
<TITLE>Moi</TITLE>
<META NAME="generator" CONTENT="ToniArts EasyHtml v.2.2">
<link rel="stylesheet" type="text/css" href="/Css/majeur.css" />
</HEAD>

<BODY bgcolor="#ffcc00">
<div id="titre">Brins d'ailleurs<BR><span style="font-size:16pt; font-style:italic; font-weight:bold ">Écrits d'une rêveuse</span></div>
<div id="menuhaut">
	<div class="menuhaut"><A HREF="http://www.forums-brindailleurs.tk">Forum</A></div>
	<div class="menuhaut"><A HREF="qui_suis_je.htm">Qui suis-je?</A></div>
	<div class="menuhaut1">Liens webmestres</div>
	<div class="menuhaut1"><A HREF="pub.htm">Page partenaires</A></div>
	<div class="menuhaut"><A HREF="courrier.htm">M'écrire</A></div>
	<div class="menuhaut"><A HREF="http://services.hit-parade.com/hp-livredor.asp?site=323139">Livre d'or</A></div>
	<img id="bzg" title="E brezhoneg marplij!" src="images/drapeaubzh.jpg" />
</div>
<div id="contenu">
  <div id="menu">
	<div class="titremenu">Voyages</div>
	<div class="rubrique">Carnets<br>
<ul class="lienmenu">
	<li><A HREF="l_irlande/depart.htm">L'Irlande à vélo</A></li>
	<li><A HREF="aperitif_balkans/alice.htm">Apéritif Balkans</A></li>
	<li>NostAlger</li>
</ul>
Avant le départ<br><A HREF="liens.htm">Liens</A></div>
	<div class="titremenu">Lis et rature</div>
	<div class="rubrique">Contes<br>
<ul class="lienmenu">
	<li>Méli-Méla</li>
	<li>Le voyage de Manimita la fourmi</li>
	<li>Au temps où la mer mourait de froid</li>
</ul>
Nouvelles<br>
<ul class="lienmenu">
	<li>Guerre</li>
	<li>Apéritif Balkans</li>
	<li>NostAlger</li>
</ul>
Liens</div>
  </div>
  <div id="centre">
<H1>Titre</H1>

Texte<BR>

<H2>Titre</H2>
Texte

<H2>Titre</H2>
Texte

<H2>Titre</H2>
Texte

<H2>Titre</H2>
Texte

</div>
</div>
</BODY>
</HTML>

Voilà! Bon, c'est un peu long, mais je ne sais pas trop ce qui vous sera utile et ce qui ne le sera pas, alors j'ai tout copié, je vous ai juste épargné le texte!! :D

Technologies: euh, aucune...

Modifié par Oublieuse
Oublieuse

Oublieuse

Posté
  • Auteur
Posté

au fait, je précise que sur ma page d'index (située, elle, à la racine du site), je n'ai aucun problème. Donc à priori ça ne vient pas de la feuille de style. Merci d'avance pour vos réponses, car là je m'arrache les cheveux!

MissMonde

MissMonde

Posté
Posté

Bonjour Oublieuse,

une feuille de style externe ne doit comporter aucune mention autre que les styles. donc :

<style type="text/css">

<!--

à supprimer (début de la feuille)

-->

</style>

à supprimer (fin de la feuille)

essaie déjà comme ça.

Titag

Titag

Posté
Posté

Salut !

Essaye :

<link rel="stylesheet" type="text/css" href="<?=$HTTP_HOST;?>/Css/majeur.css">

Oublieuse

Oublieuse

Posté
  • Auteur
Posté
Bonjour Oublieuse,

une feuille de style externe ne doit comporter aucune mention autre que les styles. donc :

<style type="text/css">

<!--

à supprimer (début de la feuille)

-->

</style>

à supprimer (fin de la feuille)

essaie déjà comme ça.

<{POST_SNAPBACK}>

Salut !

Essaye :

CODE

<link rel="stylesheet" type="text/css" href="<?=$HTTP_HOST;?>/Css/majeur.css">

Merci à tous les deux, mais ça ne change strictement rien...

Est-ce que je vais être obligée de mettre toutes mes pages à la racine du site??? :nono:

Oublieuse

Oublieuse

Posté
  • Auteur
Posté (modifié)

Toujours rien... je ne comprends pas.

Je précise de plus qu'avec ma page index.htm, je n'ai eu aucun problème. Je ne vois vraiment pas d'où ça peut venir!

Et si je mets la page moi.htm à la racine du site, tout marche comme il faut... c'est désespérant... :(

Modifié par Oublieuse
Oublieuse

Oublieuse

Posté
  • Auteur
Posté

Bon, ça y est, j'ai trouvé... c'était tout con, et je pensais l'avoir déjà essayé tellement c'était simple! MissMonde, c'est toi qui avais raison...

<link rel="stylesheet" type="text/css" href="../Css/majeur.css" />

Les deux points avant le slash!

Bon, ben désolée pour le dérangement!

MissMonde

MissMonde

Posté
Posté
c'était tout con

eh oui, on le sentait bien, tous, que c'était un petit truc de rien, qu'on passe des heures à chercher, et qui fait qu'à la fin on ne voit plus rien du tout.

en tout cas, on est super content quand on l'a trouvé !! :D;)

Bonne continuation :flower:

Sylvain Trovalet

Sylvain Trovalet

Posté
Posté

Ton répertoire Css est bien à la racine du site ?

Si c'est vraiment le cas alors ce code ci devrait marcher

<link rel="stylesheet" type="text/css" href="/Css/majeur.css" />

On se répète mais à priori c'est bon. J'ai crû voir que tu étais hébergé chez free (chez wanadoo je cherche encore leur arborescence)

Titag

Titag

Posté
Posté
<link rel="stylesheet" type="text/css" href="../Css/majeur.css" />

Les deux points avant le slash!

Effectivement cela marchera pour un niveau de répertoire. Mais pas si tu descend d'un ou plusieurs niveaux supplémentaires.

Genre tu as

A la racine : / - ca marche

Répertoire : /toto - ca marche aussi

Sous -rep : /toto/titi - ca marche plus

Essaye de mettre carrément l'url complète de façon à avoir une adresse absolue et non relative :

<link rel="stylesheet" type="text/css" href="http://www.monsite.com/Css/majeur.css" />

Oublieuse

Oublieuse

Posté
  • Auteur
Posté
Effectivement cela marchera pour un niveau de répertoire. Mais pas si tu descend d'un ou plusieurs niveaux supplémentaires.

Genre tu as

A la racine : /  - ca marche

Répertoire : /toto - ca marche aussi

Sous -rep : /toto/titi - ca marche plus

Essaye de mettre carrément l'url complète de façon à avoir une adresse absolue et non relative :

<link rel="stylesheet" type="text/css" href="http://www.monsite.com/Css/majeur.css" />

<{POST_SNAPBACK}>

Effectivement c'est ce que je pense faire... d'ailleurs je me penche sur les include php, mais euh, comment dire, ça marche pas... pourtant j'ai bien fait comme y disent à Alsacréation, mais chez moi ça marche pas, donce je sais pas trop comment faire... alors je fais "recherche" dans le hub! :idea:

Titag

Titag

Posté
Posté (modifié)

a priori, si tes fichiers sont suffixés .html ca ne marchera pas...

Sauf à configurer le serveur de façon a ce que le php soit interprété dans les fichiers .html :) mais on rentre dans le cadre de l'administration de serveur.

Modifié par Titag
Oublieuse

Oublieuse

Posté
  • Auteur
Posté

En fait ça marche, c'est juste que mon éditeur html ne connaît pas le php... :oops: ... sorry... et j'ai bien mis l'extension php à toutes mes pages.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...