Positionner des icons dans un background

Bonjour,

Je suis face à un problème d’organisation de mon code HTML et CSS, je ne sais pas trop comment le « structurer « mais surtout quelle technique employer pour y arriver.



Explications:
Le fond (la carte) est une image. Tous les icônes sont des images. Au passage de la souris sur un icon son rectangle devient violet.


Dans la pratique...
Si je place la carte de fond en position « absolute » et les icons en position: relative, les positions ne seront plus les bonnes lors du redimensionnement du navigateur. Je pense que ce n’est pas une bonne idée. Mais à part cette technique, je ne vois pas vraiment comment placer mes éléments pour qu’ils puissent garder la bonne position.

A savoir aussi que les rectangles seront seront créés en CSS. Je pensais le faire en utilisant :after {…}, ce qui me semble assez facile du coup.

De votre côté, qu'en pensez-vous ? Quelle méthode utiliseriez vous ?

Merci beaucoup.
Modifié par lorraineS (10 Apr 2017 - 21:15)

Bonjour.

Pour moi, l'image de la carte en width : 100% si elle est sur toute la largeur de l'écran... en position : relative pour servir de référence aux icônes.
Edit : j'ai dit une bêtise : 'position : relative' est pour le parent de l'image du plan et les images des icônes...

Et les icônes en position : absolute avec des coordonnées en pourcentages pour s'adapter à un redimensionnement... et avec transform : translate(-50%, -50%) pour que le positionnement se fasse sur le centre de l'icône et non sur le bord 'gauche - haut'.

Pour l'histoire des rectangles, je ne comprends pas trop : '::before' est bien si il n'y a pas de contenu spécifique dedans mais là, le nom change à chaque fois.


Modifié par Zelena (12 Apr 2017 - 08:48)

Le coup du transform: translate est intéressant, je vais voir ça. Merci

Concernant les rectangles ce n'est pas un problème car je vais de toute manière devoir créer une classe par icon pour les coordonnées. Donc écrire du texte dans un :before { content: "mon texte" } ne pose pas vraiment de problème (en théorie).
Modifié par lorraineS (11 Apr 2017 - 12:01)