Superposition de deux blocs consécutifs [résolu]

Bonjour,

Je cherche à partir du code HTML :

<h1><img src="..." alt="..." /></h1>
<h2>Chansons métissées</h2>

à obtenir la mise en page suivante :

http://img169.imageshack.us/img169/6636/superpositionlc8.gif

En bref, je voudrais que le bloc h2 (en bleu) se superpose au bloc h1 (en vert). Malgré les différents tutoriels lus, je n'ai pas trouvé de solution à mon problème.

Merci pour vos bons conseils.
Modifié par 84mickael (02 Sep 2006 - 19:11)

Salut.

En les imbiquant dans un div aux dimensions de l'image dans le h1, et en utilisant le positionnement absolu ça devrait être possible :

<div id="titre">
    <h1><img src="..." alt="..." /></h1>
    <h2>Chansons métissées</h2>
</div>

#titre {
position: relative;
height: ... px;
width: ... px;
}
#titre h2 {
position: absolute;
bottom: 0;
width: 100%;
}

Il sera peut-être nécesaire de positionner le h1 et de jouer sur les z-index

Bonjour 84mickael,

je vais être un peu hors sujet, mais pour pouvoir répondre le mieux possible à ta question j'ai besoin de t'en poser une :

Pourquoi une image en h1?

++
Aymeric

L'objectif était d'ajouter un sous-titre au logo du groupe. En adaptant légèrement la méthode de Sopo je suis arrivé au résultat suivant :

http://img502.imageshack.us/img502/6438/alstitreoc1.png

#divTitre
{
	position: relative;
	height: 123px;
}

h2
{
	position: absolute;
	bottom: .5em;
	left: 6%;
}

Merci beaucoup.
Modifié par 84mickael (02 Sep 2006 - 19:11)