Lien CSS et HTML et vice-versa

Version imprimable

27/02/2008, 01h53
minachou

Lien CSS et HTML et vice-versa
Bonjour tout le monde!

Voilà je suis une débutante dans la création d'un site web.
J'ai appris à écrire en languague html
Et maintenant je suis oqp à essayer de comprendre le languague css
Malheureusement je ne sais pas si on doit mettre avant de commencer quelques lignes comme sur html
Du genre
Code:

1 2 3 4 <html> <head> </head> </html>
En bref
J'ai essayé de mettre en lien ma page html avec css mais ca ne fonctionne pas du tout

Pourriez vous m'aidez ce serait adorable

Merci
27/02/2008, 10h11
warwill

poste nous le code html et le css sinon ça risque d'être dure.
27/02/2008, 12h09
Strix

Salut et bienvenue sur developpez.net

Un petit tour par les cours te serait-il utile ?
http://css.developpez.com/cours/

code html et code css

page html

Code:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<html> 
  <head>
<LINK rel="stylesheet" type="text/css" href=<"./design.css">
<title>page web </title>
  <meta name="Author" content="page web">
</head>
 
<body>
<div align=center>
<img src="http://a789.ac-images.myspacecdn.com/images01/98/l_151e6ead10524e7b48164e66e9d360ac.jpg">
 
 
<div align=center>
<table border=5>
<tr>
<td><table border=10 cellpadding=10>
 
<td><a href="index (2).htm">
<font face="amienne">
<font size=+3>
<b>
<font color="#FF66CC">
Home
</font color="#FF66CC">
</b>
</font face="amienne">
 
<td><a href="agenda.htm">
<font face="amienne">
<font size=+3">
<b>
<font color="#FF66CC">
Agenda
</font color="#FF66CC">
</b>
</a>
</font face="amienne">
 
<td><a href="photo.htm">
<font face="amienne">
<font size=+3">
<b>
<font color="#FF66CC">
Pictures
</font color="#FF66CC>
</b>
</a>
</font face="amienne">
 
<td><a href="biographie.htm">
<font face="amienne">
<font size=+3">
<b>
<font color="#FF66CC">
Biographie
</font color="#FF66CC">
</b>
</a>
</font face="amienne">
 
<td><a href="liens.htm">
<font face="amienne">
<font size=+3"> 
<b>
<font color="#FF66CC">
Liens
</font color="#FF66CC">
</b>
</a>
</font face="amienne">
 
<td><a href="livredor.htm">
<font face="amienne">
<font size=+3>
<b>
<font color="#FF66CC">
Livre d'0r
</font color="#FF66CC>
</b>
</a>
</font face="amienne">
 
<td><a href="contacts.htm">
<font face="amienne">
<font size=+3>
<b>
<font color="#FF66CC">
Contacts
</font color="#FF66CC">
</b>
</a>
</font face="amienne">
 
</table border=10>
</div align=center>
</table> 
 
 
 
 
 
 
 
 
 
 
 
 
<p>
Intro
</p>
<a href="page1.htm">ici</a>
</body>
</html>

page css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<head>
 <body>
{
   color: black;
   font-size: 18px;
}
body
{
   background-image: ("http://a771.ac-images.myspacecdn.com/images01/32/l_bc8b2d3dda341297c6a1f1783836526a.png");
   background-attachment: scroll;
}
</head>

Bien évidemment je tiens à repréciser que je suis une nouille dans ce domaine
et merci beaucoup pour vos réponses

27/02/2008, 19h48
12monkeys
Hello

Bien vouloir utiliser les balises code (bouton #).

Dans ta page html tu as ceci :

Code:

<LINK rel="stylesheet" type="text/css" href=<"./design.css">

il y a un caractère en trop : <

Code:

<LINK rel="stylesheet" type="text/css" href="./design.css">

De plus ton fichier design.css se trouve où par rapport au fichier html ?

Dans ton fichier css on ne met ni <head> ni <body> ni </head>

Il devrait ressembler à ceci :
Code:

1 2 3 4 5 6 7 8 body { color: black; font-size: 18px; background-image: url("http://a771.ac-images.myspacecdn.com/images01/32/l_bc8b2d3dda341297c6a1f1783836526a.png"); background-attachment: scroll; }
Il faudrait en effet lire les cours css (lien dans ma signature).
27/02/2008, 19h54
minachou

Merci beaucoup pour ton corriger
Pour ce qui est du cours je commence à le lire
Ca ne fait que le troisieme que je lis lool

Cela étant dis quand je clique sur ma page html pour la visualiser elle est comme si j'avais pas ma page css

Comment je peux faire pour qu'on voit les modifications que j'éffectue avec ma page css?

Ma page css est externe par rapport a ma page html
Bisous
27/02/2008, 20h03
12monkeys

Hello

Tu n'as pas répondu à une de mes question, c'est peut être de là que vient le problème :

Citation:

Envoyé par 12monkeys

De plus ton fichier design.css se trouve où par rapport au fichier html ?
27/02/2008, 20h08
minachou

Oui je viens de me relire et je me suis rendue compte que j'ai tout dit sauf répondre à ta question .

Mon fichier css est externe par rapport à mon fichier html

Merci
27/02/2008, 20h12
12monkeys

Citation:

Envoyé par minachou

Mon fichier css est externe par rapport à mon fichier html

C'est à dire ? je ne suis pas sur de comprendre ce que tu veux dire !

Tu veux dire par là que tu a deux fichiers : 1 html et 1 css ?

Si oui ce que moi je voulais savoir c'est où se trouve ce fichier css par rapport au fichier html : dans le même répertoire, dans un autre (et alors il faut nous indiquer arborescence de ton site).
27/02/2008, 20h24
minachou

Je me rends compte que c'est super méga complexe mais je m'accroche lol

Donc j'ai créée un dossier intitulé 'site' et la j'ai mis ma page html et ma page css

Au risque de parraitre idiote je ne sais pas ce que veut dire le mot 'arborescence'.
27/02/2008, 20h52
12monkeys
Mais non une fois qu'on s'y connais un peu ce n'est plus si complexe...

L'arborescence c'est justement ce que tu décrit dans ta deuxième ligne : c'est l'imbrication des répertoires dans ton site et le placement des fichiers dans ces répertoires.

Bon avec la réponse que tu me donnes je ferais ceci dans le fichier html :
Code:

1 2 3 4 5 6 <html> <head> <title>page web </title> <meta name="Author" content="page web"> <link rel="stylesheet" type="text/css" href="design.css"> </head>
Explications : j'ai déplacé ta balise link et j'ai enlevé "./" derrière href=" . J'ai un doute sur sa signification (j'ai pas trouvé, si quelqu'un pouvait me rafraichir la mémoire..), donc vaut mieux enlever, en tout cas si tes 2 fichiers sont dans le même répertoire le code ci dessus devrait fonctionner.

Fait aussi actualiser pour être sur de prendre en compte le nouveau fichier css...
27/02/2008, 21h05
minachou

Il y a toujours aucune modification

En me posant des questions je me suis demander si ca allait changer quelqu'un de savoir que j'ai d'autre page lien html

Donc dans mon fichier site

J'ai ma premiere page (appelé page1.htm)
index (2).htm
biographie.htm
livredor.htm
contacts.htm
agenda.htm
liens.htm
photo.htm

Mais pour le moment a part avoir répéter le cadre j'ai rien d'autre dans les autres liens

Je veux juste modifier ma page index (2).htm

Je précise aussi que j'ai pas encore de domaine sur internet, je compte en prendre un quand j'ai tt fini si c'est possible bien évidemment.

et que j'utilise notepad++

voila

Une question toute con mais qu'est ce qui ne fonctionne pas exactement ? J'ai essayé en local sur mon ordi et quand je change par exemple la taille de la police dans le fichier css, les changements se font...

Essaye de changer la taille et la couleur dans le fichier css et tu devrais voir le changement sur les textes "intro" et "ici"...

Aie aie aie en fait je suis allé voir le reste du code, il y a plein d'erreurs (désolé de te dire ça)

- pour mettre des attributs à des balises il vaut mieux les mettre entre quotes :

Code:

align=center

Faire plutôt ceci :

Code:

align="center"

- les balises fermantes : quand tu ferme une balise tu met juste la barre oblique et le nom de la balise :

Code:



Faire ceci :

Code:



- dans ton second tableau tu as oubliée plein de balises...

- il ne faut pas imbriquer les balises entre elles :

Code:

texte

Faire ceci :

Code:

texte

Voici à quoi devrait ressembler ton code :
Code:

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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 <html> <head> <title>page web </title> <meta name="Author" content="page web"> <LINK rel="stylesheet" type="text/css" href="design.css"> </head> <body> <div align="center"> <img src="http://a789.ac-images.myspacecdn.com/images01/98/l_151e6ead10524e7b48164e66e9d360ac.jpg"> <table border="5"> <tr> <td> <table border="10" cellpadding="10"> <tr> <td> <a href="index (2).htm"> Home </a> </td> <td> <a href="agenda.htm"> Agenda </a> </td> <td> <a href="pictures.htm"> Pictures </a> </td> <td> <a href="biographie.htm"> Biographie </a> </td> <td> <a href="liens.htm"> Liens </a> </td> <td> <a href="livre d'or.htm"> Livre d'0r </a> </td> <td> <a href="contacts.htm"> Contacts </a> </td> </tr> </table> </td> </tr> </table> Intro <a href="page1.htm">ici</a> </div> </body> </html>
Tu peut étudier le code que je t'ai donné pour t'habituer aux bonnes pratiques...

Ah oui je t'ai aussi indenté ton code (mettre des espaces ou tablulations au début de chaque ligne pour mieux voir à quoi elle correspond)

27/02/2008, 21h45
minachou

J'ai mis dans ma page css un fond d'écran
Mais apparement il ne veut pas s'afficher quand je fais la visualisation
tout ce qu'il y a c'est ma banniere

mon encadré avec a l'intérieur 'home' 'agenda' etc

et juste un lien pour aller à ma premiere page

Mais pas le fond d'écran noir et rose fushia ( c'est une image que j'ai loger sur myspace)

En tout cas je tiens encore à te remercier pour le temps que tu m'accordes et la patience d'ange que tu as
27/02/2008, 21h56
12monkeys
As tu reprise le code css comme je te l'ai modifié ?
Code:

1 2 3 4 5 6 7 body { color: blue; font-size: 145px; background-image: url("http://a771.ac-images.myspacecdn.com/images01/32/l_bc8b2d3dda341297c6a1f1783836526a.png"); background-attachment: scroll; }
et reprend le code html comme je te l'ai indiqué juste au dessus parce que j'ai testé sur mon ordi et je vois ton image de fond. Si ça marche sur mon ordi je ne vois pas pourquoi ça ne marcherais pas sur le tiens !

Si ça ne fonctionne pas redonne voir ton code (n'oublie pas le bouton code buton #)
27/02/2008, 22h08
minachou

Merci beaucoup

J'ai juste encore un truc a te demander
J'abuse je pense

voila l'image se répète que dois je faire pour qu'elle ne se répète pas

Et encore un énorme merci

pourrais je te redemander des conseils si j'en ai besoin plutard ?

Il n'y a pas de souci...

Vu ton message je suppose que le problème est résolu ?

Pour que l'image ne se répète pas il faut utiliser background-repeat: no-repeat; comme ci dessous
Code:

1 2 3 4 5 6 7 8 body { color: blue; font-size: 145px; background-image: url("http://a771.ac-images.myspacecdn.com/images01/32/l_bc8b2d3dda341297c6a1f1783836526a.png"); background-attachment: scroll; background-repeat: no-repeat; }
naturellement que tu peut poser d'autres questions si tu as besoin, mais pas en MP, le forum est là pour ça.