Div dans une image, position relative.....

Résolu

pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention - 7 nov. 2013 à 16:14

Bonjour,

J'ai un peu de mal avec le positionnement des blocs.
J'ai lu quelques tutoriels, mais rien ne se passe jamais réellement comme je le souhaiterais.

J'ai une image dans laquelle je veux positionner des div afin de me faire des liens cliquables qui réagissent au survol de la souris. Comme ça, je me passe de Javascript et n'ai que du Html/Css.
Je choisit donc une image de 1200x800px et positionne (sous Gimp) des calques afin d'avoir les coordonnées de mes div.
Les coordonnées sous Gimp sont les suivantes :
A : Left 105, Top 326, Width 125, Height 174
B : Left 237, Top 312, Width 145, Height 192
C : Left 390, Top 226, Width 130, Height 167
D : Left 558, Top 244, Width 124, Height 176
Etc Etc jusqu'à mon bloc G.

Je créé ma page html avec ce code :

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <link rel="stylesheet" href="style.css" />
    </head>
    <body>
      <div id="bloc_page">
        <div id="A">
          <a href="#"></a>
        </div>
        <div id="B">
          <a href="#"></a>
        </div>
        <div id="C">
          <a href="#"></a>
        </div>  
        <div id="D">
          <a href="#"></a>
        </div> 
      </div>
    </body>
  </html>

Puis une feuille de style css avec ce code :

#bloc_page {
  display: block; 
  background-image: url(Images/MonImageDeFond.png); 
  margin: 0 auto; 
  height: 800px; 
  width: 1200px;
}
#A { 
  background-color: #000; 
  position: relative; 
  top: 326px; 
  left: 105px; 
  Width: 125px; 
  height: 174px;
}
#B { 
  background-color: #AAA; 
  position: relative; 
  top: 312px; 
  left: 237px; 
  Width: 145px; 
  height: 192px;
}
#C { 
  background-color: #BBB; 
  position: relative; 
  top: 226px; 
  left: 390px; 
  Width: 130px; 
  height: 167px;
}
#D {
  background-color: #CCC; 
  position: relative; 
  top: 244px; 
  left: 558px; 
  Width: 124px; 
  height: 176px;
}

Et là, ô désespoir, je me retrouve avec mes div placées n'importe comment, les unes en dessous des autres.
Pour pallier ce problème, j'ai modifié les valeurs de top de mes div, à tâtons, pour obtenir ceci :

#bloc_page {
  display: block; 
  background-image: url(Images/MonImageDeFond.png); 
  margin: 0 auto; 
  height: 800px; 
  width: 1200px;
}
#A { 
  background-color: #000; 
  position: relative; 
  top: 326px; 
  left: 105px; 
  Width: 125px; 
  height: 174px;
}
#B { 
  background-color: #AAA; 
  position: relative; 
  top: 132px; 
  left: 237px; 
  Width: 145px; 
  height: 192px;
}
#C { 
  background-color: #BBB; 
  position: relative; 
  top: -130px; 
  left: 390px; 
  Width: 130px; 
  height: 167px;
}
#D {
  background-color: #CCC; 
  position: relative; 
  top: -300px; 
  left: 558px; 
  Width: 124px; 
  height: 176px;
}

Ma question, après ce long chapitre, est la suivante :
Comment calculer de manière exacte (et pas en tâtonnant) mes valeurs de top pour chaque Div?

Ou alors est ce que je me suis planté quelque part dans mon positionnement ? (soit dans le html, soit dans mes position: relative;)...

Ps : voici une image peut être plus explicite, de ce que je souhaite obtenir...

Cordialement,
Franck

Afficher la suite

A voir également:

Div dans une image, position relative.....
Position dans google - Guide
Légender une image - Guide
Image iso - Guide
Suivi position google - Guide
Acronis true image - Télécharger - Sauvegarde

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Bonjour

je te conseille de mettre tes div en position absolute avec les valeurs que tu a mises au début

sinon une autre solution avec une image cliquable c'est un area shape avec la balise <map>
https://cyberzoide.developpez.com/html/map.php3

pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention 2 761

Bonjour,

Merci à toi pour la réponse.

En position : absolute, les div vont se positionner par rapport au navigateur, pas par rapport à mon image... Ça risque de faire des décalages selon les utilisateurs du site. Non?

Les Area Shape j'y ai pensé. J'ai essayé, mais ils n'ont pas énormément de propriété... Je ne peux donc pas changer le background de l'Area Shape au survol de la souris... Sans utiliser de javascript.
Or ici le but est le suivant :
1- j'ai une grande image de fond,
2- dans cette image de fond je rends certaines zones cliquables,
3- au survol de ces zones par la souris, le Background de ces zones change (et seulement la zone survolée)
4- En cliquant on suit le lien...
Les 1, 2 et 4 sont la définition des area shape, mais il me manque le point 3...

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Non un absolute enfant va se positionner par rapport au div parent
donc si des div sont dans un autre div il se postionneront par rapport au parent
attention le parent doit être en position relative et les enfants en position absolute
donc #bloc_page tu mets position:relative; et les autres position:absolute;

pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention 2 761

Super!
Merci beaucoup.

En plus, ça supprime l'overflow inutile... Rien à dire.

A+

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

pas de quoi @+

Discussions similaires

PIX

Dechiffrer une image caché

Trouvez une valeur relative dans un tableau

quel est la différence absolu et relative

Retrouver l'image originale après avoir fait des modifications ?

Votre réponse

Discussions similaires