Superposer images code HTML

Version imprimable

27/01/2009, 13h16
Shivas

Superposer images code HTML

Bonjour,

J'ai deux images que je souhaiterais assemble sur ma page html. Je m'explique j'ai une image classique et l'autre représente un trombone que je veux superpose a la première pour faire l'effet d'un post-it mais je ne sais pas comment faire. Je voudrais faire comme ce site http://www.cuisineaz.com/Categories/
Quand je regarde dans le code source il font appel a des classes donc je ne sais pas de quelle manière il procédé. Quelqu'un aurait-il une idée ? Merci
27/01/2009, 17h46
12monkeys

Bonsoir

Je ne pense pas que ce soit possible en html pur. Il te faut pour ça utiliser du css, en passant par exemple par un positionnement relatif ou absolu pour déplacer la trombone, et utiliser les z-index pour faire afficher l'image au dessus...

Tu peut aussi aller voir le code source comme tu l'indique, cela ne se limite pas à la source html, tu peut aussi aller regarder les fichiers css... (j'y ai fait un petit tour, mais y a trop :aie: ...)

Bonjour,

En effet par CSS avec positionnements.
C'est comme ça qu'ils font.

Un bloc en absolute pour le trombonne (en arrière-plan).
Un bloc pour l'ombre (en arrière-plan) avec une <img /> dedans.

Ce qui pourrait s'adapter comme ça (lien valide quelques jours) :

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
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #cd853f;
      color : #344979;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      padding : 5em;
      width: 76%;
      text-align: left;
      border : 1px solid #fff;
      background-color: #ffd;
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      }
 
  .trombonne {
    position:absolute;
/*    left:50%;*/
    width:38px;
    height:51px;
    background:transparent url(http://www.cuisineaz.com/library/img/intern/recette/trombonne.png) no-repeat 0 0;
  margin-top : -16px;
  margin-left:150px;
/*    visibility:hidden*/
    }
  .visu-recette {
    width:170px;  /* 174 - (4) */
    height:148px;
    padding:0 4px 0 0;
    background:transparent url(http://www.cuisineaz.com/library/img/intern/recette/ombre_visu_menu_recette2.gif) no-repeat 0 0;
    text-align:right;
    }
    </style>
</head>
<body>
  <div id="conteneur">
  <div class="trombonne"></div>
  <div class="visu-recette">
    <img src="http://www.cuisineaz.com/library/img/intern/recette/v4.jpg" alt="Entrees" />
  </div>
  <p>Exemple adapté de <a href="http://www.cuisineaz.com">cuisineaz.com</a>.</p>
  </div>
</body>
</html>

Personnellement, je n'aurais pas fait exactement comme ça.
J'aurais plutôt mis le bloc du trombonne dans celui de l'ombre avec ce dernier en relative.
Moins aléatoire.

-

30/01/2009, 13h24
Shivas

Merci pour l'aide juste une petite question comment tu fais pour avoir le code css du site web

Citation:

Envoyé par Shivas

Merci pour l'aide juste une petite question comment tu fais pour avoir le code css du site web

Tu affiches la page web avec un navigateur, tu fais un clic droit et tu choisis "Code source de la page" (Firefox) ou "Afficher la source" (internet explorer).

Et tu regarde dans l'en tête le lien vers le css :
Code:

1 2 3 4 5 6 7 8 9 10 <style type="text/css" media="all">  </style> <link media="all" href="/library/css/menu_recette2.css" type="text/css" rel="stylesheet" /> <link href="/library/css/user_subscription.css" rel="stylesheet" media="all" type="text/css" />
Pour afficher le css tu tapes juste l'adresse dans ta barre d'adresse du navigateur...