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

tentative de mise en page justifiee a gauche pour litterall

Browse Source
This commit is contained in:
hugogogo
2021-01-23 13:28:47 +01:00
parent f80db17a7b
commit 8437e19ea0
8 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/imp_couv-18p.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
docs/revues/litt17.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
docs/revues/litt19.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
docs/revues/litt20.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
docs/revues/litt21.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
docs/revues/litt22.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

0
docs/exemple_litterall.jpg → docs/revues/litt23.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 57 KiB

86
pages/litterall.html
View File

@@ -15,76 +15,82 @@
<style>
body {
margin: 0px;
padding: 20px;
width: calc(100% - 40px);
padding: 1%;
width: calc(98%);
}
#main, #main * {
display: flex;
flex-wrap: wrap;
.horizontal {
flex-direction: raw;
}
.horizontal > * {
margin: 20px auto;
}
.vertical {
flex-direction: column;
}
.vertical > * {
margin: auto;
margin: 20px auto;
}
.img_container {
border: 1px solid red;
flex-grow: 0;
justify-content: flex-start;
margin-left: -2px;
/*
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
grid-gap: 16px;
justify-content: center;
padding: initial;
/*
flex-grow: 0;
justify-content: flex-start;
margin: 20px;
*/
}
.img_container img {
margin: 2px;
border: 1px solid grey;
}
</style>
</head>
<body>
<!-- la barre de navigation -->
<nav>
</nav>
<!-- -->
<header>
</header>
<!-- -->
<aside>
</aside>
<!-- -->
<main>
<!-- -->
<!-- main
ne doit pas contenir : sidebars <aside> - navbar <nav> - search form
ne doit pas etre contenu par : <article> - <aside> - <footer> - <header> - <nav>
-->
<main class="vertical">
<!-- article
-->
<article class="vertical">
<h1>
texte de presentation
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur luctus. Praesent sit amet augue interdum, laoreet magna sit amet, dignissim eros. Sed nec enim condimentum, condimentum nunc sed, congue elit. Nullam tellus lorem, faucibus vitae eros in, ultricies luctus ligula. Aenean tristique, ante sed dictum faucibus, risus nisl pretium quam, quis consequat ipsum risus a lacus. Integer pulvinar, ex nec lacinia vulputate, est elit dictum risus, sit amet sollicitudin metus turpis nec odio. Morbi orci felis, sollicitudin eu enim id, sollicitudin viverra dolor. Ut vestibulum quis mauris vitae faucibus. Suspendisse ultricies diam est, sit amet tempor est tristique ac. Ut at posuere magna. Fusce ut bibendum elit. Pellentesque vulputate, leo ac bibendum suscipit, quam magna consectetur odio, hendrerit convallis elit eros ac leo. Suspendisse interdum libero id mi molestie sollicitudin. Praesent auctor quis lorem non cursus. Nullam sit amet semper turpis. Maecenas sed hendrerit erat.
Vestibulum ultricies nisl in elit pulvinar, ac dignissim libero finibus. Aenean bibendum venenatis augue, quis convallis metus facilisis at. Suspendisse risus mi, bibendum eget urna vel, consectetur rutrum purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt mollis ante eget iaculis. Donec a finibus nisl, at hendrerit diam. Phasellus eget magna et nisi feugiat bibendum. Donec pretium nisi sit amet lorem volutpat venenatis.
</p>
<img class="centre" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<p>
Vestibulum ultricies nisl in elit pulvinar, ac dignissim libero finibus. Aenean bibendum venenatis augue, quis convallis metus facilisis at. Suspendisse risus mi, bibendum eget urna vel, consectetur rutrum purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt mollis ante eget iaculis. Donec a finibus nisl, at hendrerit diam. Phasellus eget magna et nisi feugiat bibendum. Donec pretium nisi sit amet lorem volutpat venenatis.
</p>
<img class="centre" src="./docs/revues/litt23.jpg" alt="revue litterall" width="240">
<div class="img_container">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
</div>
</article>
</main>
<!-- -->
<footer>
</footer>
</body>
</html>