I’ve created a sudoku puzzle creator / solver and need a bit of help with some CSS to style it.
Typically they are styled like this:
Some naming I’m using.
Cell - each individual cell which contains a single number.
Box - one of the 9 boxes each containing 3 x 3 cells
Grid - the entire 9x9 playing area.
My html is partially generated by my ruby / Sinatra app (at least the repeating DIV’s are) and structured as such :
#game {
margin-left: auto;
margin-right: auto;
width: 360px;
}
.cell input {
display: inline-block;
float: left;
width: 40px;
height: 40px;
border-style: solid;
border-width: 1px;
text-align: center;
font-size: 15px;
}
<form action="/" method="post">
<div id="game">
<div class="cell">
<input name="cell[0]" type="text" maxlength="1" value=<%=val%>>
</div>
<div class="cell">
<input name="cell[1]" type="text" maxlength="1" value=<%=val%>>
</div>
<!-- ... -->
<div class="cell">
<input name="cell[79]" type="text" maxlength="1" value=<%=val%>>
</div>
<div class="cell">
<input name="cell[80]" type="text" maxlength="1" value=<%=val%>>
</div>
</div>
</form>
This allows me to create the basic 9x9 grid with my first cell (0) in the top left corner and moving left to right, a row at a time, to the last cell (80) in the bottom right.
The difficulty is styling each cell so that the grid can appear split not only into rows and columns but also into the 9 larger boxes. Again see this grid for reference.
Currently I have a couple of options :
Completely rewrite my sudoku code so that I draw out the DIV’s in a different order. Wrapping each box in a grouping DIV. This would make the CSS relatively straight forward. This would be a major change and I really don’t want to go down this route.
Manually ID each cell and write the corresponding CSS for all 81 cells. Better than above but still a ball ache and not particularly slick.
I do have the option of dynamically generating the CSS styling (performance is not an issue). What I’m looking for is some help with devising an algorithm that will determine (based on it’s linear index 0..80) how each cell should be styled.
For example all the cells in the top row (0..8) will have a thick top border (3px) and a thin bottom border (1px). The bottom of all the cells in row 3 (18..26) would have a thick border but the top of those cells would have a thin border. The left hand side of all the cells in the first column would have a thick border, but the right hand side of those cells would have a thin border. And so on.