Bonjour à tous et à toute amis webmaistres !

J'ai un problème. j'essaye de faire une barre horizontale qui mesure 70px de hauteur. Elle est transparente et donne un effet de flou au texte qui défile dessous... mais voilà je n'arrive pas à la dimensionner pour 70px puisque si je ne met rien dans le div "<div id="bd"></div>" la barre ne "floute" plus et si je met quelque chose dedans... ben sa floute tout ! voici mon code html:

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Le Nouveau Journal</title>
    </head>
    <body style="background-color: rgb(238, 238, 238); z-index: 1">
    <p class="Titre" style="text-align: center">Le Nouveau Journal</p>
    <div id="bd"></div>
    <div class="tout">
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p>
    <p>pppppppppppppppppppppppppppppppppppp<br/>pppppppppppppppppppppppppppppppppppppppp</p> 
    </div>
    </body>
</html>

et mon CSS :

Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.Titre {left: 1%;
position: fixed;
z-index: 4;}
#bd{padding: 0px;
margin: 0px;
border: none;
width: 100%;
min-height: 70px;
max-height: 70px;
position: fixed;
top: 0px;
-webkit-filter: blur(2px);
z-index: 2;
display: inline-block;}
 Répondre