Spaceing radio buttons, and otherwise making them look pretty

okay so I want each numbered circle to have a radio option, I'd also like the radio spheres to be semi-transperent, and be the color of the colomn they're on, finally I'd like them to be as large as the spheres they're ontop of HTML: &lt;div class="navigable-section-navigable-section--ship-power ship-power"&gt; &lt;div class="speed"&gt;&lt;!--&gt;Speed&lt;--&gt; &nbsp; &lt;input type="radio" id="6" name="attr_ship_speed" value="6"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="5" name="attr_ship_speed" value="5"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="4" name="attr_ship_speed" value="4"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="3" name="attr_ship_speed" value="3"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="2" name="attr_ship_speed" value="2"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="1" name="attr_ship_speed" value="1"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="0" name="attr_ship_speed" value="0"&gt; &lt;/div&gt; &lt;div class="OOC"&gt;&lt;!--&gt;O.O.C.&lt;--&gt; &nbsp; &lt;input type="radio" id="4" name="attr_ship_ooc" value="4"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="3" name="attr_ship_ooc" value="3"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="2" name="attr_ship_ooc" value="2"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="1" name="attr_ship_ooc" value="1"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="0" name="attr_ship_ooc" value="0"&gt; &lt;/div&gt; &lt;div class="helm"&gt;&lt;!--&gt;Helm&lt;--&gt; &nbsp; &lt;input type="radio" id="6" name="attr_ship_helm" value="6"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="5" name="attr_ship_helm" value="5"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="4" name="attr_ship_helm" value="4"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="3" name="attr_ship_helm" value="3"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="2" name="attr_ship_helm" value="2"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="1" name="attr_ship_helm" value="1"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="0" name="attr_ship_helm" value="0"&gt; &lt;/div&gt; &lt;div class="guns"&gt;&lt;!--&gt;Guns&lt;--&gt; &nbsp; &lt;input type="radio" id="6" name="attr_ship_guns" value="6"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="5" name="attr_ship_guns" value="5"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="4" name="attr_ship_guns" value="4"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="3" name="attr_ship_guns" value="3"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="2" name="attr_ship_guns" value="2"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="1" name="attr_ship_guns" value="1"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="0" name="attr_ship_guns" value="0"&gt; &lt;/div&gt; &lt;div class="shields"&gt;&lt;!--&gt;Shields&lt;--&gt; &nbsp; &lt;input type="radio" id="6" name="attr_ship_shields" value="6"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="5" name="attr_ship_shields" value="5"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="4" name="attr_ship_shields" value="4"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="3" name="attr_ship_shields" value="3"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="2" name="attr_ship_shields" value="2"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="1" name="attr_ship_shields" value="1"&gt;&lt;br&gt; &nbsp; &lt;input type="radio" id="0" name="attr_ship_shields" value="0"&gt; &lt;/div&gt; &lt;/div&gt; CSS code: div.ship-power { background-image: url("<a href="https://i.imgur.com/vAF0Rt6.png" rel="nofollow">https://i.imgur.com/vAF0Rt6.png</a>"); height: 700px; width: 700px; background-repeat: no-repeat; background-size: cover; display: grid; grid-template-columns: repeat(5, 40px); } div.speed, div.helm, div.guns, div.shields { position: relative; top: 150px; } div.speed { position: relative; left: 103px; } div.OOC { position: relative; top: 290px; left: 168px } div.helm { position: relative; left: 278px } div.guns { position: relative; left: 343px } div.shields { position: relative; left: 408px } [ edit ]

You'll also need to post the html you're using for that section.

GiGs said: You'll also need to post the html you're using for that section. done

I may be being dense, but it seems like you already have what you're asking for. What does the code not do, that you want it to do?

GiGs said: I may be being dense, but it seems like you already have what you're asking for. What does the code not do, that you want it to do? positioning I would like each radio to be above the value it represents in it's column, I know to the computer it'll just see ship speed is 4, but 4 right now, to people, is hovering between 5 &amp; 6, I would also like each radio to be transperant and the colour of each column (grey, blue, yellow, red, green) while active and invisible otherwise, and I would like them to as large as the circles they stand for aka. I'm trying to recreated what the glass marbles do in the IRL copy of the game like this:

You can use opacity:0 to hide an element, like this: div.ship-power div { &nbsp; &nbsp; margin-top : -20px ; &nbsp; &nbsp; margin-left : -15px ; } div.ship-power input [ type = radio ] { &nbsp; &nbsp; height : 60px ; &nbsp; &nbsp; width : 60px ; &nbsp; &nbsp; margin-bottom : 10px ; &nbsp; &nbsp; /* opacity: 0;*/ } The opacity is commented out so you can see the buttons. You probably also want to highlight which button is clicked right now (like an image of the marble that is displayed above the currently selected radio). I eyeballed the size, might be different. This code is after removing all the &lt;br&gt; elements from the html. The height, width, and margin is used for spacing. Look at the CSS wizardry page on the wiki for less clunkys way to layout the buttons. Edit: You probably want to give the 0 values a checked attribute, like so: &lt;input type="radio" id="1" name="attr_ship_speed" value="0" checked&gt; That's so the value is set to 0 by default. You also probably don't need the id's in there, unless you are using them for something else.

GiGs said: You can use opacity:0 to hide an element, like this: div.ship-power div { &nbsp; &nbsp; margin-top : -20px ; &nbsp; &nbsp; margin-left : -15px ; } div.ship-power input [ type = radio ] { &nbsp; &nbsp; height : 60px ; &nbsp; &nbsp; width : 60px ; &nbsp; &nbsp; margin-bottom : 10px ; &nbsp; &nbsp; /* opacity: 0;*/ } The opacity is commented out so you can see the buttons. You probably also want to highlight which button is clicked right now (like an image of the marble that is displayed above the currently selected radio). I eyeballed the size, might be different. This code is after removing all the &lt;br&gt; elements from the html. The height, width, and margin is used for spacing. Look at the CSS wizardry page on the wiki for less clunkys way to layout the buttons. okay with some value tweaks I got this, nailing position and size, leaving colour and transperancy, I'll test invisibility at the end CSS: div.ship-power { background-image: url("<a href="https://i.imgur.com/vAF0Rt6.png" rel="nofollow">https://i.imgur.com/vAF0Rt6.png</a>"); height: 700px; width: 700px; background-repeat: no-repeat; background-size: 700px 700px; display: grid; grid-template-columns: repeat(5, 40px); } div.ship-power div { margin-top: -20px; margin-left: -15px; } div.ship-power input[type=radio] { height: 60px; width: 60px; margin-bottom: -8px; } div.speed, div.helm, div.guns, div.shields { position: relative; top: 131px; } div.speed { position: relative; left: 102px; } div.OOC { position: relative; top: 272px; left: 167px } div.helm { position: relative; left: 277px } div.guns { position: relative; left: 342px } div.shields { position: relative; left: 407px }

So, possibly a dumb question, but looking at the IRL game, that looks more like a game board. &nbsp;Does this need to be part of the character sheet, or can you create the layout on a page and provide a pog of some sort the players can move on the board as needed?

Finderski said: So, possibly a dumb question, but looking at the IRL game, that looks more like a game board. &nbsp;Does this need to be part of the character sheet, or can you create the layout on a page and provide a pog of some sort the players can move on the board as needed? well I'm installing it into the vehicle sheet as they have properties worth metioning including differeing values of this card incedentally I have gotten it to this but those boarders are anoying&nbsp; &nbsp;nevermind got it