Feuille de style externe sans effet

Zibou · Message par **Zibou** » 21 avr. 2011, 21:18

Bonsoir,

Un nouveau problème.

Mon "prototype" de site était correct. Mais avec les règles CSS internes, dans l'en-tête du fichier.

J'ai décidé de transférer tout ceci dans un fichier séparé : copier/coller sur Notepad++, sauvegarde des fichiers, création d'une feuille liée avec Cascade : et plus rien ne fonctionne, plus de styles !

Ma première question : peut-on avoir plusieurs feuilles de style liées pour un fichier Html ? (ou doit-on mettre toutes les règles dans la même feuille ?).

Deuxième problème, si j'en crois l'ouvrage de Mathieu Nebra (édit. Eyrolles), la balise link devrait être du type :
<link title="style" media="all" rel="stylesheet"
href="../../../../style.css" type="text/css" />

Or, je n'ai pas ceci, mais :
<link title="style" media="all" rel="stylesheet"
href="../../../../style.css" type="text/css">

Sans le slash / final, avant >. Et si je vais dans le code source pour le rajouter, je le tape, je sauvegarde (Komposer revient en mode "normal"), je reviens dans le code source pour constater que mon slash a disparu. Et que ma feuille de style reste sans effet. J'ai recommencé 4 ou 5 fois la même manip. sans succès.

Où me suis-je planté ? ?

Amicalement à tous,

atheo · Message par **atheo** » 22 avr. 2011, 08:29

peut-on avoir plusieurs feuilles de style liées pour un fichier Html

sur ce point je peux répondre. c'est oui.
regarde sur les modules d'alsacreation. il y a une feuille générale et une feuille spécifique au modèle.
pour le reste pas assez calé...

bon courage

Message par **Ymai** » 22 avr. 2011, 08:45

Bonjour
"Slash" final ou pas "slash" final: toute la question repose sur le type de balisage choisi.
En XHTML, il faut terminer la balise par un "/".
En HTML, pas de balise "/" finale.
Pour le document en cours, il faut donc voir quel était le type choisi.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>test</title>
<link rel="stylesheet" href="test" type="text/css" />
</head>
<body>
<p>test</p>
</body>
</html>

ou

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>test</title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<p>test</p>
</body>
</html>

Cela se configure dans les préférences de KompoZer. Attention: ce n'est pas rétroactif. Ne s'applique que sur les prochaines pages. Pour celles qui sont déjà créées, je crains qu'il faille faire les modifications de DOCTYPE "à la main" dans un éditeur externe.

Ce souci étant résolu, il nous restera à comprendre pourquoi les feuilles de styles (même multiples) peuvent éventuellement rester sans effet. Vu la longueur du chemin, je pencherais pour une faute de frappe...
Y a-t-il moyen de voir cela en ligne quelque part?

Zibou · Message par **Zibou** » 22 avr. 2011, 21:18

Bonsoir,

OK, vu. Ma page est en HTML 4.01 Transitional. Je comprends donc pour quoi le "slash" final n'est pas enregistré. Et il est vrai que le livre de Mathieu Nebra traite du Xhtml uniquement.

Après avoir passé l'après-midi à grattouiller mon clavier, je peux pousser le diagnostic un peu plus loin.

Si je mets plusieurs feuilles de style « liées » pour une page, seule la feuille de style la plus « haute » aura de l'effet (en jouant sur les flèches « monter » ou « descendre » dans Cascades). À l'exception de la règle « liste à puces » (symptômes idem ci-dessous). Vous avez dit bizarre ?

Alors, j'ai fait une seule et unique feuille de style, réunissant toutes les autres (format ; lignes h1, h2, .. ; boutons réactifs ; et listes à puces).

Là, tout marche ... presque. En cochant et en décochant la case « désactiver », il est facile de constater que la règle « format » fonctionne bien, de même pour la règle « boutons réactifs » ; idem pour la règle « lignes h1, ... », ...

Seule la règle « listes à puces » (ul, ul ul , ul ul ul , ... ) fait la mauvaise tête : il n'y a pas que la nature des puces, dans cette règle, mais aussi les polices, le style (italique ou pas, ... ), les marges et espacements, ... . Tout ceci fonctionne bien. Sauf les puces « images » (au format Gif) qui n'arrivent pas à s'imposer face aux puces par défaut (alors que je si je fais un copier/coller de cette règle et que je la mets comme feuille interne, tout fonctionne !).

J'ai lu, vérifié et revérifié les chemins (vers ces puces images), j'ai rechargé ces chemins dans Cascades (bouton « parcourir »), j'ai écrit avec le clavier, puis copier/coller, .... , sans succès. Seul une partie de la règle s'applique, mais pas de puces images.

Voilà qui est plus précis.

Le fait qu'une seule feuille de style s'applique, en fonction de sa position hiérarchique dans Cascade est surprenant, mais finalement pas pénalisant, puisqu'il est toujours possible de rédiger une seule et unique feuille.

Mais si celle-ci pouvait s'appliquer à 100% ...

Amicalement,

Message par **Ymai** » 22 avr. 2011, 23:12

Bonsoir/jour
Je confirme partiellement le problème.
Mais je vois qu'il y a aussi résurgence du vieux bug qui introduit des *| dans les directives de style.
Peut-être y a-t-il un lien? Je parierais bien quelques pistoles là-dessus.
D'autant que le codage manuel dans une feuille de styles séparée ne pose aucun souci: http://sapajou.be/test/test.html
Malheureusement, je n'aurai pas la possibilité d'approfondir avant deux ou trois jours.

Gagea · Message par **Gagea** » 23 avr. 2011, 09:22

Bonjour,
Pour ma part quand je veux appliquer des puces personnalisées à une liste je crée une feuille de style interne à la page et tout fonctionne. C'est vrai que sur une feuille liée j'ai rencontré aussi des problèmes.

geekone · Message par **geekone** » 29 mai 2011, 09:45

Bonjour à tous, moi, je fais des feuilles de styles simples (je suis débutant) et elles marchent sur IE et google chrome mais pas sur mozilla firefox je ne comprend pas .
Merci d'avence.

Message par **Ymai** » 29 mai 2011, 11:37

Bonjour

geekone a écrit :Bonjour à tous, moi, je fais des feuilles de styles simples (je suis débutant) et elles marchent sur IE et google chrome mais pas sur mozilla firefox je ne comprend pas .
Merci d'avence.

Merci de faire un copier/coller du code CSS ici-même ou alors de nous indiquer un lien vers une page en ligne où il est possible d'observer le problème.

Invité · Message par **Invité** » 31 août 2011, 15:25

Bonjour,

je fais remonter ce sujet car moi aussi, j'essaie de mettre des feuilles de style en cascade mais seule la première est lue. Je ne comprends pas. pouvez-vous m'aider svp. Voici le code :

Feuille de style "Pied_de_page

Code : Tout sélectionner

#copyright
{
font-family: 'Times New Roman';
font-size: 0.7em;
font-style:italic;
/*Pour positionner le pied de page en bas de page*/
position:relative;
bottom:0px;
margin-left:0px;
/*taille du bloc*/
width:99%;
border: solid black 1px;
}

#validationCSS
{
position : absolute;
border: solid red 1px;
width:80px;
top:20px;
right:15px;
}

Feuille de style "MPSI_cours_TD_TP"

Code : Tout sélectionner

/*Feuille de style pour tableau de liens vers les documents de cours*/


body
{
background-image:url(../Images/petit_prince_incolore.gif);
background-repeat:no-repeat;
background-position:right bottom;
}


ul/*Liste non indentée, sans puces, aligné avec le texte "normal"*/
{
list-style-type:none;
margin-left:-40px;
}

.caseColor:hover
{
font-family: "Times New Roman";
font-size:1em;
color:white;
background: #616161;
text-decoration:none;/*liens non soulignés*/
}

.caseColor:focus
{
font-family: "Times New Roman";
font-size:1em;
color:white;
background:#616161;
}

.caseColor:active
{
font-family: "Times New Roman";
font-size:1em;
color:white;
background:#616161;
}

.fondLigneImpaire
{
background-color:#f2f2f2;
}

.fondLignePaire
{
background-color:#f9f9f9;
}

.icone/*Pour ne pas que les icônes "liens" se touchent, on augmente les marges internes*/
{
padding-top:2px;
padding-bottom:2px;
}

Code HTML

Code : Tout sélectionner

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict //EN"
blabla>


<html>

<head>

<title>Optique en MPSI à Saint Exupéry</title>

<meta name="Author" 
      content="David Malka"/>
<meta http-equiv="content-type"
      content="text \html;charset=iso-8859-1"/>
<meta http-equiv="Content-Type"
      content="text \html;charset=iso-8859-1"/>
<meta http-equiv="Ressource-type"
      content="document"/>
<meta http-equiv="Description"
      content="Cours classe préparatoire MPSI"/>
<meta http-equiv="Keywords"
      content="MPSI, CPGE, classe préparatoire, grandes écoles, ingénieur,
	       lycée Saint Exupéry,cours, exercices, physique, chimie, optique">
<meta http-equiv="Distribution"
      content="global"/>
<meta http-equiv="Copyrights"
      content="David Malka"/>

<link rel="stylesheet" media="screen" type="text/css" title="style_Pied_de_page" 
href="../Styles/CSS_Pied_de_page.css" />
<link rel="stylesheet" media="screen" type="text/css" title="style_optique" 
href="../Styles/CSS_MPSI_Cours_TD_TP.css" />

<!--Chargement de la feuille de style-->

</head>


<body>

<div>

<table border="1"cellpadding="15" width="100%">

	<tr class="fondLigneImpaire">
		<th align="center" colspan="3">Optique MPSI</th>
	</tr>

	<tr class="fondLignePaire" align="left">
		<th>Travaux Pratiques (T.P. - cours)</th>
		<th>Travaux Dirigés (T.D.)</th>
	</tr>

	<tr>
	<!-- à faire: onMouseOver="window.status='Pour télécharger le document, clic droit et enregistrer sous'"-->
  
		<td class="caseColor"> <!--inutile : déjà pris en compte dans la feuille de style ?-->
		<!--script gérant la frame ciblée par le lien suivant que la page se trouve
		dans la frame corps ou bien dans un nouvelle onglet : "target self" devrait suffir-->

		<!--Lien sous forme d'une icône PDF-->


		<a href="TP/TPO1_lois_Snell-Descartes.pdf" target="_self">
		<img class="icone" src="../Images/PDF.jpg" name="lien_pdf" alt="Télécharger" border="0" align="middle"
		onMouseOver="window.status='Pour télécharger le document, clic droit et enregistrer sous'"/> <!--Ne fonctionne pas-->
		</a>
		TP-cours O1 Lois de Snell-Descartes 


		</td>

		<td class="caseColor">
		
		<ul>
  
			<li>
			<a href="TD/TDO1 Lois de Descartes.pdf" target="_self">
			<img class="icone" src="../Images/PDF.jpg" name="lien_pdf" alt="Télécharger" border="0" align="middle"/>
			</a>
			TD O1 Application des lois de Descartes
			</li>
		
			<li>
			<a href="TD/mirage_chaud.jpg" target="_blank">
			<img class="icone" src="../Images/icone_image.jpg" name="lien_pdf" alt="Télécharger" border="0" align="middle"/>
			</a>
			Mirage chaud
			</li>
			
			<li>
			<a href="TD/mirage_froid.jpg" target="_blank">
			<img class="icone" src="../Images/icone_image.jpg" name="lien_pdf" alt="Télécharger" border="0" align="middle"/>
			</a>
			Mirage froid
			</li>
	
		</ul>

	</tr>

	<tr>
		<td class="caseColor">
		<a href="" target="_self">
		<img src="../Images/PDF.jpg" name="lien_pdf" alt="Télécharger" border="0" align="middle"/></a>

		</td>
  
		<td class="caseColor">
		<a href="" target="_self">
		<img src="../Images/PDF.jpg" name="lien_pdf" alt="Télécharger" border="0" align="middle"/></a>

	</tr>

</table>

</div>

<div>
<h4>Animations et simulations</h4>
</div>

<div>
<h4>Et aussi...</h4>
 
<a href="Cours/Relations_triogonométriques.pdf" target="_self">
<img src="../Images/PDF.jpg" name="lien_pdf" alt="Télécharger" border="0" align="middle"/>
</a>
Relations trigonométriques à connaître


</div>

<!--Inclusion du pied de page commun à toutes les pages-->
<?php
include("../MPSI_St-Ex_pied_page_2.php");
?>

</body>

</html>

Code HTML du pied de page

Code : Tout sélectionner

<div id="copyright">
<p>
<hr/>
Auteur : David Malka 
<br/>
Licence : <a href="../Licence.php" target="Corps" >
<img src="../Images/Licence_CC.png" name="License" alt="Licence Creative Commons" align="middle" border="0px"/>
<!--border="0px" supprime le cadre autour de l'image servant de lien-->
<!--Revoir le positionnement de l'image-->
</a>
<br/>
Dernière révision : <script type="text/JavaScript" language="JAVASCRIPT" src="../Scripts/DateMiseAJour/DateMiseAJour.js"> 
                    </script>
<br/>
URL : <a href = "http://localhost/Site%20Web%20MPSI%20St-Ex_V2.0/Page%20principale/meta_index.php"
 target="_top">
http://localhost/Site%20Web%20MPSI%20St-Ex_V2.0/Page%20principale/meta_index.php </a>
</p>

	<div id="validationCSS">
	<a href="">
        <img style="border:0;width:88px;height:31px"
             src=""
             alt="CSS Valide !" />
    </a>
	</div>
	
</div>

Merci beaucoup

Message par **Ymai** » 31 août 2011, 16:57

Bonjour
Je ne suis pas sûr de bien comprendre.
Quel est le statut du code HTML du "pied de page"? Est-il destiné à être inclus dans le code HTML principal? Si c'est de ce côté qu'il y a problème, ce serait bien de préciser le contexte.
Pour ce qui est du premier fichier HTML, la feuille de style y appliquée fonctionne sans souci (si l'on se souvient -mais ma mémoire est un peu défaillante au sujet de ce logiciel- que certaines versions de IE n'interprètent pas les directives du type .blabla:hover ).
Mais pour FF (et d'autres), c'est OK.

Geckozone

Feuille de style externe sans effet

Feuille de style externe sans effet

Re: Feuille de style externe sans effet

Re: Feuille de style externe sans effet

Re: Feuille de style externe sans effet

Re: Feuille de style externe sans effet

Re: Feuille de style externe sans effet

Re: Feuille de style externe sans effet

Re: Feuille de style externe sans effet

Re: Feuille de style externe sans effet

Re: Feuille de style externe sans effet

Qui est en ligne ?