April 21, 2011 - CSS Position Scorecard - The 'Minima II' - Blogger Baseball Scorecard

The CSS Position Scorecard uses CSS 'left' and 'top' markup with-in 'relative' and 'absolute' attributes to position elements. Each 'At-Bat' (AB) box and each 'slash' in the 'Per-Inning' tables are made this way. The AB box includes: a pitch notation column; a diamond icon; four notation boxes around the diamond; and three 1px wide 'separator' lines that define five text areas. The per-Innings notation rows are produced with two elongated diamonds and four text areas in the same way. There are only three tables in this scorecard two are repeated. The solitary, upper-most, "Box Score" table is a separate table; as is the "Pitcher Totals" table at the middle and bottom. All 5 tables in the two team scorecard stay where they're supposed to be by setting the blog's outer wrapper just wide enough to fit the width of the large AB box table; that way if there isn't enough room for the next table on the right margin, the 'align-left' default (that all browsers are set to), kicks the next table to the next line, first column, left margin.

Everything is absolutely stable on any setting in any browser. And how stable it is! I'm amazed how well it works. In any Zoom setting everything stays exactly in the same place relative to everything else - and I mean exactly - to the pixel.

The usability of the scorecard is also greatly improved over earlier models. In Blogger Compose mode, adding scoring notations is quick and easy, the Blogger interface is fast and responsive. That's mainly because of two things: the file size and a simple design schematic. This scorecard is 352,256 bytes (compared to the earlier 'Minima' scorecard at 618,496 bytes). It's much quicker because of size, but more importantly I think, because the coding is much, much simpler. I've rationalized the elements of the scorecard so several perform multiple functions all over the card - using the same boxes over and over in different tables - and I've made a big leap in understanding CSS with this build, adding markup to the CSS style sheet that applies characteristics to a type of box - rather than to specific text areas like I was doing in 'Minima I'.

Not only is this new scorecard have an efficient style sheet is also has a very efficient schematic. All the elements of the main block (the Title row, the nine AB box rows and the five Per-Innings rows) are div elements that hang on One column of tr tags in One table -  instead of the Minima markup with it's hundreds of tables - and tables with-in tables.

This card truly is a 'Minima' Scorecard - both in look and in construction.

The two are so different I hesitate to name them similarly, but - because they are consecutive projects in my learning curve - a natural progression away from tables and towards a much fuller appreciation of the capabilities of CSS - I will. I do:

Please welcome, The 'Minima II' - Blogger Baseball Scorecard.


The next step is to play a little more with position and try see if I can make the tables float wherever I want - to add a little style and minimize this 'wall of bricks' look. :)

mh

Box Score	1st	2nd	3rd	4th	5th	6th	7th	8th	9th	Runs	Hits	Errors	LOB
Visitors
Home

Visiting Team	1st	2nd	3rd	4th	5th	6th	7th	8th	9th	AB R H BB SAC RBI SO HBP LOB 2BH 3BH HR AVG PO A E
1. Jarrod Saltalamacchia C	BH7	2BH9 #9 1,2 RBI #9 1,2	3BH8(9)	HR8 RS RBI	BBBB BB	BCSB FFBS Ks	1 2 3 4 UPPERCASELETTERS 1 2 3 4 lowercaseletters		RBI WP BB #7 3,H #8 2,3 #9 1,2	6 1
2.
3.
4.
5.
6.
7.
8.
9.
Per-Inning Totals	1st	2nd	3rd	4th	5th	6th	7th	8th	9th	Totals
Runs Hits Errors LOB	2 3 0 1

Pitching Totals	IP	H	R	ER	BB	K	HR	P/S	ERA

Home Team	1st	2nd	3rd	4th	5th	6th	7th	8th	9th	AB R H BB SAC RBI SO HBP LOB 2BH 3BH HR AVG PO A E
1.
2.
3.
4.
5.
6.
7.
8.
9.
Per-Inning Totals	1st	2nd	3rd	4th	5th	6th	7th	8th	9th	Totals
Runs Hits Errors LOB

Pitching Totals	IP	H	R	ER	BB	K	HR	P/S	ERA