La largeur de l'en-tête (H1, H2, etc)

Je veux que mes en-têtes (h1 grâce à h6) pour avoir un fond de couleur (différente de celle du fond de la page), je veux aussi la largeur de ce fond, la même que la largeur du texte dans l'en-tête, en plus de rembourrage (Pas la largeur du conteneur que l'en-tête est en, qui est ce qui se passe maintenant).

Il n'y a pas beaucoup de point en moi de vous montrer tout le code car c'est assez simple (ou il devrait être de toute façon!). Le conteneur est une largeur fixe. Droit maintenant, j'ai juste quelques marges, le remplissage, la couleur de fond et de police style de jeu pour le h1, h2, h3, etc balises.

EDIT: je suppose que le code de permettrait de! https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers (ce qui a Gerald de la solution appliquée, bien que, évidemment, ce ne serait pas travailler dans IE6/7 et a encore des problèmes dans les navigateurs les plus récents). À l'aide de display:inline provoque plus de problèmes qu'elle n'en résout, à l'aide float: left et clair: gauche comme mentionné a des problèmes en raison de la 2 colonne mise en page. Merci pour tout le monde aide pour l'instant.

Quelle est votre question?
Si c'est simple je suis confus quant à votre besoin d'aide. Je me rends compte que nous savons certaines choses que vous ne le faites pas, mais montre-nous ton code nous permet de travailler sur ce que les styles et de positionnement sont appliquées. Il montre également comment profondément vous êtes à la nidification de vos en-têtes. C'est un site pour des codeurs pour aider les codeurs; le code est important pour nous.
Oui indiquant le code ne ferait pas de mal. Je suppose que vous pourriez avoir des problèmes avec la largeur étant différents dans firefox et IE parce que vous êtes le réglage de la largeur et de rembourrage sur l'en-tête ou le conteneur, ce qui donne IE problèmes.
Lien vers la page a été ajoutée.
Ainsi, le lien de la page est malheureusement mort...

InformationsquelleAutor Adrian Trimble | 2009-07-21

15

Je voudrais utiliser
```
#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 {
   float:left;
   clear:left;
}
#rightcol p {clear:left;} 
```
modifier après le commentaire

Si le div contenant est flottant, le clair de ne pas effacer la gauche col. Donc float rightcol gauche et retirez la marge
```
#rightcol {
   float:left;
   padding:70px 20px 20px 0px;
   width:585px;
}
```
- Malheureusement, cela rend le contenu est clair la colonne de gauche ainsi que l'effacement de chaque d'autres. (voir adriantrimble.com/headers/clear.html). Merci bien!
- Ensuite flotter la colonne de droite de gauche et le clair de ne pas effacer la colonne de gauche. J'ai ajouté le code pour mon poste.
InformationsquelleAutor Emily
45

h1-h6 sont des éléments de niveau bloc et même si ils ne sont pas dans un récipient (ou juste le corps) qu'ils vont s'étirer sur toute la largeur de la fenêtre. Une solution consiste à modifier leur affichage inline-block à la place:
```
<h1 style="background-color:pink; display:inline-block; padding:1em;">Testheader</h1>
```
Noter que vous auriez à faire un saut manuel après l'en-tête si l'élément suivant n'est pas un bloc élément de niveau p.
- Certains navigateurs vous permettent d'utiliser display:inline-block sur n'importe quel élément, mais IE6/7 l'accepter uniquement sur des éléments qui sont nativement display:inline. Comme d'habitude, c'est à dire gâche la fête pour tout le monde.
- C'est la bonne réponse (display:inline-block;). Support pour IE 6,7 a été abandonné par Microsoft, et dans un effort pour tuer ce truc hors tout, il doit être interrompu pour les devs ainsi (OMI).
InformationsquelleAutor Gerald Senarclens de Grancy
4

Une balise d'en-tête (h1-h6) est un bloc élément de niveau et ainsi occupe la largeur du conteneur, il est dans le coup. Changer l'
```
display:inline 
```
apportera de l'arrière-plan dans juste la largeur du texte. Cela permettra d'introduire d'autres enjeux (depuis les éléments en ligne ne se comportent pas comme des éléments de bloc dans beaucoup d'autres façons).

La solution consiste à définir une largeur pour l'en-tête lui-même. Si vous voulez être vraiment difficile, vous pouvez le faire avec javascript afin qu'il calcule pour chaque en-tête particulier.

Vous aurez à jouer autour d'un peu et de comprendre ce qui fonctionne dans votre situation.

InformationsquelleAutor Gabriel Hurley
4

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

d'une autre manière - non pas comme le nettoyage est à ajouter s'étend autour de votre en-tête du texte, et de donner qui s'étend sur une couleur d'arrière-plan:
```
<h1><span>your text</span></h1>

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

Si vous voulez que votre hx h1, h2, h3, etc. pour avoir la même chose avec le texte, vous pouvez essayer de

h1 {
    display:table;
}

Elle ne se casse pas la marge d'effondrement comme display: inline-block ou float: left.

Voir extrait de :

CSS:

#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;
}

HTML:

<div id="page">
  <h1>Hello world</h1>
</div>

InformationsquelleAutor Sébastien Gicquel

1

Ma solution a été de mettre un span à l'intérieur de la h1 et le style de la durée de la place.

InformationsquelleAutor jasonc65
1

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

Exemple:
```
h1:first-line { 
 background-color: yellow;
}
```
InformationsquelleAutor tonesforchris

Vous devez vous connecter pour publier un commentaire.