Differences

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

--- handleiding_nieuw:kengetallenboek [2025/03/31 20:46] – support
+++ handleiding_nieuw:kengetallenboek [2025/04/09 19:08] (current) – support
@@ Line 1: / Line 1: @@
 <html>
 <style>
-.banner {
-  background-image: url('/wiki/lib/exe/fetch.php?media=handleiding_nieuw:kengetallen:voorblad.jpg');
-  background-size: cover;
-  background-position: center;
-  padding: 4em 2em;
-  color: white;
-  text-shadow: 1px 1px 2px black;
-  text-align: center;
-  font-size: 2em;
-  font-weight: bold;
-}
 .tegelcontainer {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(3, 100px);
-  gap: 1em;
+  gap: 1.5em 2em; /* row-gap, column-gap */
-  margin-top: 2em;
+  margin-top: 1em;
+  margin-bottom: 2em;
 }
 .tegel {
-  width: 84px;
+  width: 100px;
-  height: 48px;
+  height: 54px;
   background: #ddd;
   display: flex;
@@ Line 47: / 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 class="banner">
+<div style="display: flex; gap: 2em; align-items: flex-start; flex-wrap: wrap;">
-  Kengetallenboek<br>
-  Digitale kostenkengetallen
-</div>
-<div style="max-width: 900px; margin: 2em auto;">
+  <!-- Linker kolom: tegels -->
-  <div class="kopgroep">Wegprofielen</div>
+  <div style="flex: 1; min-width: 300px;">
-  <div class="flexgroep">
-    <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>
-  </div>
-  <div class="kopgroep">Leefgebieden en ontmoetingsplekken</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"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_pleinen">PLEINEN</a></div>
+      <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_parken">PARKEN</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_winkelstraten">WINKELSTRATEN</a></div>
+      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_woonstraten">WOONSTRATEN</a></div>
-  </div>
+    </div>
+    <div class="kopgroep">Leefgebieden en ontmoetingsplekken</div>
+    <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>
+      <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_winkelstraten">WINKELSTRATEN</a></div>
+    </div>
+    <div class="kopgroep">Overige kostenbepalende elementen</div>
+    <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">Overige kostenbepalende elementen</div>
-  <div class="flexgroep">
-    <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>
-  <div class="kopgroep">Aanvullende onderdelen</div>
+  <!-- Rechter kolom: voorblad -->
-  <div class="flexgroep">
+  <div style="flex: 1; min-width: 450px; text-align: right;">
-    <div class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_klimaat">KLIMAAT-<br>OPLOSSINGEN</a></div>
+    <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 class="tegel"><a href="/wiki/doku.php?id=handleiding_nieuw:sub_infooverons">OVER ONS</a></div>
   </div>
 </div>
 </html>