Seeking guidance on how to tackle a task involving formatting an HTML page. Imagine having an image in the shape of a circle and needing to position 7 radio buttons around it. While it may be achievable using a dev object, this method appears overly complex. Are there any alternative approaches for placing radio buttons around a circle?
Grateful for any assistance provided.
<!DOCTYPE html>
<html>
<head>
<style class="cp-pen-styles">
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative;
background-color: #ddd;
overflow: hidden;
}
.main,
.container {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 120px;
height: 120px;
border-radius: 50%;
}
.main {
background-color: #B81365;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
cursor: pointer;
z-index: 60;
}
.main .title {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
font-size: 3em;
line-height: 80px;
text-align: center;
color: #fafafa;
}
.container {
z-index: 15;
}
.plate {
margin: auto;
position: absolute;
top: -10%;
right: -20%;
bottom: 15%;
left: -25%;
width: 17px;
height: 17px;
text-align: center;
}
.main + .container .plate:nth-of-type(1) {
top: -200%;
}
.container .plate:nth-of-type(2) {
top: -150%;
right: -130%;
}
.container .plate:nth-of-type(3) {
right: -175%;
}
.container .plate:nth-of-type(4) {
right: -120%;
bottom: -140%;
}
.container .plate:nth-of-type(5) {
bottom: -195%;
}
.container .plate:nth-of-type(6) {
bottom: -145%;
left: -160%;
}
.container .plate:nth-of-type(7) {
left: -205%;
}
.container .plate:nth-of-type(8) {
top: -135%;
left: -170%;
}
</style></head><body>
<center>
Credits to:<a href="http://codepen.io/Oka/pen/BNjwNz">Colin Hall-Coates codepen</a>
</center>
<label class='main' for='check'>
<div class='title'>
<i class='fa fa-bars'></i>
</div>
</label>
<div class='container'>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
</div>
</body></html>
Can you help me figure out how to align this sidebar properly? I tried using the d-flex property but it doesn't seem to be working for me. The sidebar should be on the left side and the two containers should be centered. For a clearer explanation, pl ...
Check out my Code: <template v-for="day in getMonthLength()" > <td :id='notempty' v-for="dataa in data" v-if="dataa.employee_id === employee.id"> <input type="numb ...
When trying to match input fields by name, I encountered a challenge. The names consist of a base name plus square brackets, which the PHP interpreter converts into arrays. According to the jQuery API, the suggested selector is as follows: ":input[name^=f ...
{ "data": [{ "data": [{ "Part": "1.75 L ICON (Glass)", "ProductionCounts": 1012620 }, { "Part": "1.75 L Marg Mix (PET)", "ProductionCounts": 1003278 }, { "Part": "1.75 L Authentics (PET)", "ProductionCounts ...
I have successfully added the ngAnimate dependency to my AngularJS project: var app=angular.module('testApp',['ngRoute', 'ngAnimate']); I have also included the animation classes in my animation.css file: .slide-animation.n ...
Hello, I am currently working on developing an HTML quiz game using canvas. However, as a beginner in this field, I have struggled to find relevant documentation specifically for this project. Overview of the Game The game consists of 5 scenes, each repr ...
I realize that the question I am about to ask may go against some basic principles of using React... however, with this example, I hope someone can assist me in finding a solution to the problem I am currently facing. While this code snippet is not from m ...
Hello there! I'm having some trouble placing my code breakpoints, resulting in an error in the output. Can you help me? import { makeStyles } from "@material-ui/styles"; const useStyle = makeStyles((theme)=>({ LogoLg:{ display:&ap ...
Sorting options by price is my goal, but despite trying various codes, I have not been successful! This is the original structure: <select id="product-list"> <option>product 1- [2$]</option> <option>product 2- [4$]< ...
Consider the following code snippet: $scope.letters = ['A', 'B', 'C', 'D']; $scope.numbers = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]]; $scope.selectedLetter = 0; There are two select tags in t ...
Utilizing Node Serialport, I've implemented an event listener to check the data streaming through the connection for correct units. If the units don't match what the user has set, I utilize the .pause() method to pause the stream and inform the u ...
I have implemented the filter below (which I found on StackOverflow) that works perfectly fine on one page. However, when using the same object, it throws an error as shown below: app.filter('dateFormat', function dateFormat($filter){ return f ...
There is a button that, when clicked, triggers a pop up dialog box with the code below: <div class="button-wrap"><button data-dialog="somedialog" class="trigger">Open Dialog</button></div> The script responsible for activating the ...
As I work on a hybrid app with its own local HTML and JS files, there are times when I need to load additional small executable JS scripts and CSS from the server. Currently, I achieve this by using $.getScript, which has been working well. In order to ma ...
On my aspx page, there is a feature that allows users to edit data in a database record. Once the changes are saved, the user is redirected back to the same page. What I am trying to achieve is a popup message saying "Record saved." along with an "OK" butt ...
Currently, I am utilizing a JavaScript code to add annotations to a PDF document within the browser. Once I have completed adding annotations, I save the modified document on my device and then proceed to upload it using another form. However, my goal is ...
This question is directly related to a previous inquiry posted on Stack Overflow regarding preventing the click event from triggering on an AJAX-generated input element. You can find the original question here. After solving that issue by adding the condi ...
Error 404 when Sending Data from Axios POST Request to Express Server Hey there! I'm currently working on setting up a user authentication server for a project, but I've hit a roadblock while attempting to send a POST request to my Node.js Expre ...
Looking for a javascript regex that allows alphanumeric and special characters exclusively. The following regex was attempted but did not work: /^(?!.*(<|>)).*[a-zA-Z0-9 \\\\@!#$%^&*()_+-={}:;'\",.?|\[\&bs ...
Recently, I started learning asp.net and I am facing an issue with changing the value of my boolean variable when I click a button. Below is my code: Partial Class Title Dim checker As Boolean Protected Sub Enterbutton1(ByVal sender As Object, ByVal e ...