Fichier CSS externe pour définir html

Version imprimable

25/01/2010, 21h18
joanna.ch

Fichier CSS externe pour définir html
Bonsoir à tous,
Je viens de passer un bon nombre d'heures à essayer de définir le style de mon site internet en utilisant un fichier .css externe... Je commence à me décourager :cry:
J'ai suivi les instructions trouvées sur les différents site mais ça ne fonctionne toujours pas et je suis bloquée à ce stade-là. J'espère que vous comprendrez où se trouve mon problème même si je n'utilises pas tout à fait les termes exacts.. je débute complètement:oops:

Alors voilà: j'ai créé un site internet composé de 3 frames (donc j'ai 3 fichiers html différents que j'ai intitulés "haut", "gauche" et "droite") et un fichier html en plus (que j'ai intitulé "main") qui "contient" les 3 frames.

Jusque-là j'espère que j'ai réussi à me faire comprendre...
J'ai donc ajouté dans mon fichier html MAIN le tag

Code:

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

Et parallèlement j'ai créé un fichier .css pour y définir le style de mon site mais je dois me tromper à quelque part parce que le browser ne me le prend pas en considération. Sûrement au niveau du langage? Ci-dessous un exemple d'écriture ds mon fichier .css.
Code:

1 2 3 4 5 { color:red; text-align:left; font-size:8pt }
Je précise que j'ai à chaque fois utilisé notepad pour créer mes fichiers, que ce soit avec extension .html ou .css

Est-ce juste d'ajouter le link à mon fichier css au niveau du fichier html principal qui contient les 3 frames ou devrais-je le mettre sur chaque frame.

En espérant que quelqu'un me lise.. et me comprenne surtout...
Merci d'avance à qui aura la gentillesse de me répondre:)
Joanna
26/01/2010, 03h32
aL1ba
en espérant que ton fichier .css est bien dans la racine du dossier ou se trouve également ton fichier html, cette partie est ok.

pour ce qui est de ton code css, il manque un petit bout de code, très important, c'est le nom ou sélecteur.
Par exemple, pour le css:
Code:

1 2 3 4 5 #wrapper { color:red; text-align:left; font-size:8pt }
et ça va prendre son équivalent en html:
après
Code:

1 2 3 4 5 6 7 <body> <div id="wrapper"> XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXX </div> la fin du div wrapper </body>
faire attention, pour chaque codage en css, tu dois avoir soit un sélecteur ID ou une classe de défini.
Je te conseille fortement d'aller sur w3c et de lire les tuteurs de base, ça va te clarifier le tout, sinon, c'est les bequilles à vie...bye,
26/01/2010, 11h49
joanna.ch

Bonjour,
Merci bien pour ta réponse. www.w3schools.com est justement le site que je consulte depuis le début et je n'y arrive malheureusement toujours pas. Il y a forcément quelque chose qui doit m'échapper... mais quoi?

J'ai inséré le "lien"

Code:

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

à mon fichier .css dans mon dossier html principal entre <head> et </head>.

Selon moi, je peux m'être trompée de deux manières différentes.. sinon vraiment je vois pas.
1) Soit j'ai inséré la référence au fichier css au mauvais endroit, c-à-d dans le mauvais fichier html. En sachant que j'ai un file principal appelé "main" qui "contient" 3 autres files html (représentant chacun un frame). J'ai ensuite d'autres files html qui sont les différents links dans mes frames.
A ce moment là, où doit-être inséré le lien à mon fichier css? Dans chaque file html ou seulement dans le file principal "main"?

2) Pour ce qui est du contenu de mon fichier css je ne suis vraiment pas sûre. En effet je ne suis pas sûre de la façon dont j'ai écrit les instructions. Comme les instructions s'adressent à mes trois frames j'ai essayé de mettre body pour que ça agisse sur tout le site internet. Est-ce que c'est ça qui me manque comme petit bout de code css?Que devrais-je mettre comme nom ou sélecteur, si on prend en compte que dans le file html "main" je n'ai pas de <body></body> vu que je l'ai remplacé par <frameset></frameset>?

Un grand merci pour l'aide,
Joanna

Citation:

J'ai inséré le "lien"
<link rel="stylesheet" type="text/css" href="mystyle.css" />
à mon fichier .css dans mon dossier html principal entre <head> et </head>.

Je pense que ton fichier est à la bonne place dans ta page main.html et il doit être présent, à la même place, pour toutes les pages html que tu veux affecter avec ton fichier css. En fait selon l'adresse que tu utilise pour ton fichier css, ça veut dire qu'il doit être dans le même dossier que ton / tes fichiers html.
------------------

Je ne travaille pas avec les frames, car la manipulation peut être un peu plus ardue, mais c'est question de goût.
------------------
Pour que tu saisisses ce qui se passe, je commencerais pas tester uniquement avec ta page main.html, et dans ce fichier tu dois avoir une structure telle que:

<!doctype (le choix du doctype est important...regarde sur d'autres site ou les exemple de W3C)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://.... ..... <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <title>yada yada yada</title> </head> <body> <div id="wrapper">  <div id="partie1"> <h2><strong> "Mon titre?</strong></h2> <p class="txtindent">yada yada yada.</p> <p> pas de formatage spécial ici</p> </div>  <div id="partie2"> <h4><strong> "Mon sous-titre?</strong></h2> <p class="txtindent">yada yada yada.</p> </div>  ........................ ............................................. </div> </body></html>
Ça c'est la partie html, et pour chaque élément de html, tu dois avoir un selecteur correspondant si tu veux affecter cet élément.

Donc pour <div id="wrapper"> tu dois avoir en css:
Code:

1 2 3 4 5 #wrapper {width:1025px; margin:0 auto; text-align:left; background: #eee8aa; color: black border : 1px solid #eee8aa; }
et pour <div id="partie1"> tu dois avoir dans ta feuille css:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #partie1 { width : 895px; background: yellow; color: blue; height : auto; margin-right : auto; margin-left : auto; } #partie2 { width : 595px; background: green; color: white; height : auto; margin-right : auto; margin-left : auto; }
et pour le texte dans les paragraphes, <p class="txtindent">: tu dois avoir dans ta feuille css:

Code:

p.txtindent {font-family: verdana; font-size: 1.2em; font-weight: 700; color: #7a3100; text-indent: 2em; text-align: left; margin-left: 25px; margin-right: 25px; margin-bottom: 25px;}

Bon, les couleurs choisies sont barbares et la structure très simple, mais ça devrait t'aider à saisir le fonctionnement de base.

Essaie avec ça pour voir si ça fonctionne et pour te familiariser avec le system.
bye,