Background a droite de H1

Bonjour à tous,
j'aurai une petite question à vous poser, comment feriez vous, pour placer un background seulement sur ce qui est à droite d'un titre ? sachant que le titre peut changer de taille, comme ici par exemple :

Merci de votre réponse

Bonsoir,

A partir de l'exemple fourni, j'aurai tendance à inclure un <span> comportant un arrière-plan gris à l'intérieur de la balise de titre :

HTML :

<h1><span>Mon titre</span></h1>

CSS :

body, h1 {
	margin: 0;
	padding: 0;
}

body {
	background-color: #a1a1a1;
}

h1 {
	line-height: 40px;
	background: url(fond.jpg) repeat-x;
	font-family: arial, verdana, sans-serif;
	font-size: 20px;
	color: #fff;
}

h1 span {
	padding: 0 10px;
	display: inline-block;
	background-color: #a1a1a1;
}

Voici l'image pour tester le bout de code ci-dessus :

Hum.. Merci pour la réponse Je ne sais pas pourquoi je n'y avais pas pensé, je cherchais bêtement à créer un bloc flottant a droite, faisant la largeur restante. Je sais pas si mon idée était réalisable comme je le décris.. a voir !

C'est peut-être réalisable mais moins intuitif à mon goût et surtout cela induirait une <div> parente englobant la balise de titre ainsi que le bloc utilisé pour l'affichage du fond ; autrement dit plus de balisage.

En tout cas c'est comme ça que je procède toujours pour ce type d'effet, mais il y a peut-être une meilleure solution !

Bonne continuation.

Mwea a écrit :
Je sais pas si mon idée était réalisable comme je le décris..

Avec float, non.
Avec display:table-cell, a priori oui.

La solution donnée par jeremy-p reste plus simple et intuitive, donc je la garderais sauf s'il y a une contrindication claire (par exemple si, pour les besoins du design, on ne peut pas se permettre d'appliquer une couleur de fond sur le SPAN).

jeremy-p a écrit :
cela induirait une <div> parente englobant la balise de titre ainsi que le bloc utilisé pour l'affichage du fond ; autrement dit plus de balisage.

En utilisant la structure <h1><span>Mon titre</span></h1> on peut styler le H1, le SPAN, mais aussi un pseudo-élément ::before et un pseudo-élément ::after dans le H1. Donc pas plus de balisage.

Hum.. je ne connais pas trop le principe de display:table-cell, peux tu m'en dires plus ?
Ici comment pourrais-je la mettre place, sachant que le h1 ne peut pas avoir de background ?

Pour en savoir plus sur table-cell

mais sinon laisse tomber dans ton cas, la méthode span est la meilleure.
Modifié par jmlapam (22 Oct 2011 - 19:08)

Au contraire, cela m'intéresse car mon cas réel est celui ci :


Comment feriez vous dans ce cas là ?

Une variation sur ceci:

#content h1 {
  display: table;
  width: 100%;
}
#content h1 > span {
  display: table-cell;
  width: 10px;
  padding-right: 20px;
  white-space: nowrap;
}
#content h1:after {
  content: "\00A0 "; /* espace insécable */
  display: table-cell;
  background: url(pattern-title.png) repeat-x;
}

Limites:
1. Si le texte dépasse une ligne, le white-space:nowrap va poser problème. Je l'utilise combiné à un width faible pour forcer la cellule de gauche (le span) à prendre la largeur du texte et pas plus. À défaut on peut peut-être utiliser un width fort sur la cellule de droite (un width:80% par exemple) et se passer du white-space:nowrap, je suis plus tout à fait au clair sur white-space et sur le mécanisme de calcul des largeurs de cellules de tableau (une mise en garde: il est assez imprévisible).
2. Pas compatible IE7 (display:table et pseudo-élément :after à partir de IE8). Pas dramatique vu que dans IE7 on aura le titre sans le motif à droite, c'est de la dégradation gracieuse qui va bien.

Pour le premier point, j'ajoute qu'il y a un mécanisme de positionnement en CSS3 qui permettrait de gérer ça de manière très fiable, à savoir le module Flexible Box Layout. Une ancienne version de la spec est implémentée dans Firefox et Webkit (et également dans IE10 developer preview), mais une version avec des modifications significatives a été publiée depuis et il va falloir un peu de temps pour que ça se stabilise. Donc pas vraiment utilisable pour l'instant.

J'ai trouvé à partir de ce que tu m'a proposé une solution, peut être plus compatible , donne moi ton avis

#content {
  display: table;
  width: 100%;
}
#content h1 {
  clear:  left;
  float:  left;
  padding-right: 20px;
}
#content span  {
  display: table-cell;
  width: 100%;
  background: url(pattern-title.png) repeat-x;
}

Modifié par fvsch (23 Oct 2011 - 14:17)

Tu utilises display:table sur un conteneur et display:table-cell sur un élément qui est au moins deux niveaux plus bas dans le DOM. Là comme ça je dirais que ça ne va pas avoir d'impact, et si ta solution marche c'est uniquement à cause de l'utilisation de float.

Et effectivement on doit pouvoir utiliser float, par exemple ainsi:

#content h1 {
  overflow: hidden; /* empêche le dépassement de l'élément flottant */
}
#content h1 > span {
  float: left;
  padding-right: 20px;
}
#content h1:after {
  content: "";
  display: block;
  height: 40px;
  overflow: hidden; /* contexte de formattage, force le bloc à adapter sa largeur au flottant qui le précède */
  background: url(pattern-title.png) repeat-x;
}

Ça peut être rendu compatible IE7 en utilisant un élément vide (par exemple un autre SPAN) à la place du pseudo-élément :after. Donc avec un code HTML de ce type:

<h1>
  <span class="text">Mon titre</span>
  <span class="deco"></span>
</h1>

... en adaptant les sélecteurs CSS, bien sûr. Et une remarque pour finir: si j'utilise #content dans mes exemples de code ce n'est pas parce qu'on a besoin d'un conteneur avec un id "content", mais juste pour rappeler qu'appliquer des styles très spécifiques à un sélecteur très large tel que "h1" (tous les éléments H1 des pages) n'est généralement pas une bonne idée, et qu'il vaut mieux limiter un peu la portée de ses sélecteurs. C'est bien sûr à adapter à la structure de page utilisée.

Aussi surprenant que cela puisses paraître, la structure que j'utilise actuellement :

<div id="title">
	<h1>Obstacles</h1>
	<span class="check"></span>
</div>

Avec

#title {
  display: table;
  width: 100%;
}

#title h1 {
  clear:  left;
  float:  left;
  white-space:nowrap;
}
#title .check{
	content:'';
	background: url('img/sprite.png') repeat-x 0 0;
	width: 100%;
	height: 40px;
	display: table-cell;
}

Fonctionne parfaitement , le float me permet de définir une largeur qui n'est pas de 100% pour le h1 avec l'utilisation de clear.
Je reverrais peut être mon code plus tard, mais cela à l'air de fonctionner.