Probleme d'ecriture de texte en HTML/CSS
Dev_533w3r5 Le 29 août 2020 à 16:49
Bonjour à tous, j'ai regarder ce tuto https://www.youtube.com/watch?v=6HFpw5fcaD8 Et pour faire faire un navigation sticky en HTML/CSS/JS. J'ai réussi et tous ça mais je n'arrive pas à écrire mon texte comme s'il était invisble : VOICI MON CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eill for dev's</title>
<script src="js/main.js" defer></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<a href="" class="logo">Eill</a>
<ul>
<li><a href="">Accueil</a></li>
<li><a href="" title="Dans la vie il faut toujours faire l'anglais(e)">Help ???</a></li>
<li><a href="" title="Go to the téléchargement">Télécharger l'API</a></li>
<li><a href="" title="Go to the connexion">Connexion</a></li>
<li><a href="" title="Go to the inscription">Inscription</a></li>
</ul>
</header>
<section>
<div class="host-cft">
<h1>L'API eill</h1>
</h1>
</div>
</section><br>
</body>
</html>*{
margin: 0;
padding: 0;
font-family: 'roboto';
box-sizing: border-box;
}
body{
display: flex;
min-height: 100vh;
background: #000;
}
header{
top: 0;
left: 0;
width: 100%;
height: 150px;
display: flex;
position: fixed;
transition: 2s;
background: #000;
padding: 40px 100px;
align-items: center;
justify-content: space-between;
}
header .logo{
color: #fff;
font-size: 2em;
font-weight: 700;
transition: 0.6s;
position: relative;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
}
header.sticky-bar{
height: 50px;
background: #fff;
}
header.sticky-bar .logo{
color: #000;
}
header ul{
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
header ul li{
list-style: none;
position: relative;
}
header ul li a{
color: #fff;
margin: 0 15px;
font-weight: 500;
transition: 0.6s;
position: relative;
letter-spacing: 2px;
text-decoration: none;
}
header.sticky-bar ul li a{
color: #000;
}
section .host-cft{
top: 30;
left: 50;
width: 450px;
height: 450px;
}
::-webkit-scrollbar{
width: 11px;
}
::-webkit-scrollbar-thumb{
background-color: #fff;
}
``````javascript
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky-bar", window.scrollY > 0);
});PS : reponder moi dans les déler que vous voulez
TrolDu18 Le 31 août 2020 à 13:42 (Édité le 31 août 2020 à 13:42)
J'ai tester ton programe et le text en blanc sur fond noir n'est pas invisible (EILL, Accueil, Help ???, Téléchager l'API, Connexion et inscription) mais le text L'API eill je ne l'ai pas vue je pense car il est sur fond noir voilà (:
Dev_533w3r5 Le 2 septembre 2020 à 16:17
Merci c'est gentil de réponses mais j'ai trouver j'ai juste mit des top et left dans le css masi merci commme même
