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

287
pages/litterall.html
View File

@@ -7,122 +7,15 @@
<base href="../" /> <base href="../" />
<meta name="description" content="description du site web"> <meta name="description" content="description du site web">
<meta name="keywords" content="truc, bidule, chouette"> <meta name="keywords" content="truc, bidule, chouette">
<!--
<link href="./styles/style.css" type="text/css" rel="stylesheet"> <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> <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 { main {
margin-left: 20px; margin-left: 20px;
} }
.card p {
display: none;
display: block;
}
img#dernier_numero { img#dernier_numero {
width: 240px; width: 240px;
max-width: 98vw; max-width: 98vw;
@@ -150,6 +43,51 @@
<div class="image_container"> <div class="image_container">
<img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall"> <img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall">
</div> </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="gallery frame" id="tous_numeros">
<div class="card"> <div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall"> <img src="./docs/revues/litt22.jpg" alt="revue litterall">
@@ -159,14 +97,6 @@
<img src="./docs/revues/litt21.jpg" alt="revue litterall"> <img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p> <p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div> </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"> <div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall"> <img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p> <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"> <img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </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"> <div class="card">
<img src="./docs/revues/lion.jpg" alt="lion"> <img src="./docs/revues/lion.jpg" alt="lion">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p> <p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
@@ -187,17 +121,33 @@
<img src="./docs/revues/litt21.jpg" alt="revue litterall"> <img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </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="gallery" id="tous_numeros">
<div class="card"> <div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall"> <img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall"> <img src="./docs/revues/litt21.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p> <p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt20.jpg" alt="revue litterall"> <img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p> <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>
<div class="card"> <div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall"> <img src="./docs/revues/litt19.jpg" alt="revue litterall">
@@ -208,16 +158,8 @@
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p> <p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall"> <img src="./docs/revues/lion.jpg" alt="lion">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p> <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/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall"> <img src="./docs/revues/litt21.jpg" alt="revue litterall">
@@ -225,6 +167,30 @@
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt20.jpg" alt="revue litterall"> <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> <p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div> </div>
<div class="card"> <div class="card">
@@ -233,17 +199,70 @@
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt17.jpg" alt="revue litterall"> <img src="./docs/revues/litt17.jpg" alt="revue litterall">
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p> <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>
<div class="card"> <div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall"> <img src="./docs/revues/litt19.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </div>
</div>
<div class="galery framme" id="tous_numeros">
<div class="card"> <div class="card">
<img id="last-child-img" src="./docs/revues/litt21.jpg" alt="revue litterall"> <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> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </div>
</div> </div>
</article> </article>
</main> </main>
</body> </body>

148
styles/images.css Normal file
View File

@@ -0,0 +1,148 @@
/*GALLERY*/
/*
<div class="gallery">
<div class="card">
<img src="img.jpg">
<p>description</p>
</div>
</div>
.gallery
----- ---- --- ----
' '' '' '' '
' '' '' '' '
'-----''----''---''----'
~~ ~ ~~ ~~ ~~ ~
---- --- --- ------
' '' '' '' '
' '' '' '' '
'----''---''---''------'
~~~ ~ ~ ~ ~~ ~~
------ ---
' '' '
' '' '
'------''---'
~~ ~ ~ ~
images are stretched to cover the entire raw
it works well with images of similar size
<div class="gallery frame">
</div>
.gallery.frame
-------- --------- ---------- ---------
' ---- '' ----- '' ------ '' ----- '
' ' ' '' ' ' '' ' ' '' ' ' '
' ' ' '' ' ' '' ' ' '' ' ' '
' '----' '' '-----' '' '------' '' '-----' '
' ~~ ~~ '' ~~~ ~ '' ~~ ~~ ~ '' ~~ ~~ '
'--------''---------''----------''---------'
----------- -------
' ------- '' --- '
' ' ' '' ' ' '
' ' ' '' ' ' '
' '-------' '' '---' '
' ~~ ~~ '' ~~~ '
'-----------''-------'
images keeps their real ratio, but a frame appear around them
*/
/*adjusting settings*/
:root {
/*GALLERY*/
/*space between columns of cards*/
--gallery-gap-unit: 6px;
/*images height and border*/
--gallery-img-height: 200px;
--gallery-img-border-width: 1px;
--gallery-img-border-color: lightgrey;
/*frames width and color*/
--gallery-frame-width: 1px;
--gallery-frame-color: lightgrey;
--gallery-frame-color: transparent;
}
/*design*/
.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*/
/*that also handle vertical space between cards without frames*/
margin: var(--gallery-gap-unit) 0px;
}
.gallery .card img {
/*height of imgs hence of lines*/
max-height: var(--gallery-img-height);
/*appearence of border of imgs*/
border-style: solid;
border-width: var(--gallery-img-border-width);
border-color: var(--gallery-img-border-color);
}
/*to avoid last element of gallery to stretch untill end of line*/
.gallery::after {
content: "";
flex: 100;
}
/*in case of frames*/
.gallery.frame .card {
/*spaces between cards*/
margin-top: var(--gallery-gap-unit);
margin-right: calc(var(--gallery-gap-unit) * 2);
margin-bottom: var(--gallery-gap-unit);
margin-left: 0px;
/*horizontal spaces inside of cards*/
/*vertical space is handled below by margins of childs elements*/
padding-left: var(--gallery-gap-unit);
padding-right: var(--gallery-gap-unit);
/*width and color of frames*/
border-style: solid;
border-width: var(--gallery-frame-width);
border-color: var(--gallery-frame-color);
}
.gallery.frame .card > * {
margin: var(--gallery-gap-unit) auto;
}
/*GALERY*/
.galery {
display: flex;
flex-wrap: wrap;
}
.galery .card {
display: flex;
flex-direction: column;
margin: 20px;
margin-left: 0px;
/* flex: 1; =
flex: 1 0 0;
or
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
*/
flex: 0 1 0;
border: 1px solid black;
}
.galery .card img {
height: 200px;
border: 1px solid lightgrey;
}
.galery .card > * {
margin: 10px auto;
flex: 1 1 auto;
}

20
styles/style.css
View File

@@ -5,6 +5,7 @@
@import url(./fonts.css); @import url(./fonts.css);
@import url(./header.css); @import url(./header.css);
@import url(./footer.css); @import url(./footer.css);
@import url(./images.css);
@@ -59,12 +60,27 @@ html {
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0px;
padding: 1%;
width: calc(98%);
} }
main { main {
min-height: calc(100vh - 70px); min-height: calc(100vh - 70px);
} }
.horizontal {
display: flex;
flex-direction: row;
}
.horizontal > * {
margin: 20px;
}
.vertical {
display: flex;
flex-direction: column;
}
.vertical > * {
margin: 20px 0px;
}
/*/////////////////////////////////////////////*/ /*/////////////////////////////////////////////*/