Discussion :

[kaching]

Bonjour, je ne sais pas vraiment si ma question est compréhensible mais une image vaut mille mots :

Ce que je veux :


Ce que je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <p class="titreBlog">#TITRE</p>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.titreBlog{
clear:both;
float:left;
background-color:rgba(66,75,81,0.8);
padding:8px;
color:#FFF;
font-size:18px;
text-transform:uppercase;
margin:0;
}

Ce que j'ai :


Le problème :
J'aimerai que comme sur la première image, le background s'arréte après mon dernier caractère de la première ligne (LA) et ne prenne pas toute la longueur.
(Oui je sais que la balise P n'est pas la solution mais c'était pour bien expliqué ce que je voulais)

Merci à vous, ça doit pas être bien compliqué mais je ne sais même pas quoi taper dans google pour chercher une solution... Merci !

[Bisûnûrs]

Il suffit de passer le p en display:inline; par exemple et donc supprimer le float:left;.

[Bovino]

C'est pas très très joli ça comme solution...
Plutôt que de passer un paragraphe en inline, autant mettre une balise inline (par exemple <span>) que de modifier un paragraphe en ce qu'il n'est pas censé être.

[Bisûnûrs]

Ben si on parle sémantique, il s'agit (semble-t-il) d'un titre. Donc l'utilisation d'un hX parait plus appropriée, ce qui fait qu'il faudrait le passer en inline quand même.

Plutôt que de passer un paragraphe en inline, autant mettre une balise inline

Avec le mal qu'on a à faire prendre conscience aux gens qu'il faut développer selon la sémantique des éléments plutôt que leur rendu graphique.

[Bovino]

Alors si on veut être correct dans ce cas, un titre n'a pas à être en display inline. De plus, une image de fond sur un texte n'a pas de valeur sémantique. La solution serait donc de mettre un span dans un titre et que ce span porte l'image de fond.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1><span class="titreBlog">Titre du blog</span></h1>

[kaching]

Merci pour votre aide et ces précieux conseils !

Edit : j'ai encore une petite question, lors du passage à la ligne, le padding ne prend pas (après le "à" et avant le "la") :

[rodolphebrd]

...un titre n'a pas à être en display inline...

Je ne vois pas trop pourquoi.

J'ai vu beaucoup d'exemples qui utilisaient cette solution.