Superposition d'images en Html

**blandinais** · 16/12/2008, 17h48

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

**Erwan31** · 16/12/2008, 17h57

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.

**blandinais** · 16/12/2008, 19h51

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

**Hephaistos007** · 16/12/2008, 20h54

Peut-être que la propriété CSS z-index peut répondre à ton besoin.

**RomainVALERI** · 16/12/2008, 22h20

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)

**telliak** · 16/12/2008, 23h08

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+

**mdr_cedrick** · 17/12/2008, 10h06

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**GihefBey** · 22/12/2008, 15h53

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
      }

-

Superposition d'images en Html

HTML

Vue hybride

Discussions similaires

Partager

Partager