Faire communiquer CSS et HTML

Version imprimable

Bonjour,
je suis en auto formation et j ai écrit ce code de multiples façon, mais rien à faire je n'arrive pas à faire correctement communiquer les deux !! le final doit etre une page d'images de même format, affichées en lignes de 4? ça marche si je recopie la feuille de style sur chaque composant mais je souhaite l extérioriser, est ce qu'une bonne âme voudrait bien m indiquer comment faire ? merci
CSS :

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
 a.revenir{
   padding: 0;
   position:absolute;
   left:18px;
   top:11px;
   width:200px;
   height:16px;
   z-index:2;
   text-align:left;
   color:#000000;
   font-family:Arial;
   font-size:13px;
   text-decoration:none;
}
 a.tableau {
   padding: 4px 4px 4px 4px;
   text-align: center;
   vertical-align: middle;
   position:absolute;
   left:24px;
   top:37px;
   width:1012px;
   height:1756px;
   z-index:1;
}
 a.cadres {
   border: 0px #000000 solid;
   width:240px;
   height:240px;
}

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
<!DOCTYPE html>
<!-- Objets de la catégorie Tirelires. -->
<html>
<head>
        <title>Tirelires</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>   
	<link href="galerie.css" rel="stylesheet" type="text/css"/>	
	<span class="revenir">Revenir à la <a href="lesObjets.html">boutique artisanale.</a></span>
        <br>
        <br/>          
	<span class="tableau" styleClass="tableau">   
		<td>
			<a href="images/TI_01.JPG" class="cadres" ><img alt="" title="" src="images/TI_01.JPG" class="cadres" ></a>
			<a href="images/TI_02.JPG" class="cadres" ><img alt="" title="" src="images/TI_02.JPG" class="cadres" ></a>
			<a href="images/TI_03.JPG" class="cadres" ><img alt="" title="" src="images/TI_03.JPG" class="cadres" ></a>
			<a href="images/TI_04.JPG" class="cadres" ><img alt="" title="" src="images/TI_04.JPG" class="cadres" ></a>
                </td>
		<td class="cadres">
			<a href="images/TI_05.JPG"><img alt="" title="" src="images/TI_05.JPG"></a>
			<a href="images/TI_06.JPG"><img alt="" title="" src="images/TI_06.JPG"></a>
			<a href="images/TI_07.JPG"><img alt="" title="" src="images/TI_07.JPG"></a>
			<a href="images/TI_08.JPG"><img alt="" title="" src="images/TI_08.JPG"></a>
                </td>
		<td class="cadres">
			<a href="images/TI_09.JPG"><img alt="" title="" src="images/TI_09.JPG"></a>
			<a href="images/TI_10.JPG"><img alt="" title="" src="images/TI_10.JPG"></a>
			<a href="images/TI_11.JPG"><img alt="" title="" src="images/TI_11.JPG"></a>
			<a href="images/TI_12.JPG"><img alt="" title="" src="images/TI_12.JPG"></a>
                </td>
		<td class="cadres">
			<a href="images/TI_13.JPG"><img alt="" title="" src="images/TI_13.JPG"></a>
			<a href="images/TI_14.JPG"><img alt="" title="" src="images/TI_14.JPG"></a>
			<a href="images/TI_15.JPG"><img alt="" title="" src="images/TI_15.JPG"></a>
                </td>				 
	</span>	
</body>
</html>

:roll:8O

Salut,

Le link doit être dans le head si mes souvenirs sont bons.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<head>
<title>Tirelires</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="galerie.css" rel="stylesheet" type="text/css"/>
</head>
 
<body>
 
<span class="revenir">Revenir à la <a href="lesObjets.html">boutique artisanale.</a></span>
<br>
<br/>

16/06/2014, 10h55
Bisûnûrs

Le chemin vers ton fichier CSS ne doit pas être bon. Quelle est l'arborescence de tes fichiers ?
16/06/2014, 11h01
ILA44

j'ai un dossier WEB dans lequel il ya :
accueil.html
enSavoirPlus.html
lesObjets.html
tirelires.html
galerie.css

j essaie de faire un site web pour un ami qui fait de l artisanat

luroten,
avant je l avais mis dans le head mais ça ne change rien, je le redeplace quand meme dans le head alors autant faire les choses bien
16/06/2014, 11h06
Bovino

Ton code HTML est tout pourri... :aie:
C'est quoi ces balises <td> qui se baladent toutes seules au milieu d'un <span> ? :calim2:
16/06/2014, 11h13
ILA44

Citation:

Envoyé par Bovino

Ton code HTML est tout pourri... :aie:
C'est quoi ces balises <td> qui se baladent toutes seules au milieu d'un <span> ? :calim2:

lol ah ben ça ça se peut bien !!! donc comme je disais j essaie d'apprendre toute seule, je suis partie de wysiwyg, mais comme je voulais quelque chose que je puisse maintenir et surtout comprendre j ai recupéré le généré, et d'épuration en épuration j'en suis arrivée là. Je ne comprends pas encore tout mais hormis le css extériorisé ça ressemble à quelque chose je t'assure lol. non sans rire j aimerai bien arriver à quelque chose de propre, comme ça j apprendrai en le faisant évoluer correctement les td ça ne sert à rien ou ça ne se place pas dans les span ?

comme ça c'est moins horrible ?

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
<html>
    <head>
        <title>Tirelires</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="galerie.css" rel="stylesheet" type="text/css"/>	
    </head>
 
    <body>   		
	<span class="revenir">Revenir à la <a href="lesObjets.html">boutique artisanale.</a></span>
        <br>
        <br/>          
	<span class="tableau" styleClass="tableau">   
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_01.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_02.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_03.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_04.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_05.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_06.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_07.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_08.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_09.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_10.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_11.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_12.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_13.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_14.JPG"></a>
		<a class="cadres" styleClass="cadres"><img alt="" title="" src="images/TI_15.JPG"></a>			 
	</span>	
    </body>
</html>

16/06/2014, 11h38
Bovino
C'est surtout plus valide ! :aie:
Mis à part l'étrange attribut styleClass qui est inconnu dans les spécifications... :?

A part ça, au vu de ce code et du code CSS déjà fourni, seules les règles
Code:

1 2 3 4 5 a.cadres { border: 0px #000000 solid; width:240px; height:240px; }
peuvent s'appliquer puisque pour les autres, tu n'as pas de balise <a> avec la classe demandée.
Or pour ces éléments, border: 0, c'est la valeur par défaut d'un lien, donc tu ne verras pas beaucoup de changement, quant aux règles width et height, elles ne s'appliquent pas à des éléments inline (en fait, elles n'ont surtout pas de sens pour ces éléments).
Bref, en l'état, ton code CSS ne sert à rien ! :aie:

code :

voilà si je code ça j obtiens exactement la page que je veux, sauf que je voudrais sortir le style du reste afin de pouvoir l'appliquer à d'autres pages d'images

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
<html>
    <head>
        <title>Tirelires</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="galerie.css" rel="stylesheet" type="text/css"/>	
    </head>
 
    <body>   		
	<span class="revenir">Revenir à la <a href="lesObjets.html">boutique artisanale.</a></span>
        <br>
        <br/>          
	<span class="tableau" styleClass="tableau">   
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_01.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_02.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_03.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_04.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_05.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_06.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_07.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_08.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_09.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_10.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_11.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_12.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_13.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_14.JPG"></a>
		<a><img alt="" title="" style="width:240px;height:240px;" src="images/TI_15.JPG"></a>			 
	</span>	
    </body>
</html>

16/06/2014, 11h46
ILA44

merci bovino pour les explications

c'est un peu désespérant mais bon... j y arriverai ! du coup j ai enlevé les choses inconnues et celle qui ne sert à rien de mon css... j avoue que c'est un peu la 4e dimension pour moi qui ais surtout développé en pacbase, mais je tiens à réaliser ce projet.

visiblement c'est le style de la balise img que tu veux modifier. Ton css devrais alors contenir
Code:

1 2 3 4 5 6 img.cadres { border: 0px #000000 solid; width:240px; height:240px; }
et ton html
Code:

1 2 <a ><img class="cadres" alt="" title="" src="images/TI_01.JPG"></a>

16/06/2014, 13h44
ILA44

merci luroten

super!!!! ça marche ! je suis trop contente ! en fait il fallait que je prefixe dans le css comme la balise du html a. pour <a>, img. pour <img> etc...
ahh et la lumière fut !! je vais pouvoir faire mes autres pages.
mais du coup pour "tableau" et "revenir" en l etat actuel le css ne sert à rien si j ai bien compris:P
16/06/2014, 17h05
ILA44

merci et fin

Merci grace à vous j'ai bien avancé j'ai pu faire plusieurs pages de styles différents et tout va bien je crois que j'ai compris comment ça s'articule.
Bonne fin de journée à tous
16/06/2014, 18h12
NoSmoking
Bonjour,

Citation:

Envoyé par ILA44

je suis en auto formation et j ai écrit ce code de multiples façon...

je pense, dans ce cas, qu'il n'est pas inutile de te fournir au moins ces deux liens
- FAQ CSS
- Les meilleurs cours et tutoriels CSS
Bonne continuation ;)
17/06/2014, 08h31
ILA44

NoSmoking

En effet !! merci :)