A couple of days ago I published "Minima II - A Diamond in the Field", an scorecard that used a positioned image to show a Baseball-field icon in each of the Minima II Scorecard's at-bat boxes. There were a few problems with the concept - slow response time in Blogger Compose, the colour of the image was really hard to change, and the text area from a box would not expand over an image in another at-at box - so if I wanted to write a long note on the scorecard I had to open several different text areas and lay in four lines of text then close that one open the next one below, add more text... .
So that experience lead me to try and create a baseball field icon using CSS border elements, the same code that the diamond shape that represents the infield in each AB box are constructed with. I didn't try this obvious method first because I assumed that piling several border elements over top of each other - in this case, one on top of four - might hide the properties of one or the other. That was not a problem as you can see below.
The neon green baseball-field shape is a 'left;' 'right;' and 'top;' element in absolute position relative to the AB box surrounding it. The code for this is written in right after the code that forms the AB box. Lower down in the code, four individual sets of CSS border elements are written in that render as for four sides of the diamond - these also float in absolute position to the AB box.
No conflicts. The the second code lays over top of the previous border and the text areas in each quadrant do as they're supposed to do as well, lay text over top of all of it - with the box they're in rendering transparent.
Happy, happy, joy, joy.
Today I'm going to try reconfiguring the lay out of the scorecard making the scorecard a series of 'Columns' rather than a series if 'Rows'. This way I hope to make it easy to add inning columns (eventually with the click of a button) if a team bats around, or the game goes into extra innings.
mh
1.
|
the quick brown fox jumps over the lazy dog
CS 2-6 RBI BH7 |
No comments:
Post a Comment