pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mise en page de gallery dans feuille image-css

Browse Source
This commit is contained in:
hugogogo
2021-02-20 18:13:26 +01:00
parent 6903e63ec0
commit d5df4a5a85
3 changed files with 352 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
pages/litterall.html
View File

@@ -7,122 +7,15 @@
<base href="../" />
<meta name="description" content="description du site web">
<meta name="keywords" content="truc, bidule, chouette">
<!--
<link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/header.css" type="text/css" rel="stylesheet">
<link href="./styles/litterall.css" type="text/css" rel="stylesheet">
-->
<style>
/*general settings*/
body {
margin: 0px;
padding: 1%;
width: calc(98%);
}
.horizontal {
display: flex;
flex-direction: row;
}
.horizontal > * {
margin: 20px;
}
.vertical {
display: flex;
flex-direction: column;
}
.vertical > * {
margin: 20px 0px;
}
/*GALLERY*/
/*
.gallery
----- ---- --- ----
' '' '' '' '
' '' '' '' '
'-----''----''---''----'
~~ ~ ~~ ~~ ~~ ~
---- --- --- ------
' '' '' '' '
' '' '' '' '
'----''---''---''------'
~~~ ~ ~ ~ ~~ ~~
------ ---
' '' '
' '' '
'------''---'
~~ ~ ~ ~
images are stretched to cover the entire raw
it works well with images of similar size
.gallery.frame
-------- --------- ---------- ---------
' ---- '' ----- '' ------ '' ----- '
' ' ' '' ' ' '' ' ' '' ' ' '
' ' ' '' ' ' '' ' ' '' ' ' '
' '----' '' '-----' '' '------' '' '-----' '
' ~~ ~~ '' ~~~ ~ '' ~~ ~~ ~ '' ~~ ~~ '
'--------''---------''----------''---------'
----------- -------
' ------- '' --- '
' ' ' '' ' ' '
' ' ' '' ' ' '
' '-------' '' '---' '
' ~~ ~~ '' ~~~ '
'-----------''-------'
images keeps their real ratio, but a frame appear around them
*/
:root {
/*GALLERY*/
/*space between columns of cards*/
--gallery-gap-unit: 6px;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery .card {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 1;
padding: 0px;
margin: 0px;
/*space between columns of cards*/
margin-right: calc(var(--gallery-gap-unit) / 2);
}
.gallery .card > * {
/*vertical space between elements inside of cards*/
margin: var(--gallery-gap-unit) 0px;
}
.gallery .card img {
max-height: 200px;
border: 1px solid lightgrey;
}
/*to avoid last element of gallery to stretch untill end of line*/
.gallery::after {
content: "";
flex: 100;
}
/*in case of frames*/
.gallery.frame .card {
padding-left: var(--gallery-gap-unit);
padding-right: var(--gallery-gap-unit);
margin: 6px 12px 6px 0px;
border: 1px solid lightgrey;
}
.gallery.frame .card > * {
margin: var(--gallery-gap-unit) auto;
}
/*settings specifics*/
main {
margin-left: 20px;
}
.card p {
display: none;
display: block;
}
img#dernier_numero {
width: 240px;
max-width: 98vw;
@@ -150,6 +43,51 @@
<div class="image_container">
<img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall">
</div>
<div class="gallery framme" 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>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
</div>
<div class="gallery frame" id="tous_numeros">
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
@@ -159,14 +97,6 @@
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div>
<div class="card">
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
@@ -179,6 +109,10 @@
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/lion.jpg" alt="lion">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
@@ -187,14 +121,6 @@
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div>
<div class="card">
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
@@ -203,47 +129,140 @@
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div>
<div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div>
<div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img id="last-child-img" src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
</div>
<div class="gallery" 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>
</div>
<div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div>
<div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div>
<div class="card">
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/lion.jpg" alt="lion">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
</div>
<div class="galery 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>
</div>
<div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div>
<div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div>
<div class="card">
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/lion.jpg" alt="lion">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div>
<div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
</div>
<div class="galery framme" 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>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div>
</div>
</article>
</main>
</body>