Comment rendre plusieurs boutons radio sur une image réactive?

J'ai une photo d'îles hawaïennes et j'ai placé 8 boutons radio avec une position absolue. Mais quand j'utilise l'inspecteur Chrome pour voir si l'image avec les boutons radio sont réactifs, je vois qu'ils ne le sont pas et les boutons ne restent pas sur place sur l'image qui était en plein écran. Aucune suggestion?Comment rendre plusieurs boutons radio sur une image réactive?

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>

Source

2017-03-29 sotos bic

pourrait vous fournir votre code html ainsi? – lhavCoder

vous voilà. J'ai ajouté la partie avec les boutons radio –

est la largeur de l'image et la hauteur fixée? – repzero

Bon alors la la position des points changements, car les positions gauche et haut sont par rapport à l'ensemble du récipient et non la div contenant elle-même.

Source

2017-03-29 01:54:03 lhavCoder

Je comprends votre commentaire, mais je ne sais pas comment le faire. Devrais-je utiliser margin-left et margin-top au lieu de top et left ou est-ce la même chose? –

Je ne pense pas que margin-left ou margin-right produiraient des résultats différents. J'ai une solution. vous pouvez définir dynamiquement les positions gauche/haut en utilisant javascript lorsque la fenêtre est redimensionnée. J'essaie de savoir si cela peut être fait par css seul. – lhavCoder

L'exercice entier est pour mon université et nous avons une restriction dans celui-ci pour utiliser seulement CSS et html donc je suppose que cela peut être fait mais je ne sais pas comment ... –

À partir de l'extrait, vous positionnez les boutons radio de manière absolue sur l'élément de corps. Etant donné que la balise d'image est en ligne et ne peut pas contenir d'éléments enfants html, placez simplement les boutons radio dans un div (parent) et ajoutez une image d'arrière-plan à votre div. Ensuite, vous remarquerez que le bouton radio sont positionnés absolue au parent (div conteneur)

#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>

Source

2017-03-29 02:00:06 repzero

cela a fonctionné parfaitement merci –

hésitez pas à accepter solution si cela fonctionne pour vous – repzero

D'abord, vous devez utiliser un récipient pour envelopper les enfants bouton radio, et vous pouvez régler la image de l'île en arrière-plan. Ensuite, utilisez les requêtes média pour définir la taille de l'image pour obtenir un design réactif.

.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>

Source

2017-03-29 02:15:31 pblyt

J'ai utilisé le code par @repzero qui est similaire au vôtre. Merci bien que ce fut le truc (faire un nouveau parent div avec une image de fond) –

Comment rendre plusieurs boutons radio sur une image réactive?

Répondre

Questions connexes