User:Davidgothberg/Test14

Solved the right margin problem

I use borders to handle the cell "margins". A div tag (or a table) creates the outer border. Inside I have a table with no margins of its own (style="border-collapse:collapse;"). Then I create fake cell margins by using border-top for groups and border-top + border-left for lists.

Note that lists that take a subgroup must have padding:0px, while we want normal padding (2px or more) for lists that hold text content. This means that we need a way to inform the list cell that it has a subgroup. I suggest that we do that by using two kinds of list items, the normal "list1" that is for text content and then "list1sub" that is for subgroup content.

Correct usage

Header cell
Group1: Row 2, cell 1	Group1: Row 1, cell 1 List1: Row 1, cell 2. Group2: Row 2, cell 1 Group1: Row 1, cell 1 List1: Row 1, cell 2. Group2: Row 2, cell 1 List2: Row 2, cell 2.
Group2: Row 3, cell 1	List2: Row 3, cell 2.

Incorrect usage

Here is how the box would look with default colouring and a user that inserted the subgroups wrongly into "list1" instead of "list1sub". As you see the padding only becomes slightly wrong and the error only becomes very visible when the mistake is done with an even list that has grey background. I guess it is both a good and a bad thing that the error doesn't become that visible.

Header cell
Group1: Row 2, cell 1	Group1: Row 1, cell 1 List1: Row 1, cell 2. Group2: Row 2, cell 1 Group1: Row 1, cell 1 List1: Row 1, cell 2. Group2: Row 2, cell 1 List2: Row 2, cell 2.
Group2: Row 3, cell 1	List2: Row 3, cell 2.

Skinnable

Disclaimer: This CSS code is not properly tested yet, I may be selecting objects in the wrong way. But this is just a demo.

/* Nbox style */
div.nbox {                    /* Outer border and padding. */
  border:1px solid #aaa; 
  padding:4px; 
  background:#fcfcfc;         /* Navbox background. */
}
th.nbox-head {                
  background:#ccf;            /* Header cell color. */
}
table.nbox th {          
  border:2px solid #fcfcfc;   /* Group margin / Navbox background. */
  background:#ddf;            /* Group color. */
}
table.nbox td {          
  border:2px solid #fcfcfc;   /* List margin / Navbox background. */
  background:#cfcfc;          /* List color. */
}
td.nbox-even {            
  background:#f5f5f5;         /* Even list color. */
}

The trick here is that in the CSS we just need to set the border all around the cells, not bothering about left/top etc. Then in the template code we instead REMOVE the sides of the border we don't want by using border-right:none; etc. This allows the CSS to set all colours and all margin/border widths!

In this demo I have the CSS code above hardcoded as the first style items, then followed by the actual template style items.

Header cell
Group1: Row 2, cell 1	Group1: Row 1, cell 1 List1: Row 1, cell 2. Group2: Row 2, cell 1 Group1: Row 1, cell 1 List1: Row 1, cell 2. Group2: Row 2, cell 1 List2: Row 2, cell 2.
Group2: Row 3, cell 1	List2: Row 3, cell 2.

The CSS code can of course handle all the text styles and we can add one CSS section that gives subgroup group cells another colour than group cells at the main level. But I skipped that part here for simplicity.

This probably also simplifies the usage of parameters that set the colours since we only have to insert such a parameter to set each cell border all around once. Then the border-right:none; etc removes the sides we don't need. Instead of inserting the parameter for each border side we want.

Skinnable, with images and above/below

Header cell
Above
Group1: Row 1, cell 1 Group1: Row 1, cell 1 List1: Row 1, cell 2. Group2: Row 2, cell 1 Group1: Row 1, cell 1 List1: Row 1, cell 2. Group2: Row 2, cell 1 List2: Row 2, cell 2. Group2: Row 2, cell 1 List2: Row 2, cell 2.
Below