Superposer images code HTML

**Shivas** · 27/01/2009, 13h16

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

**12monkeys** · 27/01/2009, 17h46

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

...)

**GihefBey** · 28/01/2009, 01h11

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 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
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.

-

**Shivas** · 30/01/2009, 13h24

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

**12monkeys** · 30/01/2009, 17h10

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 :

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

1
2
3
4
5
6
7
8
9
10
<style type="text/css" media="all">
<!--
@import url("/library/refonte2008/css/intern/intern.css");
@import url("/library/refonte2008/css/intern/main.css"); /* AS "/library/css/global.css" */
-->
</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...

Superposer images code HTML

CSS

Discussions similaires

Partager

Partager