problème avec le tutorial CSS

Appliquer un style à des balises

Sujet résolu

4 janvier 2006 à 10:22:55

Bonjour

Je suis le tutorial et pour l'instant tout est OK, mais aujourd'hui je suis dans la partie " utiliser les class et id". Pour les exemple je fais un copier coller des code css et xhtml mais le texte reste toujours en noir:
.important
{
color: red;
font-size: 18px;
}
poutant j'utilise notepad++ et j'ai choisis le language css pour éditer le fichier css, j'ai enregistré mon fichier essai.css, mais je n'ai pas une partie du texte rouge comme dans l'exemple, qui peut m'expliquer j'ai essayé plusieurs fois.

A+

jp949

4 janvier 2006 à 10:31:18

on peut voir le code html stp?

kercroam

4 janvier 2006 à 14:58:06

Salut jp949

Bon c'est le code du tutorial que je copie et colle dans notepad++

<!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" xml:lang="fr" >
<head>
<title>Page d'exemple pour tester le CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="essai2.css" />
</head>
<body>
<h1>Découverte du CSS</h1>
<p>
Bonjour !<br />
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour les tutoriaux du <a href="http://www.siteduzero.com">Site du Zér0</a>
</p>
<h2>Ce n'est que du blabla</h2>
<p>
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q class="important">C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
J'aime la choucroute en conserve.<br />
Vive les frites !
</p>
<p class="important">
Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
</p>
</body>
</html>

jp949

4 janvier 2006 à 15:04:32

recopie le code .important dans le <head><style type="text/css">copie .important ici</style></head>
pour voir si c'est un probleme avec le fichier .css
ou autre chose

Nyro Xeo

4 janvier 2006 à 15:05:22

...Et utilise la balise zCode <code> !

http://www.siteduzero.com/tuto-3-198-1-bien-utiliser-le-zcode.html.

kercroam

4 janvier 2006 à 15:39:05

J'ai rajouté la ligne "</style></head>" dans le head mais ça ne change rien

<!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" xml:lang="fr" >
<head>
<title>Page d'exemple pour tester le CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="essai2.css" />
</style></head>
</head>
<body>
<h1>Découverte du CSS</h1>
<p>
Bonjour !<br />
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour les tutoriaux du <a href="http://www.siteduzero.com">Site du Zér0</a>
</p>
<h2>Ce n'est que du blabla</h2>
<p>
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q class="important">C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
J'aime la choucroute en conserve.<br />
Vive les frites !
</p>
<p class="important">
Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
</p>
</body>
</html>

TimeSplitters

4 janvier 2006 à 15:49:32

Peut-être parce que un css ne peut être lu sans être sur un serveur... Si tu l'as pas mis sur un serveur, pour tes codes, mets

Pour les liens
et

...pour ton fichier css

Je pense que ça peut marcher

Edit: Pour voir le chemin vers ton fichier, clique droit sur celui-ci, et va dans Propriété en bas. Ensuite, tu verras une page, et là vers le haut il y aura le code commençant par "C:Documents and Settings\"... Tu le copies/colles et voilà

jp949

4 janvier 2006 à 15:49:48

je crois que tu t'es melangé les pinceaux avec les balises copie et colle ce code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head><title>Welcome !!</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="untitled" href="Welcome%20%21%21_fichiers/style.css" />
<style type="text/css">
.important {color:red; }
</style></head><body>

<h1>Découverte du CSS</h1>
<p>
Bonjour !<br />
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour les tutoriaux du <a href="http://www.siteduzero.com">Site du Zér0</a>
</p>
<h2>Ce n'est que du blabla</h2>
<p>
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q class="important">C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
J'aime la choucroute en conserve.<br />
Vive les frites !
</p>
<p class="important">
Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
</p>
</body></html>

JulFisher

4 janvier 2006 à 15:53:48

Ton fichier .css a pour non "essai.css" alors qu'il est y indiqué dans le <link /> comme "essaie2.css". Renomme juste ton fichier .css.

Citation : TimeSplitters

Peut-être parce que un css ne peut être lu sans être sur un serveur... Si tu l'as pas mis sur un serveur, pour tes codes, mets

<a href="C: le chemin vers ton fichier">..</a>

Pour les liens
et

<link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="C: lien_vers_ton_fichier_css/essai2.css" />

...pour ton fichier css

Je pense que ça peut marcher

C'est l'intérêt des liens relatifs de justement ne pas à avoir à redéfinir les adresses

http://julfisher.free.fr/divers/aides_xhtml_css/css.html#lien_absolu_relatif

kercroam

4 janvier 2006 à 16:01:51

ok le code de jp949 fonctionne, je vais recommencer le fichier pour tester.
Merci

TimeSplitters

4 janvier 2006 à 16:06:10

Citation : JulFisher

Ton fichier .css a pour non "essai.css" alors qu'il est y indiqué dans le <link /> comme "essaie2.css". Renomme juste ton fichier .css.

Citation : TimeSplitters

Peut-être parce que un css ne peut être lu sans être sur un serveur... Si tu l'as pas mis sur un serveur, pour tes codes, mets

<a href="C: le chemin vers ton fichier">..</a>

Pour les liens
et

<link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="C: lien_vers_ton_fichier_css/essai2.css" />

...pour ton fichier css

Je pense que ça peut marcher

C'est l'intérêt des liens relatifs de justement ne pas à avoir à redéfinir les adresses

http://julfisher.free.fr/divers/aides_xhtml_css/css.html#lien_absolu_relatif

Je disai ça parce que ça permet de mieux assimiler les choses

kercroam

4 janvier 2006 à 16:11:49

effectivement ce n'est pas essai mais essai2 qu'il fallait, je n'ai pas vu sur le tutorial qu'il fallait l'appellait "essai2".
Ces petites erreurs permetent d'apprendre encore mieux.

Par contre j'ai du mal a envoyer les messages il faut plusieurs fois que je clique sur "envoyer"

A++