Insérer une image dans une cellule

**Media20** · 05/08/2021, 01h12

Bonjour a tous
J'ai cree 2 grids et dans la seconde un tableau ou je voudrais inserer des images differentes, c'est a dire cibler chaque cellule et lui inserer une image

Je vous dit merci pour votre aide par avance

Le 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
31
32
@media (min-width: 320px) AND (max-width: 800px){}
@media (min-width: 800px) AND (max-width: 960px)
{}
.grid-container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 20% 80%;
  grid-gap: 8em;
height: 100px;	
margin-left: 6em;
	width: 80%;	
}
.grid-item1 {
  background: #FFF;
  border: black 1px solid;
	width: 90%;
	height: 300px;
}
.grid-item2 {
  background: #FFF;
  text-align: center;
  border: black 1px solid;
	height: 500px;
margin-left: 500px;
}
.tab1 {width: 950px;			
}
td { width: 150px;
height: 202px;	
margin-left: 300px;	
 background-color: #A00D10
}

Le 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
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
<!DOCTYPE html>
<html lang="fr">
<title>Alimentation</title>	
	<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
		<!-- Des choses -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
 
		<script src="../scr/jquery.js"></script>
		<script src="../scr/modernizr.js"></script>
		<link href="../css/style.css" rel="stylesheet" type="text/css">
		<link href="../css/stylealim.css" rel="stylesheet" type="text/css">
	</head>
	<body class="no-js">
		<!-- Emplacement du menu -->
		<nav id="topNav">
			<ul>
				<li><a href="../index.html" title="">Accueil</a></li>
				<li>
					<a href="#" title="">Libre</a>
					<li>
						<a href="../chiens.html" title="">Chiens</a>
						<ul>
							<li><a href="#" title="">Libre</a></li>
							<li><a href="../alimentation.html" title="">Alimentation</a></li>
							<li><a href="../veterinaires.html" title="Veterinaires">Vétérinaires</a></li>
							<li><a href="../education.html" title="Education">Education</a></li>
							<li><a href="#" title="V">Libre</a></li>
						</ul>
					</li>
					<li><a href="#" title="">Libre</a></li>
					<li>
						<a href="#" title="">Libre</a>
						<ul>
							<li><a href="#" title="">Javascript</a></li>
							<li><a href="#" title="">jQuery</a></li>
						</ul>
					</li>
					<li class="last"><a href="#" title="">Contact</a></li>
				</ul>
			</nav>
			<!-- Emplacement du contenu -->
			<!-- Initialisation de la fonction -->
			<script>
                                var el = document.getElementsByTagName("body")[0];
                                el.className = "";
                                (function($){
                                        var nav = $("#topNav");
                                        nav.find("li").each(function() {
                                                if ($(this).find("ul").length > 0) {
                                                        $("<span>").text("^").appendTo($(this).children(":first"));
                                                        $(this).mouseenter(function() {
                                                                $(this).find("ul").stop(true, true).slideDown();
                                                        });
                                                        $(this).mouseleave(function() {
                                                                $(this).find("ul").stop(true, true).slideUp();
                                                        });
                                                }
                                        });
                                }
                                )(jQuery);
                        </script>
			<!-- fin navbar -->
			<picture>
				<img src="../Images/communes/fond1.png" alt="" class="image_responsive" width="1575" height="300">
			</picture>
		     <picture>
				<img src="../Images/Bandeaux/alimentation.png" alt="" class="image_responsive" width="1575" height="89"> 
			<picture>	 
            <table class="index">
            <tbody>
             <div class="grid-container">
				<div class="grid-item1">
 
				</div>
				<div class="grid-item2">
				<table id="tab1">
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>	
 
			</div>
		</body>
	</html>

Invité · 05/08/2021, 21h16

Bonjour,

Pouvez-vous développer votre besoin? Avez-vous un exemple?

Vous voulez faire cela dynamiquement?

**Media20** · 08/08/2021, 12h26

Rebonjour,
Et merci d'avoir repondu.
Voila, j'ai un tableau ou je voudrais inserer une image differente dans chaque cellule, mais des que j'essaie, l'image se place a gauche...
Peut etre ai je des erreurs de code.

Invité · 08/08/2021, 21h44

Pourtant quand j’ajoute des images dans les cellules, elles ce positionne bien dans chaque cellules, après tout dépend de la taille (il ne faut pas qu'elles dépassent les 150px du css pour pas avoir de décalage).

Code html :

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

<td><picture><img src="../Images/communes/fond1.png" alt="description"></picture></td>

As tu une image à fournir afin de voir plus concrètement ou ce place l'image?
As tu d'autre code css à fournir?

**Media20** · 09/08/2021, 10h14

Rebonjour,
je n'ai pas compris, peut etre suis je bete.
Est ce que mon code etait bon ou pas,car dans le mail j'ai cela :

Code html :

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

<td><picture><img src="../Images/communes/fond1.png" alt="description"></picture></td>

que faut il que je change dans le css ou dans le html pour que cela soit valide

j'envoie une image...
Une autre question.
Connais tu le xml?
Merci encore pour tout

**Media20** · 09/08/2021, 10h26

Re
merci pour ton aide.
cela fonctionne, mais mon tableau de droite se positionne comme la capture que je te joins
donc le soucis viens du tableau qui se positionne mal..
Desole je me suis embrouille

Invité · 09/08/2021, 19h12

Dans un 1er temps, à la ligne 64 et 65 de ton code html, tu à les 2 balises ouverte non refermé <table class="index"> et <tbody> qui ne servent à rien (à moins que le codage de cette partie soit en cours)

Ensuite, si je comprend bien, tu aimerais que ton tableau ce positionne dans le 2eme cadre blanc à droite "grid-item2"?

Si c'est le cas, il te manque une balise de fermeture </div> pour ta <div class="grid-container"> ou ta <div class="grid-item2">, ce qui explique que ton tableau ne ce positionne pas dedans, ce qui donnerait:

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
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
<!DOCTYPE html>
<html lang="fr">
<title>Alimentation</title>	
	<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
		<!-- Des choses -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
 
		<script src="../scr/jquery.js"></script>
		<script src="../scr/modernizr.js"></script>
		<link href="../css/style.css" rel="stylesheet" type="text/css">
		<link href="../css/stylealim.css" rel="stylesheet" type="text/css">
	</head>
 
<body class="no-js">
		<!-- Emplacement du menu -->
		<nav id="topNav">
			<ul>
				<li><a href="../index.html" title="">Accueil</a></li>
				<li>
					<a href="#" title="">Libre</a>
					<li>
						<a href="../chiens.html" title="">Chiens</a>
						<ul>
							<li><a href="#" title="">Libre</a></li>
							<li><a href="../alimentation.html" title="">Alimentation</a></li>
							<li><a href="../veterinaires.html" title="Veterinaires">Vétérinaires</a></li>
							<li><a href="../education.html" title="Education">Education</a></li>
							<li><a href="#" title="V">Libre</a></li>
						</ul>
					</li>
					<li><a href="#" title="">Libre</a></li>
					<li>
						<a href="#" title="">Libre</a>
						<ul>
							<li><a href="#" title="">Javascript</a></li>
							<li><a href="#" title="">jQuery</a></li>
						</ul>
					</li>
					<li class="last"><a href="#" title="">Contact</a></li>
				</ul>
			</nav>
			<!-- Emplacement du contenu -->
			<!-- Initialisation de la fonction -->
			<script>
                                var el = document.getElementsByTagName("body")[0];
                                el.className = "";
                                (function($){
                                        var nav = $("#topNav");
                                        nav.find("li").each(function() {
                                                if ($(this).find("ul").length > 0) {
                                                        $("<span>").text("^").appendTo($(this).children(":first"));
                                                        $(this).mouseenter(function() {
                                                                $(this).find("ul").stop(true, true).slideDown();
                                                        });
                                                        $(this).mouseleave(function() {
                                                                $(this).find("ul").stop(true, true).slideUp();
                                                        });
                                                }
                                        });
                                }
                                )(jQuery);
                        </script>
			<!-- fin navbar -->
			<picture>
				<img src="../Images/communes/fond1.png" alt="" class="image_responsive" width="1575" height="300">
			</picture>
		     <picture>
				<img src="../Images/Bandeaux/alimentation.png" alt="" class="image_responsive" width="1575" height="89"> 
			<picture>	 
 
             <div class="grid-container">
				<div class="grid-item1">
 
				</div>
				<div class="grid-item2">
				<table id="tab1">
					<tr>
						<td><img src="" alt="1"></td>
						<td><img src="" alt="2"></td>
						<td><img src="" alt="4"></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
 					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</table>	
 			</div>
 		</div>
	</body>
</html>

Si ce n'est pas le cas, où aimerais-tu positionner ton tableau? (cela pourrait se faire sans problème dans le fichier CSS avec un margin-left par exemple)

(Remarque à part, en ce qui concerne ton code CSS, tu dois accéder aux classes par un point et aux id par un #, du coup, pour accéder à ta <table id="tab1"> tu dois avoir dans ton css #tab1 {width: 950px;} et non .tab1 {width: 950px;} sinon ton tableau ne sera pas ciblé).

En attente de ton retour.

**Media20** · 09/08/2021, 22h15

Rebonjour,
Merci pour ton aide..
Tres sympa, c'est tout a fait ca.*
Une ptite question.
J'ai une grid ou je voudrais afficher un grand texte, avec des titres, textes, et liste a puce.
Que penses tu de la solution d'afficher un fichier xml dans cette grid...
En fait c'est le meme systeme de grid que cette page..
Au fait je viens commence a creer ce site pour notre association mais pas facile pour moi, je rame comme pas possible, alors je te remercie pour ton aide, c'est deja bcp...
Encore merci.Suis a l'ecoute de tes conseils pour ce xml....

Invité · 10/08/2021, 11h49

Rebonjour,

Personnellement, je ne voit pas trop l’intérêt de passer par du xml alors qu'il y a déjà pas mal de balise HTML pour cela.

Si tu as d'autre question, n’hésite pas à poster un autre sujet, on à tous commencé un jours

Insérer une image dans une cellule

Tableau en CSS

Discussions similaires

Partager

Partager