Positionner une image sur la couleur de fond d'une balise DT

Bonjour,
Voilà je souhaite créer un petit résumé pour des thèmes particuliers.
J'ai décidé de prendre une liste de définition.
Par exemple j'aurais ceci

<dl class="budget">
                    <dt class="budget_courant"><span>Compte courant</span></dt>
                    <dd class="a_consommer">Budget à consommer : <strong>1500 &euro;</strong></dd>
                    <dd class="initial">Budget initial : 12 000 &euro;</dd>
                    <dd class="detail_conso">Détail des consommations :
                        <ul>
                            <li>électricité : 800 &euro;</li>
                            <li>Internet : 30 000 &euro;</li>
                        </ul>
                    </dd>
                </dl>

Pour l'instant j'obtiens ceci :

Mais mon but était de faire cela :


Ma CSS actuelle :

.budget{
                border: 1px solid #000;
                background-color: #ddd;
                width: 18em;
                text-align: left;
                padding: 0 0 10px 0;
                float: left;
                margin: 0 0 1em 1em;
            }

            .budget dt{
                height:50px;
            }

            .budget dt span{
                display:block;
                font-weight: bold;
                background-color: #006AB3;
                text-align:right;
                color: #ffffff;
                padding: 5px 10px;
                margin-bottom: 10px;
                margin-top:10px;
            }

            .budget dd{
                margin: 0;
                padding: 0 10px 5px 10px;
                font-size: 85%;
            }

            .budget_courant{
                background:#ddd url(images/courant.gif) no-repeat top left;
            }

            .budget_epargne{
                background:#ddd url(images/epargne.gif) no-repeat top left;
            }            

Donc mon problème :
Je n'arrive pas à faire passer mon image par dessus ma couleur d'arrière-plan, même en essayant d'utiliser un span
Et ensuite, je ne vois pas du tout comment la centrer par rapport à mon bloc...

Voilà, si quelqu'un pouvait m'indiquer une petite explication ou quelle(s) propriété(s) je devrais utiliser... parce que là je vois pas vraiment...
(Et l'image au cas où :
)
Modifié par nelero (30 Mar 2006 - 08:51)

Une solution possible est de créer l'image de fond de la balise dl avec le bandeau bleu qui passe dessous

http://frank.taillandier.free.fr/test.html
Modifié par DirtyF (30 Mar 2006 - 09:48)

Hello : as tu essayé un positionnement en relatif avec un z-index plus élévé pour ton image?
Modifié par Ralfman68 (30 Mar 2006 - 09:54)

DirtyF : Oui c'est vrai que ça peut être une solution
En fait c'est pour une pseudo maquette pour validation client pour qu'il ait un aperçu.. donc si ça lui plait pas ou juste la couleur, il faudra que je refasse une image...

L'inconvénient c'est que je ne sais pas forcément la largeur de mon titre donc j'aurais voulu que la bande bleue soit de la largeur de mon titre

Ralfman68 : Non je n'ai pas essayé car j'étais parti pour mettre mon image dans la css, puisqu'elle était décorative et non pas illustrative.. mais c'est vrai que ça aurait pu être une solution

(merci pour vos réponses à tous les deux, j'attends éventuellement d'autres réponses au cas où...)
Modifié par nelero (30 Mar 2006 - 10:37)

N'y aurait-il pas un tuto ou des liens pour ce genre de styles? je n'en ai pas trouvé
et je n'ai pas trouvé mon bonheur sur le forum...

Bonjour,

Il me semble normal que ton image se trouve derrière le fond bleu, c'est de cette manière que tu l'as déclaré dans ta css.

Le span se retrouve dessus le dt ...

Si tu mets l'image en background dans le span, cela devrait marcher :

.budget dt span{

                display:block;
                font-weight: bold;
                background-color: #006AB3 url(images/courant.gif) no-repeat top left ;
                text-align:right;
                color: #ffffff;
                padding: 5px 10px;
                margin-bottom: 10px;
                margin-top:10px;
            }

 .budget_courant{

                background:#ddd ;
            }

Après, il faudra sûrement régler la hauteur du span, les marges, etc. afin que l'image ne soit pas tronquée.

Le problème est que tu auras un fond bleu sur toute la hauteur de l'image ...
Modifié par Vero (30 Mar 2006 - 22:49)

bonjour,

ou tout simplement afficher l'image en absolu.

"<dl class="budget">
<dt class="imgtop"><img src='http://forum.alsacreations.com/upload/2973-courant.gif' title='logo' /></dt>
 etc ....

et le css :

.budget{
position:relative;  
 etc...
}
.imgtop {
position:absolute;
top:5px;
left:5px;
}

++
Modifié par gcyrillus (30 Mar 2006 - 22:51)