Différences

Ci-dessous, les différences entre deux révisions de la page.

--- pratique:informatique:pinterest [29/03/2018 12:46] – [Se refaire le tableau en web] Zatalyz
+++ pratique:informatique:pinterest [30/03/2018 15:31] – [Se refaire le tableau en web] Zatalyz
@@ Ligne 36: / Ligne 36: @@
     margin:0;
-}
-.tableau {
-    display:flex;
-    flex-flow:row wrap;
-}
-.tableau ul {
-    column-count:6;
-    list-style-type: none;
 }
 .thumb {
-margin:1em;
 max-width:100%;
 display:block;
 height:auto;
+}
+.masonry {
+    padding: 0;
+    column-gap: 0.1em;
+    font-size: .85em;
+	column-count: auto;
+	column-width: 200px;
+}
+.item {
+    display: inline-block;
+    padding: 0.5em;
 }
 </code>
@@ Ligne 74: / Ligne 78: @@
        ?>
+<div class="masonry">
+<div>
-<div class="tableau">
-<ul>
     <?php // Liste et affiche les images
     foreach($files as $image) { $f= str_replace($repertoire,'',$image); ?>
-       <li><img class="thumb" src="<?php echo $f; ?>" alt=""/></li>
+       <div class="item"><img class="thumb" src="<?php echo $f; ?>" alt=""/></div>
     <?php } ?>
-</ul>
 </div>
+</div>
 </body>
@@ Ligne 93: / Ligne 96: @@
 Quelques modif sur le plugin gallery (en cours). Il faut configurer dans l'administration la largueur des miniatures à 236px (c'est ce qu'on récupère), mettre la hauteur beaucoup plus grande pour avoir de la marge (j'ai mis 500px).
+Mettre ceci dans le css fonctionne presque :
+<code css>
+div.dokuwiki div.gallery table img.tn {
+	width:100%;
+	border:none;
+}
+div.dokuwiki div.gallery img.tn {
+margin:0;
+padding:0;
+}
+div.dokuwiki div.gallery table td {
+padding:0.1em;
+}
+</code>
+Malheureusement Gallery utilise des lignes (row) et non des colonnes pour son tableau... Il va falloir hacker un peu ça...