From f0f4fd2e03179c7e99c15564ca75e45296223aef Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Tue, 23 Feb 2021 15:38:29 +0100
Subject: [PATCH] plusieurs tentatives de gallery differentes

---
 pages/litterall.html | 442 +++++++++++++++++++++++++++++++++++++++++--
 styles/images.css    |  53 +++++-
 2 files changed, 468 insertions(+), 27 deletions(-)
diff --git a/pages/litterall.html b/pages/litterall.html
index c209038..da52db7 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -12,14 +12,6 @@
 			main {
 				margin-left: 20px;
 			}
-			.card p {
-				display: none;
-				display: block;
-			}
-			img#dernier_numero {
-				width: 240px;
-				max-width: 98vw;
-			}
 		</style>
 	</head>
 	<body>
@@ -44,7 +36,11 @@
 					<img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall">
 				</div>
 
-				<div class="gallery framme" id="tous_numeros">
+				<br>
+				<p>_______________________________________________________________</p>
+				<br>
+
+				<div class="gallery frame" id="tous_numeros">
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
 						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
@@ -87,6 +83,9 @@
 					</div>
 				</div>
 
+				<br>
+				<p>_______________________________________________________________</p>
+				<br>
 
 				<div class="gallery frame" id="tous_numeros">
 					<div class="card">
@@ -131,6 +130,9 @@
 					</div>
 				</div>
 
+				<br>
+				<p>_______________________________________________________________</p>
+				<br>
 
 				<div class="gallery" id="tous_numeros">
 					<div class="card">
@@ -175,6 +177,9 @@
 					</div>
 				</div>
 
+				<br>
+				<p>_______________________________________________________________</p>
+				<br>
 
 				<div class="galery frame" id="tous_numeros">
 					<div class="card">
@@ -239,6 +244,9 @@
 					</div>
 				</div>
 
+				<br>
+				<p>_______________________________________________________________</p>
+				<br>
 
 				<div class="galery framme" id="tous_numeros">
 					<div class="card">
@@ -283,23 +291,32 @@
 					</div>
 				</div>
 
+				<p>_images horizontal stretch_____________________________________________</p>
 
 				<div class="galery">
 					<div class="card">
 						<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+						<p>Lorem ipsum dolor sit amet</p>
 					</div>
 					<div class="card">
 						<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
+						<p>Lorem ipsum dolor sit amet</p>
 					</div>
 					<div class="card">
 						<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
-						<p>Lorem ipsum dolor sit amet, consectetur</p>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+						<p>Lorem ipsum dolor sit amet</p>
 					</div>
 					<div class="card">
 						<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+						<p>Lorem ipsum dolor sit amet</p>
 					</div>
 					<div class="card">
 						<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
@@ -307,32 +324,419 @@
 					</div>
 					<div class="card">
 						<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu</p>
+						<p>Lorem ipsum dolor sit amet</p>
 					</div>
 					<div class="card">
 						<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+						<p>Lorem ipsum dolor sit amet</p>
 					</div>
 					<div class="card">
 						<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur</p>
+						<p>Lorem ipsum dolor sit amet</p>
 					</div>
 					<div class="card">
 						<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa</p>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+						<p>Lorem ipsum dolor sit amet</p>
 					</div>
 					<div class="card">
 						<img src="https://www.webindia123.com/pets/fish/bett.jpg">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur luctus</p>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+						<p>Lorem ipsum dolor sit amet</p>
 					</div>
 					<div class="card">
 						<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur luctus</p>
+						<p>Lorem ipsum dolor sit amet</p>
 					</div>
 					<div class="card">
 						<img src="https://www.webindia123.com/pets/fish/neon.jpg">
 						<p>Lorem ipsum dolor sit amet</p>
 					</div>
+				</div>
+
+				<p>_images horizontal extra space_________________________________________</p>
+
+				<div class="galery space">
+					<div class="card">
+						<div class="image_background">
+							<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://www.webindia123.com/pets/fish/bett.jpg">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<img src="https://www.webindia123.com/pets/fish/neon.jpg">
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+				</div>
+
+				<p>_images horizontaly cut________________________________________________</p>
+
+				<div class="galery cut">
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.webindia123.com/pets/fish/bett.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.webindia123.com/pets/fish/neon.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+				</div>
+
+				<p>_images horizontaly cut with minimum width_____________________________</p>
+
+				<div class="galery cut minwidth">
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.webindia123.com/pets/fish/bett.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+					<div class="card">
+						<div class="image_background">
+							<div class="image">
+								<img src="https://www.webindia123.com/pets/fish/neon.jpg">
+							</div>
+						</div>
+						<p>Lorem ipsum dolor sit amet</p>
+					</div>
+				</div>
+
 
 			</article>
 		</main>
diff --git a/styles/images.css b/styles/images.css
index 69e6910..225eb7a 100644
--- a/styles/images.css
+++ b/styles/images.css
@@ -133,24 +133,61 @@
 	padding: 0px;
 	margin: 20px 20px 20px 0px;
 }
-.galery .card .image {
-	display: flex;
-	width: 100%;
-	background-color: hsl(0, 0%, 95%);
-}
 .galery .card img {
-	margin: 0px;
 	height: 200px;
 }
 .galery .card p {
 	margin-left: 0px;
 }
 .galery .card > * {
-	margin: 5px auto;
+	margin: 5px 0px;
 }
 .galery::after {
 	content: "";
-	flex: 100;
+	flex: 10;
+}
+/*space*/
+.galery.space .card .image_background {
+	display: flex;
+	width: 100%;
+	background-color: hsl(0, 0%, 95%);
+}
+.galery.space .card .image_background img {
+	margin: auto;
+}
+/*cut*/
+.galery.cut .card {
+	display: flex;
+}
+.galery.cut .card > * {
+	margin: 5px auto;
+}
+.galery.cut .card .image_background {
+	display: flex;
+	width: 100%;
+	overflow: hidden;
+	background-color: hsl(0, 0%, 95%);
+}
+.galery.cut .card .image {
+	margin: auto;
+}
+.galery.cut .card .image img {
+	margin: auto -30px;
+}
+/*minwidth*/
+.galery.minwidth .card {
+	min-width: 150px;
 }
 
 
+/*image du haut*/
+div.image_container {
+	border: 1px solid green;
+	margin: auto;
+	margin-left: 0px;
+	overflow: visible;
+}
+div.image_container img {
+	margin-left: -10px;
+	margin-right: -10px;
+}
