Vorlage:Wahldiagramm einfach/Style.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 68: / Zeile 68: @@
          width: 100% !important;
          box-sizing: border-box;
+        padding-bottom: 2.5em;
          overflow: visible;
      }
+    /* Container für Diagramm mit Hintergrund */
      dl.vertical {
-         justify-content: space-evenly;
+         justify-content: space-between;
          width: 100%;
+        min-width: 100%;
          background: repeating-linear-gradient(0deg, #ddd, #ddd 1px, #fff 1px, #fff 20%);
          height: 200px;
+        position: relative;
          overflow: visible;
-        padding-bottom: 2em;
      }
+    /* Balken-Container erweitern für Labels */
      dl.vertical dd {
          background: none;
          overflow: visible;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
      }
+    /* Labels direkt nach dem Balken */
      dl.vertical dt {
-         margin: 10px 0 0 -22.5px;
+        position: static;
+         margin: 5px 0 0 0;
+        width: 100%;
+        text-align: center;
          font-size: 85%;
          white-space: nowrap;
+        order: 2;
+        flex-shrink: 0;
+    }
+    /* Balken-Bereich definieren */
+    dl.vertical dd::before {
+        content: '';
+        width: 100%;
+        height: 200px;
+        position: relative;
+        order: 1;
+    }
+    /* Spans (Balken) anpassen */
+    dl.vertical dd span {
+        min-width: 100%;
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        order: 1;
      }
+    /* Trenner */
      .divider {
          width: 1em;
          background: none;
+        position: relative;
      }
 }