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:
et mon code css:
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:
<!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 code css:
.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;}