Sujet Précédent Sujet Suivant

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

Résolu/Fermé
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 - Modifié par pijaku le 7/11/2013 à 10:04
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 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
A voir également:

1 réponse

Réponse 1 / 1
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
7 nov. 2013 à 13:10
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

3
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 743
7 nov. 2013 à 13:15
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...
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
7 nov. 2013 à 14:03
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;
0
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 743
7 nov. 2013 à 14:12
Super!
Merci beaucoup.

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

A+
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
7 nov. 2013 à 16:14
pas de quoi @+
0

Discussions similaires

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

9 réponses
retrouver un texte caché dans une image jpg
iamborg8of9 -
Haldas -

13 réponses
Sur la plage...
kriiisss -
Utilisateur anonyme -

6 réponses