What is the best way to create responsive radio buttons on top of an image?

Question

What is the best way to create responsive radio buttons on top of an image?

I have a photograph of the beautiful Hawaiian islands, and I've positioned 8 radio buttons using absolute positioning. However, when I inspect the image with the radio buttons on Chrome, I notice that they are not responsive and do not stay in their correct spots on the image when viewed in full screen mode. Any suggestions on how to fix this?

CSS:

#radio1{
    position:absolute;
    top:58.9%;
    left:24.4%;
}

#radio2{
    position:absolute;
    top:57.5%;
    left:27.1%;
}

#radio3{
    position:absolute;
    top:63.2%;
    left:34.05%;
}

#radio4{
    position:absolute;
    top:66.8%;
    left:38%;
}

#radio5{
    position:absolute;
    top:68.9%;
    left:40.4%;
}

#radio6{
    position:absolute;
    top:69.7%;
    left:38.8%;
}

#radio7{
    position:absolute;
    top:73.1%;
    left:40.5%;
}

#radio8{
    position:absolute;
    top:78.8%;
    left:45.5%;
}

#third.form img{
    display:block;
    max-width: 100%;
    height: auto;

HTML:

<img src="map.png">
<label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
<label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
<label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
<label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
<label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
<label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
<label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
<label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>

html css forms radio-button responsive

Answer 1

Answer №1

The shifting of the dots occurs due to the fact that their left and top coordinates are calculated based on the overall container dimensions, rather than just the individual div they are contained in.

Answer 2

The shifting of the dots occurs due to the fact that their left and top coordinates are calculated based on the overall container dimensions, rather than just the individual div they are contained in.

Answer 3

Answer №2

When positioning radio buttons in relation to the body element, it is important to consider using absolute positioning. However, since image tags are inline and cannot contain HTML child elements, a workaround is to place the radio buttons within a parent div element. By adding a background image to this div element, you can achieve the desired layout where the radio buttons are positioned absolutely with respect to the parent container.

#container{
  position:relative;
  background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRiWmnVBwnR9ddbHOGmGaoA3gTrU5r3pslI-IybKWIJz4Amy6VA);
  background-size:cover;
  width:200px;
  height:200px;
}
#radio1{
position:absolute;
top:58.9%;
left:24.4%;
}

#radio2{
position:absolute;
top:57.5%;
left:27.1%;
}

#radio3{
 position:absolute;
top:63.2%;
left:34.05%;
}

#radio4{
position:absolute;
top:66.8%;
left:38%;
}

#radio5{
position:absolute;
top:68.9%;
left:40.4%;
}

#radio6{
position:absolute;
top:69.7%;
left:38.8%;
}

#radio7{
position:absolute;
top:73.1%;
left:40.5%;
}

#radio8{
position:absolute;
top:78.8%;
left:45.5%;
}

#third.form img{
display:block;
max-width: 100%;
height: auto;

<div id="container">
  <label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
  <label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
  <label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
  <label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
  <label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
  <label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
  <label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
  <label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
</div>

Answer 4

When positioning radio buttons in relation to the body element, it is important to consider using absolute positioning. However, since image tags are inline and cannot contain HTML child elements, a workaround is to place the radio buttons within a parent div element. By adding a background image to this div element, you can achieve the desired layout where the radio buttons are positioned absolutely with respect to the parent container.

#container{
  position:relative;
  background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRiWmnVBwnR9ddbHOGmGaoA3gTrU5r3pslI-IybKWIJz4Amy6VA);
  background-size:cover;
  width:200px;
  height:200px;
}
#radio1{
position:absolute;
top:58.9%;
left:24.4%;
}

#radio2{
position:absolute;
top:57.5%;
left:27.1%;
}

#radio3{
 position:absolute;
top:63.2%;
left:34.05%;
}

#radio4{
position:absolute;
top:66.8%;
left:38%;
}

#radio5{
position:absolute;
top:68.9%;
left:40.4%;
}

#radio6{
position:absolute;
top:69.7%;
left:38.8%;
}

#radio7{
position:absolute;
top:73.1%;
left:40.5%;
}

#radio8{
position:absolute;
top:78.8%;
left:45.5%;
}

#third.form img{
display:block;
max-width: 100%;
height: auto;

<div id="container">
  <label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
  <label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
  <label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
  <label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
  <label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
  <label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
  <label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
  <label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
</div>

Answer 5

Answer №3

To start, create a container to group the radio button elements and use an island image as the background.

Next, utilize media queries to adjust the image size for a responsive layout.

.container {
  position: relative;
  background-image: url(http://hawaiian-words.com/hw/wp-content/uploads/2014/09/hawaii-island-road-map.jpg);
  background-size: cover;
  width: 884px;
  height: 927px;
}

#radio1 {
  position: absolute;
  top: 58.9%;
  left: 24.4%;
}

#radio2 {
  position: absolute;
  top: 57.5%;
  left: 27.1%;
}

#radio3 {
  position: absolute;
  top: 63.2%;
  left: 34.05%;
}

#radio4 {
  position: absolute;
  top: 66.8%;
  left: 38%;
}

#radio5 {
  position: absolute;
  top: 68.9%;
  left: 40.4%;
}

#radio6 {
  position: absolute;
  top: 69.7%;
  left: 38.8%;
}

#radio7 {
  position: absolute;
  top: 73.1%;
  left: 40.5%;
}

#radio8 {
  position: absolute;
  top: 78.8%;
  left: 45.5%;
}

#third.form img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .container {
    width: 884px;
    height: 927px;
  }
}

@media (max-width: 768px) and (min-width: 480px) {
  .container {
    width: 663px;
    height: 695px;
  }
}
@media (max-width: 480px) {
  .container {
    width: 442px;
    height: 463px;
  }
}

<div class="container">
  <label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
  <label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
  <label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
  <label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
  <label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
  <label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
  <label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
  <label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
</div>

Answer 6

To start, create a container to group the radio button elements and use an island image as the background.

Next, utilize media queries to adjust the image size for a responsive layout.

.container {
  position: relative;
  background-image: url(http://hawaiian-words.com/hw/wp-content/uploads/2014/09/hawaii-island-road-map.jpg);
  background-size: cover;
  width: 884px;
  height: 927px;
}

#radio1 {
  position: absolute;
  top: 58.9%;
  left: 24.4%;
}

#radio2 {
  position: absolute;
  top: 57.5%;
  left: 27.1%;
}

#radio3 {
  position: absolute;
  top: 63.2%;
  left: 34.05%;
}

#radio4 {
  position: absolute;
  top: 66.8%;
  left: 38%;
}

#radio5 {
  position: absolute;
  top: 68.9%;
  left: 40.4%;
}

#radio6 {
  position: absolute;
  top: 69.7%;
  left: 38.8%;
}

#radio7 {
  position: absolute;
  top: 73.1%;
  left: 40.5%;
}

#radio8 {
  position: absolute;
  top: 78.8%;
  left: 45.5%;
}

#third.form img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .container {
    width: 884px;
    height: 927px;
  }
}

@media (max-width: 768px) and (min-width: 480px) {
  .container {
    width: 663px;
    height: 695px;
  }
}
@media (max-width: 480px) {
  .container {
    width: 442px;
    height: 463px;
  }
}

<div class="container">
  <label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
  <label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
  <label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
  <label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
  <label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
  <label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
  <label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
  <label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
</div>

What is the best way to create responsive radio buttons on top of an image?

Answer №1

Answer №2

Answer №3

Similar questions

Issue caused by overflowing content and resizing the display

Tips for eliminating extra blank space under the footer on an HTML website

Anchor tag in AngularJS not responding to ng-disabled directive

Tips for utilizing divs and spans in HTML5

Automated form with built-in calculations

Designing templates for websites and applications using node.js

Show a popover within a parent div that has limited visible space due to its hidden overflow

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular

Is it advisable to utilize both bootstrap.css and normalize.css simultaneously?

When trying to insert glyphicons into a textarea, the result is displaying the actual text instead

What size should I use for creating a responsive website?

Stylish curved bottom border

What is the best way to ensure an image fills the entire space within a Bootstrap modal container?

Displaying content in Bootstrap 5 modal with jQuery may cause a delay in the appearance of a centered spinner before the content loads

Stop Ag grid from automatically extending to the entire width of the screen

Having RoundRect take the top left position of its rectangle container rather than its immediate parent (td)

Generate an HTML webpage with dynamic content using MySQL

Issue with displaying Django messages on the contact form template

I found myself continuously revolving four images along a circular border, each time revealing the corresponding content. However, I only required the content from one of the images at a time

Conceal specific pages within the DataTable without deleting them