How can I create a virtual die (for playing dice) using html and css?

Question

I am trying to make a virtual die (for playing dice) using CSS/HTML and JavaScript... My JavaScript part is working, but I can't seem to get the HTML/CSS to display it the way I want (without creating a borderless table and putting each dot in a cell). I made the following JSfiddle: http://jsfiddle.net/ShoeMaker/KwBaN/5/ and when you get a 4, 5, or 6 you can see my problem..

I want to get an analog die with a set of square brackets [ ] with the correct number of dots inside. 1. should have one dot in the middle-middle 2. should have one dot in the top-left and one in the bottom-right 3. should have one dot in the top-left, one in the middle-middle, and one in the bottom-right 4. should have one in the top-left, top-right, bottom-left, and bottom-right 5. should have one in the top-left, top-right, middle-middle, bottom-left, and bottom-right 6. should have three across the top and three across the bottom (or three down the left side and three down the right side).

I've thought about creating a border-less table, but I would like to try and do it with block/inline and super/sub first. I do NOT want to display images (not allowed). They only need to display the end result, not flicker and pretend to be rolling (although that may be cool in the future). I don't care to make them "digital" using ASCII characters or the like. (Too traditional, like analog dice).

Any ideas my my fiddle isn't working as I intend?

Couple of minor additional notes...

• I may want to use this with "non-standard" dice ( those with 7, 9, 12, 20, ??? sides ) in the future, needs to be easily adaptable (Using ":" doesn't work).

• Would like it to be relatively small (Shouldn't take up 1/8 of the screen per die (Yahtzee would take more than half the screen!))

Answer 1

A couple of things.

Span elements are already inline elements so you don't need to specify such within your css.

Note, that your "row" elements are now wrapped within a parent container with a display style of "inline-block". The inner elements were changed to be block elements as you want them to be "stacked" on top of each other to achieve your 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: As per your comment here is another update to make the "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 fiddle: http://jsfiddle.net/KwBaN/34/ ​