Images de chaque côté d'un <h1>

Bonjour,
Comme vous vous en doutez, j'ai un soucis...
Je souhaiterais "décorer" mon titre <h1>, par une image de chaque côté.
J'ai réussis à en mettre une sur le côté gauche, mais le problème est que si je désire centrer ce titre... l'image ne suit pas, et reste à gauche...

J'avais pensé faire un tableau, mais je préfèrerais réussir avec cette balise...
Et j'aimerais vraiment que le tout soit bien centré...

Je suis débutante alors désolée si ça parraît complaitement débile...
J'espère avoir été claire

Merci d'avance pour vos conseils
P.S: Le conseil "arrête le CSS n'est pas valable"


[#]/******** Mon CSS *******/
h1
{
background: url(../images/feuille_titre.gif) center left no-repeat;
padding-top: 30px;
font-size: 16px;
color: #ffffff;
font-weight: bold;
}

Peut-etre pourrais tu essayer de jouer sur le padding-left et padding-right...

Oui, désolée, j'ai oublié de préciser...
J'ai essayer de jouer avec padding right et left, mais seul le titre bouge...

Merci quand même

Je ne sais pas si c'est la meilleur solution mais si tu met ton image dans le code et non dans le css le padding aura un effet, j'avais oublier qu'il ne jouait pas sur le background :-p

Pour avoir deux backgrounds (un à gauche et un à droite) il va surement falloir imbriquer 2 éléments l'un dans l'autre.
Par ex:

h1
{
background: url(bullet.gif) center left no-repeat;
padding-left: 10px;
margin-top:30px;
}
h1 span{
background: url(bullet.gif) center right no-repeat;
padding-right: 10px;
font-weight: bold;
color: #000;
font-size: 16px;
}

<h1><span>bla bla bla</span></h1>

Après, reste plus qu'à centrer...

Oui, tu as raison Dodjo, mais...
Bon, je vais faire ma chieuse, mais j'aimerais vraiment puvoir n'écrire que les balises <h1></h1>... surtout que l'image est toujours la même...

Je vais essayer ça Yyoupla

Merci

pour info, il y a bien également les pseudo-classes :before et :after, mais non supportées par IE
Un jour peut etre

Je vais peut-être te paraître abrutie Yyoupla, mais si je joue avec le padding, j'arrive à faire bouger l'image de droite (pas celle de gauche), et ça semble ne pas être fait en fonction du titre...
Du coup, si j'ai des titres de tailles différentes... (je parle en nombre de lettres bien sûr )

Je ne sais pas si je suis claire là...
En tout cas, je n'arrive pas faire fonctionner ce que tu m'as filé...

Désolée

Euh ta question c'est quoi finalement ...?
Tel quel mon code fonctionne bien...
Pour adapter à la taille de tes images, tu dois jouer avec les deux padding (celui de h1 et celui de h1 span).

Je ne sais pas si j'ai bien saisi là...

Je ne sais pas si ça joue, mais je suis sous Safari (Mac)...

En tout cas, j'aimerais des images sur les côtés de mon titre:

           Mon titre

Et que le tout soit centré.

mais là, ça fait çà:

          Mon titre

Et je peux, en jouant avec padding, bouger l'image de droite seulement.
Mais par exemple, si j'écris padding-left: 0px;
Mon image se retrouve au milieu de la page, derrière mon titre...

Voilà, j'espère t'avoir éclairé.
Désolée si c'est encore plus embrouillé... lol

Ahhh donc c'est au niveau du centrage, dakodak
Donc là, sans me creuser les fin fonds du cerveau qu'il me reste en cette fin de semaine, je dirais qu'il faut rajouter un niveau supplémentaire...

.titre{
text-align:center;
}
h1
{
background: url(bullet.gif) center left no-repeat;
padding-left: 10px;
margin-top:30px;
display:inline;
}
h1 span{
background: url(bullet.gif) center right no-repeat;
padding-right: 10px;
font-weight: bold;
color: #000;
font-size: 16px;
}

<div class="titre"><h1><span>bla bla bla</span></h1></div>

Oui ça fait beaucoup, il y a peut-êtrep lus simple. Mais là, la fatigue ne m'accorde qu'un discernement limité, désolé...
En tout cas ça fonctionne, c'est déjà ça !
le display:inline au niveau du h1 est destiné à pouvoir l'aligner comme un élément en-ligne grâce à text-align du conteneur. Sans ça, h1 est un élément bloc, et occupe par défaut toute la largeur du conteneur.
Modifié par yyoupla (12 May 2006 - 17:25)

Merci beaucoup Yyoupla, ça fonctionne !
En fait, j'ai même enlevé la <div>.

Le must serait de pouvoir n'écrire que <h1>Mon titre</h1>, alors si quelqu'un a une idée, je prends

En tout cas, merci beaucoup

Bon week end