Baseball scorekeeping with a DIY Baseball Scorecard in html. See 'Create a Baseball Scorecard in Blogger' to set up your own scorecard blog. Scoring games with an on-line scoring form as part of the process of baseball writing (http://baseball---blog.blogspot.ca/).

Thursday, April 21, 2011

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




























































No comments:

Post a Comment

StatCounter


View My Stats

Calling for a Public Inquiry into Policing at the G20 Summit.

Creative Commons License Blogger Baseball Scorecard Blog by Michael Holloway
is licensed under a Creative Commons Attribution 2.5 Canada License.
Permissions beyond the scope of this license may be available at michaelholloway111(at)gmail(dot)com