1486 sujets

Web Mobile et responsive web design

Garder position en responsive

Salut,
J'ai une petite question je suis en train de faire une page avec une map et plein de hotspots dessus. En bref, j'ai placé tous mes hotspot comme ça :

<div><button type="button" class="btn btn-lg btn-danger" data-toggle="popover9" title="9 - Titre" style="position: absolute;	top: 155px;	left: 1345px;"></button></div>

Sauf que se pose le problème du responsive, et c'est toute ma question: Est-ce qu'il est possible de les positionner pour qu'ils gardent leur place sur l'image en même temps que celle-ci change de taille ?
Merci !
parsimonhi a écrit :
Bonjour,

Oui, c'est possible.

Amicalement,


Alors déjà merci pour ta réponse aussi franche x)

Et sinon comment on fait ? Au delà de ce que j'ai fait moi qui je pense est assez bancal, j'ai essayé de changer les valeurs en % mais ça n'a rien donné de concluant et je pense pas que ce soit la bonne solution. Est-ce que c'est parce qu'il faut passer l'image en fond dans un conteneur qui reprend tous les hotspots ou quelque chose du genre ?
Modérateur
Bonjour,

Impossible de répondre à ta question avec aussi peu d'information.

Question 1 : ta map, c'est quoi ? une balise map, une image dans une balise img ? ou autre chose ?

Question 2 : je vois dans ton css un position: absolute. Quel est la balise qui les contient ? une balise map ? une div qui contient une balise img représentant ta map ?

Question 3 : tous ces éléments (la map, les hotspot, leur conteneur commun), c'est bricolé comment dans ton html ?

Question 4 : quel est le css que tu appliques à ces éléments actuellement ?

Amicalement,
Modifié par parsimonhi (31 Jan 2019 - 11:18)
Je te remercie pour ton aide et je ne vais surement pas cracher dessus mais tu aurais pu commencer par là, c'est vrai que je n'ai absolument pas pensé à tout partager étant donné que je savais pas ce qui était nécessaire...

Donc pour la map dont je parlais c'est un svg, désolé j'ai pas pensé aux confusions.

Et pour répondre à tes trois autres questions, je te mets une partie du body en html (je t'épargne la répétition des 9 boutons) :

<body>
		<main>
			<div id="img-back">
				<img src="../map.svg">
			</div>
			<div id="htspot">
				<div><button type="button" class="btn btn-lg btn-danger" data-toggle="popover1" title="TITRE" style="position: absolute;	top: 171px; left: 596px;"></button></div>
			</div>
			<div id="btn-retour">
				<a href="../index.html">retour</a>
			</div>
		</main>
		<script>
		$(function () {
			
			var dataIMG1 = "<img src=\"../img/monImage.jpg\"> <p></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>"
			$('[data-toggle="popover1"]').popover({
				html: true,
				content: function(){
				return (dataIMG1);
				}
			})
})
		</script>
	</body>


Alors oui j'ai tout bricolé dans le html parce que chaque position est différentes et le reste des propriétés qui concerne les hotspots qui sont dans le css c'est juste des trucs pour modifier le visuel des boutons, donc pas nécessaire dans ce cas ci.

Voilà, en espérant que ça suffise, merci ! Smiley smile
Modérateur
Bonjour,

Et dans le css, y a rien ? Pas le moindre position:relative ?

Amicalement,
Modifié par parsimonhi (31 Jan 2019 - 12:07)
Modérateur
Bonjour,

Dix mille manières de faire.

Déjà, tu encapsules les éléments <div id="img-back"> et <div id="htspot"> dans un conteneur commun, par exemple:

<div id="map">
  <div id="img-back">
    ...
  </div>
  <div id="htspot">
    ...
  </div>
</div>


Ensuite, tu mets dans le css un position:relative pour la div ayant map pour id.

Ensuite, tu mets dans le css ce qu'il faut pour que la div ayant map pour id ait la même taille que ton image svg en toute circonstance (je n'ai pas assez d'information pour savoir comment cette image change de taille si on réduit la largeur de la fenêtre).

Et à vue de nez, ça devrait fonctionner comme ça.

Note: les div autour des button me semble inutiles. Et même la <div id="htspot"> me semble inutile. Et même la <div id="img-back"> me semble inutile. Voire même toutes ces balises sont plus facteur de troubles qu'une aide ici. Smiley cligne

Amicalement,
Meilleure solution
Sujet clos
Aller à