Bonjour,
je sais que c'est pas la meilleure façon de faire un galerie photo, mais je n'ai trouvé que ce moyen : les tableaux (on m'a déjà épinglé "old school")

le but est de faire des cases interchangeables, mais il m'en manque deux pour lesquelles je ne trouve pas de solution...

la base : http://leblogduncledid.blogspot.fr/2017/10/tstgalerie2.html
le resultat : http://leblogduncledid.blogspot.fr/2017/10/tst3col.html


<style type="text/css">

.th1 {
width: 184px;
height: 98px;
overflow: hidden;
}

.th2 {
width: 372px;
height: 209px;
overflow: hidden;
}

.th3 {
width: 246px;
height: 209px;
overflow: hidden;
}

.tv1 {
width: 121px;
height:210px;
overflow: hidden;
}

.tv2 {
width: 183px;
height: 312px;
overflow: hidden;
}

.tv3 {
width: 245px;
height: 424px;
overflow: hidden;
}

.pano {
width: 372px;
height: 98px;
overflow: hidden;
}

</style>



<!--- TH1+TH1 --->
<table width="274">
<tr>
<td>
<div class="th1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="185" height="99"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td><td>
<div class="th1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="185" height="99"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
</table>

<!--- TH2 --->
<table width="274">
<tr><td>
<div class="th2"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="374" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td></tr>
</table>

<!--- TH3+TV1 --->
<table width="274">
<tr><td>
<div class="th3"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="247" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td></tr>
</table>

<!--- TV1+TH3 --->
<table width="274">
<tr>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="th3"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="247" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td></tr>
</table>

<!--- TV1+TV1+TV1 --->
<table width="274"><tr>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
</tr></table>

<!--- TV2+TV2 --->
<table width="274"><tr><td>
<div class="tv2"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="184" height="320"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="tv2"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="184" height="320"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
</table>

<!--- TV3+(TV1+TV1) --->
<table width="274"><tr>
<td rowspan="2">
<div class="tv3"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="246" height="431"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td></tr><tr>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
</tr></table>

<!--- (TV1+TV1)+TV3 --->
<table width="274"><tr>
<th>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</th>
<th rowspan="2">
<div class="tv3"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="246" height="431"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</th>
</tr>
<td>
<div class="tv1"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="123" height="210"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td>
</tr>
</table>

<!--- PANORAMA --->
<table>
<tr><td>
<div class="pano"><a href="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s1600/WP_20170915_17_30_36_Pro-721447.jpg"><img width="373" height="98"
src="http://1.bp.blogspot.com/-ZlEgz1Fq88U/WbwTpZvddWI/AAAAAAAAMyk/4R3nRC-uuasJgqVZfFRPkhrF2uaKRWmSgCK4BGAYYCw/s640/WP_20170915_17_30_36_Pro-721447.jpg"/></a></div>
</td></tr>
</table>


Mon soucis est pour les deux dernières "cases"

"TV2 TH1
TH1
TH1"
soit 1 photo sur 3 lignes à gauche et 3 photos à droite

et

" TH1 TV2
TH1
TH1"
soit 3 photos à gauche et 1 à droite sur trois lignes

Merci pour un petit coup de pouce Smiley cligne
Modifié par UncleDid (07 Oct 2017 - 22:44)
Hello,

Si tu rencontres des soucis pour le faire, n'hésite pas à nous montrer ton code afin que l'on puisse t'aider Smiley cligne