User:Cassiel Seraphim/Sandbox9: Difference between revisions

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.

@@ 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>