Home/ Questions/Q 7580091
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T17:49:45+00:00

This is a little challenging to explain. I’m working on creating displays for golf

  • 0

This is a little challenging to explain. I’m working on creating displays for golf score cards. When a score card is displayed, for values that are 1 shot lower than par there should be a circle around the number, for values that are 2 shots lower should have a double circle. For values that are higher it’s the same with squares. I’ve solved this issue with background images before for regular stroke play, and it worked ok. But the new challenge is Match Play, because I have to use cell background color to designate which team won a particular hole, but at the same time I need to show the circles and squares. I didn’t really like the background image solution much from the beginning, because it’s not flexible enough to accomodate scores higher than 9, which are rare but do happen, and then the whole display gets throws out of alignment.

I’m not really sure if this is a jQuery question or an HTML5 question or a general HTML question. Any suggestions much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can just use border-radius.

    <span style="display: inline-block; padding: 8px; border: 1px solid black;
    border-radius: 50%;" title="Birdie">3</span>

<span style="display: inline-block; padding: 8px; border: 3px double black;
    border-radius: 50%;" title="Eagle">2</span>

    And for strokes over par:

    <span style="display: inline-block; padding: 8px;
    border: 1px solid black;" title="Bogey">5</span>

<span style="display: inline-block; padding: 8px;
    border: 3px double black;" title="Double Bogey">6</span>
    • 0