Superposition d'images en Html

Version imprimable

16/12/2008, 17h48
blandinais

Superposition d'images en Html

Bonjour
dans une serie de page Html j'ai une image JPG que j'utilise comme fond d'écran
maintenant je désire superposer sur cette image de fond des petites images qui serviront de boutons de lancement.

je n'arrive pas à les superposer elle viennent toujours en dessous de l'image de fond

si il n'y a pas de solution je ferrai du map. mais ce sera moins pratique

merci pour vos suggestions
:roll:
16/12/2008, 17h57
Erwan31

Bonsoir,
pour cela tu dois doter tes images d'un display:block qui permet de
générer une boîte de block avec retour chariot avant et après l'élément
auquel ça s'applique.
16/12/2008, 19h51
blandinais

Merci pour la réponse mais ..... je ne vois pas comment mettre mes images dans les blocks pour quelles soient superposées et à un emplacement précis

merci tout de même
16/12/2008, 20h54
Hephaistos007

Peut-être que la propriété CSS z-index peut répondre à ton besoin.
16/12/2008, 22h20
RomainVALERI

Si tu as un lien à nous donner pour constater le problème, n'hésite pas ^^ (ou à la rigueur tu peux poster (un extrait de) ton code html ici (et la feuille CSS si tu en utilises une)
16/12/2008, 23h08
telliak

Citation:

Envoyé par blandinais

Bonjour
dans une serie de page Html j'ai une image JPG que j'utilise comme fond d'écran
maintenant je désire superposer sur cette image de fond des petites images qui serviront de boutons de lancement.

Bonsoir,
Cette image de fond, tu l'as définie dans une propriété background ou tu l'as mise telle quelle dans ta page ?
A+

Code:

1
2
3
4
5
6
<div style="background:url(ton_image_de_fond.jpg) no-repeat;">
<img src="image1.jpg" alt="image1" />
<img src="image2.jpg" alt="image2" />
<img src="image3.jpg" alt="image3" />
...
</div>

Bonjour,

Sans voir ce dont tu disposes et en reprenant ce qui t'a été proposé, on peut te suggérer de placer les petites images en absolute pour pouvoir les gérer précisément.
Dans cet exemple (temporaire), les images ont des dimensions différentes, alors leur gestion est un peu plus complexe que si elles avaient des dimensions identiques.
Tu peux peut-être t'en inspirer ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Proposition pour "Superposition d'images en HTML"</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
  <div id="conteneur">
    <ul id="menu_boutons_de_lancement">
      <li>
        <a href="#" id="bdl_1">
          <img src="erwan31.gif" alt="lien1" />
        </a>
      </li>
      <li>
        <a href="#" id="bdl_2">
          <img src="hephaistos007.gif" alt="lien2" />
        </a>
      </li>
      <li>
        <a href="#" id="bdl_3">
          <img src="romainvaleri.gif" alt="lien3" />
        </a>
      </li>
      <li>
        <a href="#" id="bdl_4">
          <img src="gihefbey.gif" alt="lien4" />
        </a>
      </li>
    </ul>
    <p>Ensuite, on place ce qu'on veut.</p>
  </div>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
    #menu_boutons_de_lancement {
      position: relative;  /* important */
      margin: 32px 0;
      padding: 0;
      height: 104px;  /* 100px + 2(2px) des border */
      background-color: #b0e0e6;
      }
    #menu_boutons_de_lancement li {
      list-style : none;
      }
    #menu_boutons_de_lancement li a {
      display : block;
      position : absolute;
      border : 2px dashed #db7093;  /* pas nécessaire */
      }
    #menu_boutons_de_lancement li a:hover {
      border : 2px solid #ffa500;  /* pas nécessaire */
      }
    #menu_boutons_de_lancement li a img {
      display : block;
      }
    #bdl_1 {
      left : 16px;
      width : 80px;
      height : 100px;
      }
    #bdl_2 {
      top : 12px;
      left : 116px;
      width : 100px;
      height : 77px;
      }
    #bdl_3 {
      left : 236px;
      width : 113px;
      height : 100px;
      }
    #bdl_4 {
      top : 17px;
      left : 369px;
      width : 100px;
      height : 66px;
      }