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

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 83: / Zeile 83: @@
      }
-     /* Balken-Container erweitern für Labels */
+     /* Balken ohne eigenen Hintergrund, aber mit Platz für Labels */
      dl.vertical dd {
          background: none;
          overflow: visible;
          position: relative;
-        display: flex;
+         flex: 1;
-         flex-direction: column;
+         max-width: none;
-         align-items: center;
      }
-     /* Labels direkt nach dem Balken */
+     /* Labels korrekt positionieren - relativ zu ihrem dd */
      dl.vertical dt {
-         position: static;
+         position: absolute;
+        top: 205px;
+        left: 0;
+        right: 0;
          margin: 5px 0 0 0;
          width: 100%;
@@ Zeile 101: / Zeile 103: @@
          font-size: 85%;
          white-space: nowrap;
-         order: 2;
+         z-index: 10;
-        flex-shrink: 0;
-    }
-    /* Balken-Bereich definieren */
-    dl.vertical dd::before {
-        content: '';
-        width: 100%;
-        height: 200px;
-        position: relative;
-        order: 1;
      }
-     /* Spans (Balken) anpassen */
+     /* Spans (Balken) über volle Breite des dd */
      dl.vertical dd span {
          min-width: 100%;
          width: 100%;
-        position: absolute;
-        bottom: 0;
          left: 0;
-         order: 1;
+         right: 0;
      }
-     /* Trenner */
+     /* Trenner beibehalten */
      .divider {
          width: 1em;
          background: none;
-         position: relative;
+         flex: 0 0 1em;
      }
 }