Superposition de background sur un H1 et une classe

bonjour à tous !
voila je cherche la solution pour designé mon site
voici le rendu que j'aimerai sur un H1
http://www.goult-festival-jazz-luberon.fr/deco/titre_h1.jpg
donc une ligne qui fait le long de la page avec le texte du titre 1 ce superpose et cache le trait avec un background blanc

et en css voici mon code

h1 {
background: #ffffff;
padding: 0 5px 0 5px;
color: #660099;
}

h1.titreh1{ /*ici une classe que j'essaye d'attribué au h1*/
display:block;
line-height: 53px;/*hauteur de mon image*/
    background:url(deco/titre_v.jpg)no-repeat center left;/*ma ligne violette */
    font-size: 150%;
    padding-left: 50px;
}

mais cela ne marche pas un seul background est pris en considération

avez vous une solution pour m'aider

voici la ligne déja fait pour m'aider smile http://www.goult-festival-jazz-luberon.fr/deco/titre_v.jpg
Modifié par Florent V. (22 Mar 2010 - 12:35)

Salut,

personnellement, j'aurais fait de la façon suivante:

<h1><span>Titre du H1</span></h1>

h1 {
  background:url(deco/titre_v.jpg) no-repeat center left;
}

h1 span {
  background-color: white;
}

A adapter bien entendu
Modifié par Yvan L. (22 Mar 2010 - 11:49)

Bonjour,

La solution donnée par Yvan est la bonne. Mais avant de l'appliquer, il serait bon de comprendre pourquoi ton code ne fonctionne pas.

Tu utilises le code HTML suivant:

<h1 class="titreh1"> Mon titre </h1>

Et les sélecteurs CSS suivants:

h1 { 
  /* Une première série de déclarations */
} 
 
h1.titreh1 {
  /* Une deuxième série de déclarations */
}

Les deux sélecteurs correspondent à ton titre. Les déclarations CSS (couples propriété-valeur) pour chaque sélecteur seront donc appliquées. La manière dont elles sont appliquées dépend de plusieurs concepts liés à la cascade en CSS (lecture recommandée). En gros ça dépend de l'ordre et du poids des sélecteurs. Ici, ton sélecteur "h1.titreh1" prend le dessus sur le sélecteur "h1". Ça ne veut pas dire que toutes les déclarations pour le sélecteur "h1" sont ignorées, mais lorsque tu déclares deux fois la même propriété il n'y en a qu'une des deux qui sera retenue.

Comme tu déclares deux fois background, ton background: #ffffff; sera écrasé par la deuxième déclaration. (À noter qu'il s'appliquera toujours pour d'autres éléments H1 dans ta page, ceux qui n'ont pas la classe "titreh1".)

Pour finir, en utilisant un outil comme Firebug (extension pour Firefox) ou Web Inspector (intégré à Safari et Chrome), tu peux «inspecter» un élément HTML et l'outil te dira quels sont les styles CSS qui s'appliquent à l'élément, soit directement, soit parce qu'ils sont hérités.

merci pour vos réponse
l'idée des span fonctionne bien mais ce code est destiné à être utiliser dans tinymce
et je ne sais comment ajouter des balises span dans tinymce (de façons ludique pour qu'un client lambda puisse l'appliquer)

l'idée du css en casquade (j'ai pas encore pris le temps de lire le lien donné par florent)
mais j'avais essayé avec un background-image et un background-color mais force de constaté que cela ne marchais pas

snypi a écrit :
l'idée des span fonctionne bien mais ce code est destiné à être utiliser dans tinymce et je ne sais comment ajouter des balises span dans tinymce (de façons ludique pour qu'un client lambda puisse l'appliquer)

Tu peux à la rigueur créer le SPAN côté serveur, lors de l'enregistrement des données. Ou, plus simplement, à la volée en JavaScript lors du chargement de la page.

Florent V. a écrit :
créer le SPAN côté serveur, lors de l'enregistrement des données

cela obligerai mon client à tapez du code via l'option code html et de plus tinymce à tendance à effacer ce code lors de mis à jours de la page !

Florent V. a écrit :
Ou, plus simplement, à la volée en JavaScript lors du chargement de la page.

alors tu peut m'en dire plus
Modifié par Florent V. (22 Mar 2010 - 19:58)

snypi a écrit :
cela obligerai mon client à tapez du code via l'option code html

Non, vu que le code supplémentaire nécessaire serait généré par un script côté serveur lors de l'enregistrement.
Il s'agirait, à un moment ou à un autre, de remplacer <h1 class="truc">...</h1> par <h1 class="truc"><span>...</span></h1> (les points de suspension représentant un contenu qu'il faut reprendre sans modification). Ça se fait avec des expressions rationnelles. (Si tu as des compétences en développement web côté serveur, ça devrait te parler. Sinon, laisse tomber, c'est pas dans ton rayon.)

Si tu crains que TinyMCE ne le supprime par la suite, tu peux:
- soit faire ce traitement à l'enregistrement et conserver le code ainsi généré dans une colonne différente de ta table en base de données;
- soit faire ce traitement à l'affichage, après avoir récupéré les données en base et au moment de générer la page HTML.

snypi a écrit :
alors tu peut m'en dire plus

Ben par exemple tu peux apprendre JavaScript.

Si sur ce site tu utilises déjà une bibliothèque JavaScript telle que jQuery ou MooTools, tu dois pouvoir faire ça même sans compétences avancées en JavaScript. Exemple simple avec jQuery:

$(document).ready(function(){
  $('h1.truc').wrapInner('<span></span>');
});

Si pour toi ces trois lignes de code sont du chinois, et qu'apprendre des rudiments de JavaScript t'intéresse, je te conseille fortement cette lecture... et toutes les lectures qui y sont indiquées.

effectivement le java est un peu chinois pour moi, mais je te remercie grandement car j'ai résolue mon souci et partager mon idée avec la communauté de zite+ (l'outil avec lequel je travail)
forum de zite

j'ai donc appliqué ce code

<!-- JavaScripts-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function(){ 
  $('h1.truc').wrapInner('<span></span>'); 
});
        </script>

et tous marche à merveille
un grand merci à vous

edit : le fait d'appliquer une classe à un h1 n'affecte pas le réferencement ??
Modifié par snypi (23 Mar 2010 - 11:11)

snypi a écrit :
effectivement le java est un peu chinois pour moi

Surtout qu'il s'agit de JavaScript. JavaScript est le principal langage de programmation utilisé dans les pages web. Java est un langage différent, qui est utilisé pour créer des applications, et n'est pas utilisé directement dans les pages web (même s'il existe un plug-in Java pour les navigateurs).

snypi a écrit :
le fait d'appliquer une classe à un h1 n'affecte pas le réferencement ??

Non.

Merci pour ce soutien et pour ces info
tu ma donné envie d'approfondir mes connaissance en javascript
cela ouvre pas mal de perspective !!

reste plus qu'a prendre le temps de lire et de digérer tous cela