Tips for positioning buttons in a circular arrangement around an image

Question

Tips for positioning buttons in a circular arrangement around an image

I am having trouble creating a responsive menu around a circular image. When the screen resolution changes, the buttons do not stay aligned next to the circle picture and their position shifts. How can I ensure that these image buttons stay aligned with the circle image and do not scatter across the screen? Thank you!

<div id="container">  
<div id="button1"><a href=""><img src="http://menu.bridge-network.ro/images/button1.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button1b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button1.png'" /></a></div>
<div id="button2"><a href=""><img src="http://menu.bridge-network.ro/images/button2.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button2b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button2.png'" /></a></div>   
<div id="button3"><a href=""><img src="http://menu.bridge-network.ro/images/button3.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button3b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button3.png'" /></a></div>
<div id="circle"><img src="http://menu.bridge-network.ro/images/circle.png"></div>
<div id="button4"><a href=""><img src="http://menu.bridge-network.ro/images/button4.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button4b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button4.png'" /></a></div>
<div id="button5"><a href=""><img src="http://menu.bridge-network.ro/images/button5.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button5b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button5.png'" /></a></div>

CSS:

body {
    background-color: black;
}
#container{
  clear: both;
  padding-top: 20px;
  text-align:center;
  position: relative;
  text-align:center;
}
#circle {
position:relative;
width:600px;
margin:auto;
z-index:1;
}
#button1 {
position:relative;
margin:auto;
z-index:2;
}
#button2 {
position:relative;
z-index:3;
float: left;
top:120px;
left:420px;
}
#button3 {
position:relative;
z-index:4;
float: right;
top:120px;
right:420px;
}
#button4 {
position:relative;
z-index:5;
float: left;
left:520px;
bottom:40px;
}
#button5 {
position:relative;
z-index:6;
float: right;
right:520px;
bottom:40px;
}

http://jsfiddle.net/dqba73u8/4/

jquery html css

Answer 1

Answer №1

Recently, I came across something similar to this! Utilizing media queries can also be effective, but personally, I find adjusting percentages dynamically to be a simpler solution!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>

<style>
    body {
        background-color: black;
    }
    #container{
        padding-top: 20px;
        text-align:center;
        position: relative;
        top:50px;
    }
    #circle {
        max-width:600px;
        margin:0 auto;
        width:90%;
        position:relative;
        display: block;
        text-align: center;
    }
    #your_center {
        width:50%;
        max-width:400px;
        margin:0 auto;
        text-align: center;
        position: relative;
    }
    #your_left_top, #your_left_bottom, #your_right_top, #your_right_bottom {
        max-width:200px;
        text-align: center;
        width:60%;
        position: absolute;
    }
    #your_left_top  {
        right:98%;
        bottom:55%;
    }

    #your_left_bottom  {
        right:75%;
        bottom:0;
    }
    #your_right_top  {
        left:96%;
        bottom:55%;
    }

    #your_right_bottom  {
        left:74%;
        bottom:0;
    }

    #button1 {
        max-width:200px;
        text-align: center;
        width:50%;
        position: relative;
        left:25%;
        top:-17%;
    }

     #button2, #button3, #button4, #button5, #button6, #button7 {
        max-width:200px;
        width:100%;
    }
    #circle img, #button1 img,#button2 img, #button3 img, #button4 img, #button5 img, #button6 img {
        position: relative;
        width:100%;
    }


</style>
<body>
    <div id="container" class="cf">

        <div id="your_center">
            <div id="your_left_top">
                <div id="button2"><a href=""><img src="http://menu.bridge-network.ro/images/button2.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button2b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button2.png'" /></a></div>
            </div>
            <div id="your_left_bottom">
            <div id="button4"><a href=""><img src="http://menu.bridge-network.ro/images/button4.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button4b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button4.png'" /></a></div>
            </div>
                <div id="button1"><a href=""><img src="http://menu.bridge-network.ro/images/button1.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button1b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button1.png'" /></a></div>
            <div id="circle"><img src="http://menu.bridge-network.ro/images/circle.png" /></div>
            <div id="your_right_top">
                <div id="button3"><a href=""><img src="http://menu.bridge-network.ro/images/button3.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button3b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button3.png'" /></a></div>
            </div>
            <div id="your_right_bottom">
                <div id="button5"><a href=""><img src="http://menu.bridge-network.ro/images/button5.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button5b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button5.png'" /></a></div>
            </div>
        </div>
    </div>
   </body>
</html>

Answer 2

Recently, I came across something similar to this! Utilizing media queries can also be effective, but personally, I find adjusting percentages dynamically to be a simpler solution!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>

<style>
    body {
        background-color: black;
    }
    #container{
        padding-top: 20px;
        text-align:center;
        position: relative;
        top:50px;
    }
    #circle {
        max-width:600px;
        margin:0 auto;
        width:90%;
        position:relative;
        display: block;
        text-align: center;
    }
    #your_center {
        width:50%;
        max-width:400px;
        margin:0 auto;
        text-align: center;
        position: relative;
    }
    #your_left_top, #your_left_bottom, #your_right_top, #your_right_bottom {
        max-width:200px;
        text-align: center;
        width:60%;
        position: absolute;
    }
    #your_left_top  {
        right:98%;
        bottom:55%;
    }

    #your_left_bottom  {
        right:75%;
        bottom:0;
    }
    #your_right_top  {
        left:96%;
        bottom:55%;
    }

    #your_right_bottom  {
        left:74%;
        bottom:0;
    }

    #button1 {
        max-width:200px;
        text-align: center;
        width:50%;
        position: relative;
        left:25%;
        top:-17%;
    }

     #button2, #button3, #button4, #button5, #button6, #button7 {
        max-width:200px;
        width:100%;
    }
    #circle img, #button1 img,#button2 img, #button3 img, #button4 img, #button5 img, #button6 img {
        position: relative;
        width:100%;
    }


</style>
<body>
    <div id="container" class="cf">

        <div id="your_center">
            <div id="your_left_top">
                <div id="button2"><a href=""><img src="http://menu.bridge-network.ro/images/button2.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button2b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button2.png'" /></a></div>
            </div>
            <div id="your_left_bottom">
            <div id="button4"><a href=""><img src="http://menu.bridge-network.ro/images/button4.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button4b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button4.png'" /></a></div>
            </div>
                <div id="button1"><a href=""><img src="http://menu.bridge-network.ro/images/button1.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button1b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button1.png'" /></a></div>
            <div id="circle"><img src="http://menu.bridge-network.ro/images/circle.png" /></div>
            <div id="your_right_top">
                <div id="button3"><a href=""><img src="http://menu.bridge-network.ro/images/button3.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button3b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button3.png'" /></a></div>
            </div>
            <div id="your_right_bottom">
                <div id="button5"><a href=""><img src="http://menu.bridge-network.ro/images/button5.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button5b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button5.png'" /></a></div>
            </div>
        </div>
    </div>
   </body>
</html>

Answer 3

Answer №2

Start implementing media queries from the following breakpoints:

@media only screen and (max-width: 1600px) {
  #button2{
    left: 24%;
  }
  #button3{
    right: 24%;
  }
  #button4{
    left: 29%;
  }
  #button5{
    right: 29%;
  }
}
@media only screen and (max-width: 1500px) {
  #button2{
    left: 21%;
  }
  #button3{
    right: 21%;
  }
  #button4{
    left: 28%;
  }
  #button5{
    right: 28%;
  }
}
@media only screen and (max-width: 1500px) {...}
@media only screen and (max-width: 1400px) {...}
@media only screen and (max-width: 1300px) {...}
@media only screen and (max-width: 1200px) {...}

For an example, check out this jsfiddle demo.

Answer 4

Start implementing media queries from the following breakpoints:

@media only screen and (max-width: 1600px) {
  #button2{
    left: 24%;
  }
  #button3{
    right: 24%;
  }
  #button4{
    left: 29%;
  }
  #button5{
    right: 29%;
  }
}
@media only screen and (max-width: 1500px) {
  #button2{
    left: 21%;
  }
  #button3{
    right: 21%;
  }
  #button4{
    left: 28%;
  }
  #button5{
    right: 28%;
  }
}
@media only screen and (max-width: 1500px) {...}
@media only screen and (max-width: 1400px) {...}
@media only screen and (max-width: 1300px) {...}
@media only screen and (max-width: 1200px) {...}

For an example, check out this jsfiddle demo.

Tips for positioning buttons in a circular arrangement around an image

Answer №1

Answer №2

Similar questions

Dynamic VueJS HTML element selection depending on a condition

Arranging Bootstrap grid elements side by side

Is it considered a bad practice to use the record ID on a <tr> element for an editable row within a table?

What could be causing the CSS height percentage to malfunction?

refreshing the page following retrieval of data through ajax

Contrast the text within two div elements using jQuery and modify the color of any identical words

Automated video and image gallery - with a twist!

Clicking on the Submit button of the post form simply refreshes the page

Angular JS: Changing Byte Array into an HTML File

Activate the mouseenter event as soon as an animated element makes contact with the cursor

Display/conceal within a jQuery fixed navigation bar (center-aligned)

Positioning the footer to sit at the bottom of my webpage, leaving a pleasing margin at the top

"Exploring the magic of product galleries: A behind-the-scenes look at how websites create images

What is the best way to hide the jQuery modal I created?

What is the method in jQuery to add a left alignment style to every element on the page?

Using AngularJS to handle error validation for dropdowns and select elements that will redirect using the ng

Creating a visual feast: A guide to crafting a stunning image gallery

The functionality of jQuery date picker and time picker is compromised when the fields are generated dynamically

The HTML output is essential for creating the content of a Bootstrap carousel

What is the best way to set the text color of cell data in a mat-table to white for the entire row when the row is selected as