[Résolu] Ligne horizontale de part et d'autre d'un titre (ou texte)

Bonjour,

J'aurai souhaité décorer mes titres avec quelque chose du style de l'image jointe, mais sans ajouter de balise HTML inutile. Est-ce aisément possible et si oui comment ?

Merci d'avance.


Modifié par PomCompot (21 Aug 2009 - 16:00)

Hello,

Tu peux faire comme ça :

CSS

h1{
padding:0 0 0 20px;
background:url(image.jpg);
}
h1 span{
background-color:#fff;
}

HTML

<h1><span>Un superbe titre</span></h1>

Modifié par pfoofen (21 Aug 2009 - 15:40)

Hello,

Regarde en faisant un truc du style :

<h1><span>un titre</span></h1>

h1 span{
	background-color:red;
	padding-left:20px;
}
h1{
	background-color:green;
}

<<<EDIT
Oups, j'ai été plus lent à la détente.
Je rajouterai juste un petit détail en rapport au code de Pfoofen, qu'il ne faille pas oublié la propriété background-repeat.
EDIT;


++
Modifié par Nolem (21 Aug 2009 - 15:49)

Il sert à donner du style à ton titre quoi ... ^^

Ouais, on peut le voir comme ça . Disons que l'apport sémantique est faible. Je pensais à une solution du type :before :after, mais on ne peut pas mettre de background dessus et ça ne marche pas avec tout les navigateurs.

Bonjour PomCompot,

a écrit :
Oui, je suis actuellement sur une solution de ce type, mais c'est justement ce qui me gêne puisque les span n'ont ici aucune signification .

Tu peux toujours attribuer un id ou une class à tes span ce qui leurs apporteraient une petite description .

Sachant qu'un id doit être unique dans toute ta page et qu'une class peut porter le même nom plusieurs fois.

PomCompot a écrit :
... :before :after, ...

Même si tu arrives à coder proprement avec :before et :after, tu vas te retrouver avec un problème de taille : IE6/7 n'aiment pas, n'est ce pas ? La solution que nous t'avons donnée reste la plus efficace.


++
Modifié par Nolem (21 Aug 2009 - 15:55)

Je m'incline donc. Vous conviendrez quand même que cela montre une petite lacune de CSS puisqu'on a text-decoration: line-through qui fait exactement l'inverse .

PomCompot a écrit :
Je m'incline donc. Vous conviendrez quand même que cela montre une petite lacune de CSS puisqu'on a text-decoration: line-through qui fait exactement l'inverse .

Je serai curieux de voir l'HTML et le CSS.

PomCompot a écrit :
Vous conviendrez quand même que cela montre une petite lacune de CSS

Euh... non, pas dans ce cas. De plus, même si tu pointais ce problème au CSS WG, ils te répondraient qu'il y a des solutions actuelles tout à fait satisfaisantes (celle qu'on t'a indiqué ci-dessus).

PomCompot a écrit :
puisqu'on a text-decoration: line-through qui fait exactement l'inverse

L'inverse de text-decoration: line-through, c'est text-decoration: none. Par ailleurs, la propriété text-decoration est destinée à reproduire certains usages typographiques significatifs tels que le fait de souligner ou de biffer un texte. Ça ne correspond pas à ce que tu vises.

PomCompot a écrit :
Disons que l'apport sémantique est faible.

Ça tombe bien, l'effet que tu souhaites réaliser est purement décoratif. En quoi serait-ce gênant d'utiliser un SPAN pour un effet graphique, alors même que c'est le rôle de cet élément (qui par nature n'a aucune sémantique)?

Oui, line-through est un mauvais exemple, j'en conviens.

Ce que je m'imagine c'est une plus grande flexibilité des background CSS pour permettre par exemple de ne remplir que les zones de marge et/ou de padding plutôt que l'ensemble de l'espace de l'élément. Quelque chose du type padding-background, margin-background et content-background. Une petite illustration pour voir ce que ça pourrait donner.



Je trouve toujours gênant de surcharger le balisage à simple fin décorative. Peut-être est-ce la maladie inverse de la divite .

PomCompot a écrit :
Je trouve toujours gênant de surcharger le balisage à simple fin décorative. Peut-être est-ce la maladie inverse de la divite .

C'est exactement ça

C'est un peu un extension de ça en fait : http://www.alsacreations.com/tuto/lire/816-css3-background-clip.html.