Faire communiquer CSS et HTML

**ILA44** · 16/06/2014, 10h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**luroten** · 16/06/2014, 10h51

Salut,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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/>

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

Le chemin vers ton fichier CSS ne doit pas être bon. Quelle est l'arborescence de tes fichiers ?

**ILA44** · 16/06/2014, 11h01

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

**Bovino** · 16/06/2014, 11h06

Ton code HTML est tout pourri...

C'est quoi ces balises <td> qui se baladent toutes seules au milieu d'un <span> ?

**ILA44** · 16/06/2014, 11h13

Envoyé par Bovino

Ton code HTML est tout pourri...

C'est quoi ces balises <td> qui se baladent toutes seules au milieu d'un <span> ?

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 ?

**ILA44** · 16/06/2014, 11h27

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Bovino** · 16/06/2014, 11h38

C'est surtout plus valide !

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**ILA44** · 16/06/2014, 11h39

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**ILA44** · 16/06/2014, 11h46

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.

**luroten** · 16/06/2014, 12h47

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

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et ton html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ILA44** · 16/06/2014, 13h44

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

**ILA44** · 16/06/2014, 17h05

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