Prolonger le background-color d'un titre

**BartRoX** · 08/06/2021, 09h31

Bonjour à tous,

J'ai un souci sur une de mes pages web, j'ai un titre (h1) avec un backgroundcolor, et il se trouve que ma page se prolonge horizontalement (l'utilisateur peut scroller à droite), mais le background color du titre s'arrète à la bordure initiale de la page...

Comment faire pour qu'il se prolonge indéfiniment (ou au moins jusqu'à la taille total de la page et pas juste la taille original de l'écran) ?

**BartRoX** · 09/06/2021, 08h44

J'ai trouvé qu'en parametrant la "width" du bloc h1 je pouvais prolonger mon background-color.
Mais le problème étant que la largeur de ma page peut être variable, donc mettre une valeur en pixel en dur n'est pas une solution. le pourcentage non plus puisque c'est le pourcentage du parent et non la largeur de la page...
Une solution ?

**NoSmoking** · 09/06/2021, 17h48

Bonjour,

le pourcentage non plus puisque c'est le pourcentage du parent et non la largeur de la page...

partant de ce constat il faut que tu t'arranges pour que l'élément générant le scroll ait le même parent que ton titre.

**BartRoX** · 10/06/2021, 08h18

Je ne vois pas comment cela serait possible.

Il y a pas simplement une propriété qui donne la largeur de la page ?

**NoSmoking** · 10/06/2021, 16h37

Je ne vois pas comment cela serait possible.

ma précédente réponse était incomplète !

Il te faut une structure de ce type :

Code html :

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

1
2
3
4
<div class="conteneur">
  <h1 class="title">Mon titre #0</h1>
  <div class="grande-largeur">...</div>
</div>

et en appliquant le CSS suivant le titre devrait prendre toute la largeur du conteneur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.title {
  margin: 0;
  color: #FFF;
  background: #069;
}
.conteneur {
  display: inline-block;    /* ton sauveur !!! */
}
.grande-largeur {
  width: 150vw;
  min-height: 10em;
  background: #EEE;
}

Question comme cela en passant pourquoi as-tu un scroll horizontal, une <table> interminable ?

**BartRoX** · 11/06/2021, 07h22

Oh je vois, sans aller jusqu'à créer une <div> j'ai ajouté le inline-block dans le <body> (mon titre étant inclue à l'intérieur) et cela fonctionne parfaitement, merci !

Effectivement, une table avec beaucoup de colonne...

**NoSmoking** · 14/06/2021, 18h05

Effectivement, une table avec beaucoup de colonne...

ah oui cela me parle maintenant, vu dans une autre de tes discussions !

Le scroll horizontal de la page n'est pas forcément intuitif et souvent déroutant, tu peux le supprimer en utilisant une <table> scrollable.

Regarde cette contribution : Table scrollable avec colonne fixe, simple à mettre en œuvre.

Prolonger le background-color d'un titre

CSS

Discussions similaires

Partager

Partager