Bandeau de titre prioritaire

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

Je vous propose le code ci-dessous.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<style>
h1 {
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
        margin:0px;
        font-size: 1.3em;
        padding: 7px;
        padding-left: 15px;
        background-color: #444;
        background-image: linear-gradient(#666, #333);
        color: #ddd;
        text-align: left;
}
div {
 
}
</style>
</head>
 
<body>
<h1>Le titre</h1>
<div>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
</div>
</body>
 
</html>

Il permet d'obtenir le résultat ci-dessous.
Pièce jointe 236288

Je voudrais que la barre de défilement, à droite, n'empiète pas sur le bandeau du titre. Je voudrais d'obtenir le résultat ci-dessous.
Pièce jointe 236284

Comment procéderiez-vous pour obtenir ce résultat? Merci par avance pour vos réponses.

19/01/2017, 11h02
Doksuri

tu rajoutes un margin-top a ton corps du site de la hauteur de ton header ?
19/01/2017, 11h21
eleydet

Bonjour,

Citation:

Doksuri a écrit : tu rajoutes un margin-top a ton corps du site de la hauteur de ton header ?

C'est ce que j'ai essayé de faire, sans obtenir le résultat escompté.

Tu peux faire ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<body>
 
<header>
	Menu
</header>
 
<div class="content">
<p>...</p>
<p>...</p>
</div>
 
</body>

Code:

1
2
3
4
5
6
7
8
body{
	overflow: hidden;
}
 
.content {
	height: 100%;
	overflow-y: scroll;
}

19/01/2017, 14h23
eleydet

Bonjour,

Je viens d'essayer différentes manières d'intégrer la propriété overflow dans la feuille de style, mais je n'ai pas réussi à obtenir l'effet attendu.
19/01/2017, 16h33
Ecared

C'est surement du au fait que ton h1 soit en position fixed, réutilise le code que je t'ai donné en enlevant cette position fixed.

Bonjour,
il te faut mettre ton « content » en position absolute et l'étirer sur le reste de la fenêtre.

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {
  overflow : hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}
h1 {
  margin:0px;
  font-size: 1.3em;
  padding: 7px;
  padding-left: 15px;
  background-color: #444;
  background-image: linear-gradient(#666, #333);
  color: #ddd;
  text-align: left;
}
div {
  overflow: auto;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 3em; /* à ajuster */
}
</style>
</head>
<body>
<h1>Le titre</h1>
<div>
1st ligne
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
</div>
</body>
 </html>

On en avait parler il y à jadis dans cette discussion Div hauteur automatique sans dimension en absolu et on avait abordé les flex-box CSS ou JS.

Résultats :

CSS3 Flexbox, en CSS3 en utilisant les flexBox.
JS 4 Flexbox, en javascript mais avec un autre positionnement que celui que tu utilises.

20/01/2017, 18h44
eleydet

Bonsoir,

Citation:

ecared a écrit : C'est surement du au fait que ton h1 soit en position fixed, réutilise le code que je t'ai donné en enlevant cette position fixed.

En réponse à ecared : Pour que le titre soit toujours visible, il faut que h1 soit "en position fixed"?

Je vais étudier ce que me propose NoSmoking, puis je vous tiendrai au courant.
21/01/2017, 18h09
eleydet

Bonsoir,

Merci pour ta solution, NoSmoking. Les liens que tu proposes sont également très intéressants, je n'ai pas fini d'étudier ce sujet. Encore merci! :P