Insérer une image dans une cellule
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:
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:
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> |
Inserer image dans une cellule
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.
