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

Insérer une image dans une cellule

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager