Differences

This shows you the differences between two versions of the page.

--- handleiding_nieuw:kengetallenboek [2025/03/31 20:04] – support
+++ handleiding_nieuw:kengetallenboek [2025/04/09 19:08] (current) – support
@@ Line 1: / Line 1: @@
 <html>
 <style>
 .tegelcontainer {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(3, 100px);
-  justify-content: flex-start;
+  gap: 1.5em 2em; /* row-gap, column-gap */
-  gap: 1em;
+  margin-top: 1em;
-  margin-top: 2em;
+  margin-bottom: 2em;
 }
 .tegel {
-  width: 84px;
+  width: 100px;
-  height: 48px;
+  height: 54px;
   background: #ddd;
   display: flex;
@@ Line 37: / Line 38: @@
   font-weight: bold;
   margin-top: 2em;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.4em;
-}
-.flexgroep {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1em;
-  margin-bottom: 2em;
 }
 </style>
-<div style="display: flex; align-items: flex-start; gap: 2em; flex-wrap: wrap;">
+<div style="display: flex; gap: 2em; align-items: flex-start; flex-wrap: wrap;">
-  <div style="flex: 1; min-width: 320px; max-width: 600px;">
-    <h1>Kengetallenboek</h1>
-    <p><strong>Kies een profielcategorie:</strong></p>
+  <!-- Linker kolom: tegels -->
+  <div style="flex: 1; min-width: 300px;">
-    <div class="kopgroep">Wegprofielen</div>
+    <div class="kopgroep">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wegprofielen</div>
-    <div class="flexgroep">
+    <div class="tegelcontainer">
+      <div class="tegel"  style="background: #eee;"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_klimaat">KLIMAAT-<br>OPLOSSINGEN</a></div>
       <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_wijkbuurt">WIJK/BUURT</a></div>
       <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_woonstraten">WOONSTRATEN</a></div>
@@ Line 60: / Line 55: @@
     <div class="kopgroep">Leefgebieden en ontmoetingsplekken</div>
-    <div class="flexgroep">
+    <div class="tegelcontainer">
       <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_pleinen">PLEINEN</a></div>
       <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_parken">PARKEN</a></div>
@@ Line 67: / Line 62: @@
     <div class="kopgroep">Overige kostenbepalende elementen</div>
-    <div class="flexgroep">
+    <div class="tegelcontainer">
       <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_watergangen">WATERGANGEN</a></div>
       <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_elementen">ELEMENTEN</a></div>
+      <div class="tegel" style="background: #eee;"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_infooverons">OVER ONS</a></div>
     </div>
-    <div class="kopgroep">Aanvullende onderdelen</div>
-    <div class="flexgroep">
-      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_klimaat">KLIMAAT-<br>OPLOSSINGEN</a></div>
-      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_infooverons">OVER ONS</a></div>
-    </div>
   </div>
-  <div style="flex: 1; min-width: 320px; text-align: left;">
+  <!-- Rechter kolom: voorblad -->
+  <div style="flex: 1; min-width: 450px; text-align: right;">
     <img src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:kengetallen:voorblad.jpg" alt="Kengetallen voorblad" style="width: 100%; max-width: 640px; height: auto;">
   </div>
 </div>
 </html>