Difference between revisions of "User:Cassiel Seraphim/Sandbox9"

Revision as of 21:54, 29 November 2016

Having all the attributes in each <div> works fine ...

1,06%

2,18%

10,00%

Can't get rid of the spacing between rows.

1,06%

2,18%

10,00%

@@ Line 1: / Line 1: @@
 {{#css:
+.wrap div { margin:1px; padding-left:1px; border-spacing:0; border-collapse:collapse; display:inline-block; }
-.bars div { font-size:10px; color:crimson; padding:1px; line-height:100%; margin:1px; }
+.bars { height:10px; vertical-align:middle; }
-.c1 { float:left; height:10px; margin:0px; padding:0px; background-color: #D7D900; }
+.c1 .bars { background-color:#D7D900; }
-.c2 { float:left; height:10px; margin:0px; padding:0px; background-color: #93D500; }
+.c2 .bars { background-color:#93D500; }
-.c3 { float:left; height:10px; margin:0px; padding:0px; background-color: #51D200; }
+.c3 .bars { background-color:#51D200; }
+.text { font-size:10px; color:wheat; vertical-align:text-middle; }
 }}
 == Foo ==
@@ Line 13: / Line 14: @@
 == Foobar ==
-Moving the attributes into the div breaks the text-formatting ... no idea why.
+Can't get rid of the spacing between rows.
-<div class="bars">&nbsp;1,06%<div class="c1" style="width:11px;"></div></div>
+<div class="wrap c1"><div class="bars" style="width:11px;"></div><div class="text">1,06%</div></div>
-<div class="bars">&nbsp;2,18%<div class="c2" style="width:22px;"></div></div>
+<div class="wrap c2"><div class="bars" style="width:22px;"></div><div class="text">2,18%</div></div>
-<div class="bars">&nbsp;10,00%<div class="c3" style="width:100px;"></div></div>
+<div class="wrap c3"><div class="bars" style="width:100px;"></div><div class="text">10,00%</div></div>