Superposer (??) 2 images en CSS dans des divs

parisienne17 · 21 Juin 2009

Bonjour,

j'essaie d'apprendre (par la force des choses) à modifier une feuille de style afin d'obtenir ce que je veux, à savoir afficher 2 images l'une par-dessus l'autre. La première est un bandeau uniforme, la 2ème une icône. Voici les div dans lesquels je peux intervenir:

(Fait partie d'une CSS nommée Structure.css)
-----------------------------------------------------
div.sub {
border-bottom:1px solid rgba(50, 50, 50, 0.35);
min-height:18px;
padding:1px 27px;
}

(Fait partie d'une CSS nommée Style.css)
------------------------------------------------
#Calendar .sub {
background-image:url(../images/content_body.png);
background-repeat:repeat-y;
}

Content_body est le bandeau de fond et j'ai besoin de mettre dans div.sub l'icône qui est un png d'une dizaine de pixels de côtés.
Petite précision, je suis archi nulle en css... Et pour être tout à fait précise, il s'agit de la modification de l'affichage d'informations sur le lockscreen de mon iphone gérés par un fichier html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="strings/en.js"></script>
<script type="text/javascript" src="config.js"></script>
<link rel="stylesheet" type="text/css" href="css/structure.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="background">
<div id="lockinfo"></div>
<div id="bottom"></div>
</div>
<script type="text/javascript" src="js/prototypes.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/plist.js"></script>
<script type="text/javascript" src="js/lockinfo.js"></script>
<script type="text/javascript" src="js/weather.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="debug.js"></script>
</body>
</html>

J'ai réussi à modifier tout ce que je voulais grâce à firebug,, sauf,, ces 2 images à superposer et là, je sèche.
Quelqu'un peut-il m'aider?

1dessin valant mieux que des mots, en image mon souci,, évidemment c'est un montage, sinon je ne serais pas ici...

Le bandeau en question est le(s) rectangles gris, l'icône, la petit horloge en noir et blanc (à côté du rectangle rouge)

j-mi · 21 Juin 2009

tu peu me montrer pendant donc ce que tu a et ce que tu veux apres
car je te comprends pas

parisienne17 · 22 Juin 2009

et bien c'est très simple,, dans l'image qui illustre ma question, le lockscreen de mon iphone, il y a des zones grises claires qui sont des images. Chaque bandeau, chaque zone grise, sert à afficher du contenu: météo, calendrier, appels en absence, sms et mails.
Sur ces zones claires, je veux pouvoir superposer une autre image, celle de la petite horloge que l'on voit juste à côté de l'encadré en rouge. Évidemment, sur l'image en question, il s'agit d'un montage graphique,, puisque je ne sais afficher 2 images l'une sur l'autre en css.
Je veux pouvoir mettre cette icône en regard de chaque contenu de chaque nouveau RV dans mon calendrier, ou dans le cas des SMS, ça sera une petite bulle. Un petit téléphone pour les appels et une petite arobase pour les mails.

Voilà, tu sais tout!