web-dev-qa-db-fra.com

Largeur des en-têtes (H1, H2, etc.)

Je veux que mes en-têtes (h1 à h6) aient une couleur d'arrière-plan (différente de celle de l'arrière-plan de la page), je veux également que la largeur de cet arrière-plan soit la même que la largeur du texte dans l'en-tête, plus le remplissage (Non la largeur du conteneur dans lequel se trouve l'en-tête, ce qui se produit actuellement).

Il ne sert à rien de vous montrer du code car c'est assez simple (ou ça devrait l'être quand même!). Le conteneur a une largeur fixe. Pour le moment, je n'ai que quelques marges, un remplissage, une couleur d'arrière-plan et un style de police pour les balises h1, h2, h3, etc.

EDIT: Je suppose que le code aiderait! https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers (ceci a la solution de Gerald appliquée, bien qu'évidemment cela ne fonctionnerait toujours pas dans IE6/7 et encore a des problèmes avec les nouveaux navigateurs). Utiliser display: inline cause plus de problèmes qu'il n'en résout, en utilisant float: left et clear: left comme mentionné a des problèmes à cause de la disposition à 2 colonnes. Merci pour votre aide à tous jusqu'à présent.

cssheaderwidth
21
Adrian Trimble

J'utiliserais

#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 {
   float:left;
   clear:left;
}
#rightcol p {clear:left;}

modifier après commentaire

Si le div contenant flotte, le clear n'effacera pas le col de gauche. Alors flottez à droite vers la gauche et retirez la marge

#rightcol {
   float:left;
   padding:70px 20px 20px 0px;
   width:585px;
}
15
Emily

h1-h6 sont des éléments de niveau bloc et même s'ils ne sont pas dans un conteneur (ou juste un corps), ils s'étireront sur la largeur de la fenêtre. Une solution consiste à changer leur affichage pour qu'il soit en bloc à la place:

<h1 style="background-color:pink; display:inline-block; padding:1em;">Testheader</h1>

Notez que vous devrez faire une coupure manuelle après l'en-tête si l'élément suivant n'est pas un élément de niveau bloc comme p.

45
Gerald Senarclens de Grancy

Une balise d'en-tête (h1-h6) est un élément de niveau bloc et remplit ainsi la largeur du conteneur dans lequel elle se trouve.

display:inline

apportera l'arrière-plan à juste la largeur du texte. Cela introduira cependant d'autres problèmes (puisque les éléments en ligne ne se comportent pas comme les éléments de bloc de nombreuses autres façons).

L'alternative consiste à définir une largeur pour l'en-tête lui-même. Si vous vouliez être vraiment délicat, vous pouvez le faire avec javascript afin qu'il le calcule spécifiquement pour chaque en-tête.

Vous devrez jouer un peu et déterminer ce qui fonctionne dans votre situation.

4
Gabriel Hurley

comme d'autres l'ont mentionné display:inline-block; serait une option, mais ne fonctionne pas dans toutes les navigateurs. ce que je pourrais penser en ce moment est de donner aux en-têtes un float:left; et l'élément qui suit un clear:left;

une autre façon - pas aussi propre - consiste à ajouter des étendues autour du texte de votre en-tête et à leur donner une couleur d'arrière-plan:

<h1><span>your text</span></h1>

h1 span { background-color:#369; }
4
knittl

Si vous voulez que votre hxh1, h2, h3, etc. pour avoir le même que le texte qu'il contient, vous pouvez essayer

h1 {
    display:table;
}

Il ne casse pas l'effondrement des marges comme display: inline-block ou float: left.

Voir l'extrait:

#page {
  background-color: #ededed;
  height: 300px;
}
h1 {
  display: table;
  background-color: #10c459;
  padding: 10px;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}
<div id="page">
  <h1>Hello world</h1>
</div>
3
Sébastien Gicquel

Une autre façon d'ajouter une couleur d'arrière-plan à un élément d'en-tête qui est seulement aussi large que son texte (sans utiliser d'éléments supplémentaires ou de propriétés d'affichage) consiste à utiliser le sélecteur CSS de première ligne;

Exemple:

h1:first-line { 
 background-color: yellow;
}
1
tonesforchris

Ma solution était de mettre un span à l'intérieur du h1 et de le styliser à la place.

1
jasonc65