How to create a virtual cube (for dice) using html and css?

Question

I am trying to make virtual death (for dice) using CSS / HTML and JavaScript ... My part of JavaScript works, but I can not get HTML / CSS to render it the way I want (without creating a table without fields and placing each dots in the cell). I did the following JSfiddle: http://jsfiddle.net/ShoeMaker/KwBaN/5/ , and when you get 4, 5 or 6, you can see my problem.

I want to get an analog matrix with a set of square brackets [] with the correct number of points inside. 1. should have one point in the middle-middle 2. should have one point in the upper left and one in the lower right corner 3. should have one point in the upper left corner, one in the middle-middle and one in the lower right corner 4. should have one in the upper left, upper right, lower left and lower right 5. must have one in the upper left, upper right, mid-average, lower left and lower right 6. must have three upper and three on the bottom (or three on the left side and three down on the right side).

I was thinking of creating a table without borders, but I would like to try to do this with block / inline and super / sub first. I DO NOT want to show images (not allowed). They only need to display the end result, not flicker, and pretend that it is rolling (although in the future it can be cool). I do not want to make them "digital" using ASCII characters or the like. (Too traditional, like analog bones).

Any ideas that my violin is not working, as I assume?

A couple of additional notes ...

• I can use this with "non-standard" bones (with 7, 9, 12, 20, sides) in the future, should be easily adapted (using ":" doesn work).

• I would like it to be relatively small (should not occupy 1/8 of the screen per cube (Yahtzee will occupy more than half the screen!))

Answer 1

Few things.

Span elements are already built-in elements, so you do not need to specify them inside your css.

Please note that your "ordinary" elements are now wrapped in the parent container with the "inline block" display style. The internal elements have been changed as block elements, since you want them to be “stacked” on top of each other to achieve the desired effect.

 <span class="bracket">[</span> <div id="die"> <div id="TopRow">&nbsp;&nbsp;&nbsp;</div> <div id="MidRow">&nbsp;&nbsp;&nbsp;</div> <div id="BotRow">&nbsp;&nbsp;&nbsp;</div> </div> <span class="bracket">]</span> #die { display: inline-block; padding: 5px; } span.bracket { font-size: 95px; } #TopRow, #MidRow, #BotRow { font-weight: bold; } 

Updated fiddle: http://jsfiddle.net/KwBaN/11/

EDIT : According to your comment, there is another update here to make "die" a little smaller:

 div { padding: 0; margin: 0; } #die { display: inline-block; } span.bracket { font-size: 40px; } #TopRow, #MidRow, #BotRow { font-weight: bold; font-size: 12px; line-height: 8px; } 

another updated script: http://jsfiddle.net/KwBaN/34/

Answer 2

I have done some html and css and the result here is

http://jsfiddle.net/ashwyn/KwBaN/21/

Edit:
Updated fiddle with built-in css.
http://jsfiddle.net/ashwyn/KwBaN/36/

Answer 3

HTML:

 <span>[</span> <div style="display:inline-block;"> <div id='top'></div> <div id='mid'></div> <div id='bot'></div> </div> <span>]</span> 

Just add the font sizes to the material and make the id correct and it should work. It displays dots on three lines to the right of each other. Maybe mess with line-height to make it pretty.

Answer 4

What does it look like?

http://jsfiddle.net/NuRKL/12/