J'essaie de placer des boutons radio sur une image à un emplacement exact. J'ai placé les deux dans une division mais je ne sais pas trop quoi faire ensuite. Voici où je veux que les boutons radio soient placés (cercles rouges):
Voici mon code pour l'instant:
<div class="general">
<img src="https://via.placeholder.com/300" class="center">
<form action="">
<input type="radio" name="answer 1" value="apple">
<input type="radio" name="answer 2" value="chicken">
<input type="radio" name="answer 3" value="carrot">
</form>
</div>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
body {
background-color: #979797
}
Merci d'avance!
4 Réponses :
Vous pouvez utiliser la solution suivante en utilisant flexbox:
<form action="">
<h2>Question 1:</h2>
<div class="question">
<img src="https://picsum.photos/300">
<div class="answers">
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="apple">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="chicken">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="carrot">
</label>
</div>
</div>
<h2>Question 2:</h2>
<div class="question">
<img src="https://picsum.photos/300">
<div class="answers">
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="apple">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="chicken">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="carrot">
</label>
</div>
</div>
</form>
body {
background:#979797;
}
.question {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
}
.answers {
display:flex;
flex-direction:column;
}
label.answer {
position:relative;
height:100px;
}
label.answer input[type="radio"] {
top:0;
left:0;
position:absolute;
}
Même si vous dites que vous les voulez sur votre image, sur l'image que vous avez partagée, les boutons radio semblent se trouver sur le côté droit de l'image. Je suis donc un peu confus sur ce que vous voulez réellement.
Mais j'ai fait un exemple simple ci-dessous. Vous pouvez les positionner comme vous le souhaitez ou commenter ci-dessous si vous souhaitez mon aide.
P.S. comme je l'ai dit dans mon commentaire: L'attribut bgcolor n'est pas pris en charge dans HTML5. Utilisez plutôt le CSS.
<div class="general">
<img src="http://via.placeholder.com/640x360" class="center">
<form action="">
<input type="radio" name="answer 1" value="apple">
<input type="radio" name="answer 2" value="chicken">
<input type="radio" name="answer 3" value="carrot">
</form>
</div>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
body {
background-color: #979797
}
form {
position:absolute;
right: 25%;
top: 50%;
transform:translateY(-50%) translateX(100%);
display: flex;
flex-direction: column;
}
.general {
position: relative;
}
Je mettrais les boutons radio dans un div chacun et ensuite donnerais à la div un arrière-plan. Comme ceci:
<html>
<head>
<style>
.general{}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.radio-size {
height: 100px;
width: 100px;
}
.bg-apple {
background-image:url('https://images.unsplash.com/photo-1513677785800-9df79ae4b10b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
.bg-chicken {
background-image:url('https://images.unsplash.com/photo-1426869981800-95ebf51ce900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
.bg-carrot {
background-image:url('https://images.unsplash.com/photo-1445282768818-728615cc910a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body bgcolor="#979797">
<div class="general">
<img src="https://images.unsplash.com/photo-1518796745738-41048802f99a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="center" style="width:20%;" >
<form action="" style="background-img:url("")">
<div class="radio-size bg-apple">
<input type="radio" name="answer 1" value="apple">
</div>
<div class="radio-size bg-chicken">
<input type="radio" name="answer 1" value="chicken"> <br>
</div>
<div class="radio-size bg-carrot">
<input type="radio" name="answer 1" value="carrot">
</div>
</form>
</div>
</body>
</html>
note: les boutons radio sont tous supposés avoir le même attribut de "nom", de sorte que vous ne pouvez en choisir qu'un seul. Si vous souhaitez pouvoir sélectionner plusieurs options, vous devez utiliser la case à cocher à la place.
Je pense que vous devriez essayer le type de code suivant pour la requête ci-dessus. J'ai changé votre structure HTML et j'ai complètement changé votre CSS actuel:
<div class="general">
<form action="">
<div class="img">
<img src="https://via.placeholder.com/150" class="center">
<div class="options" class="center">
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="apple">
</div>
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="chicken">
</div>
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="carrot">
</div>
</div>
</div>
</form>
</div>
.general{
width: fit-content;
}
.img{
display: flex;
align-items: end;
}
img{
border: 1px solid black;
}
body {
background-color: #979797
}
.options{
display: flex;
flex-direction: column;
}
.radio{
position: relative;
height: 50px;
}
input[type="radio"]{
position: absolute;
top: calc(50% - 4px);
right: 0;
margin: 0;
}
N'oubliez pas que si les questions n'ont qu'une seule réponse, le nom de la case d'option doit être le même et la valeur doit être différente. Sinon, tous les boutons radio seront sélectionnés simultanément et ne pourront pas être désélectionnés.
J'espère que ce code vous sera utile. Merci.
il n'y aura qu'une seule image ??
L'attribut bgcolor n'est pas pris en charge dans HTML5. Utilisez plutôt du CSS.Je ne comprends rien de l'image que vous avez fournie. Veuillez être plus précis sur la position des boutons radio. Je modifierai votre code en attendant