Problème bouton CSS
Ipoote
Messages postés
47
Statut
Membre
-
Ipoote Messages postés 47 Statut Membre -
Ipoote Messages postés 47 Statut Membre -
Bonjour,
Je poste ce message car j'ai un problème concernant un site web que je dois rendre pour un cours : j'ai créé un bouton jour/nuit qui remplit ses fonctions, mais qui ne modifie pas le haut du site comme vous pouvez le voir, le bouton monte également un peu vers le haut lorsque je l'active, alors que je voudrais simplement que toute la page devienne foncée.
Je pense que cela vient sûrement du padding ou du margin, mais je n'en ai aucune certitude et je ne trouve pas le moyen de régler ce problème.
Voici mon CSS :
Le code HTML du bouton :
Ainsi que ma fonction JS :
Merci ! :)
Je poste ce message car j'ai un problème concernant un site web que je dois rendre pour un cours : j'ai créé un bouton jour/nuit qui remplit ses fonctions, mais qui ne modifie pas le haut du site comme vous pouvez le voir, le bouton monte également un peu vers le haut lorsque je l'active, alors que je voudrais simplement que toute la page devienne foncée.
Je pense que cela vient sûrement du padding ou du margin, mais je n'en ai aucune certitude et je ne trouve pas le moyen de régler ce problème.
Voici mon CSS :
html, body{
margin: 0;
padding: 0;
height: 100%;
}
.mode_nuit{
background-color: rgb(68, 20, 20);
filter: brightness(75%);
}
Le code HTML du bouton :
<label class="switch">
<input type="checkbox" onclick="modeNuit()">
<span class="slider round"></span>
</label>
Ainsi que ma fonction JS :
function modeNuit(){
var element = document.body;
element.classList.toggle("mode_nuit");
}
Merci ! :)
A voir également:
- Bouton css qui s'enfonce
- Casque jbl bouton enfoncé - Forum Casque et écouteurs
- Bouton shift pc ✓ - Forum Jeux vidéo
- Diagnostic bouton photo - Accueil - Outils
- Bouton on/off comment savoir ✓ - Forum Matériel & Système
- Bouton home clavier ✓ - Forum PC portable
Voici mon code complet :
HTML :
CSS :
html{
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: rgb(218, 185, 185);
}
html, body{
margin: 0;
padding: 0;
height: 100%;
}
h1{
text-align: center;
text-decoration: underline;
font-size: 50px;
}
p{
font-size: 15px;
font-weight: normal;
}
.films{
position: relative;
justify-content: right;
font-size: 25px;
font-weight:bold;
display: flex;
flex-wrap: wrap;
}
.film{
list-style:decimal;
flex: 0 0 45%;
padding-right: 50px;
padding-top: 100px;
}
img{
height: 500px;
}
.titre{
height: 50px;
}
.film a{
position:relative;
}
.film a span{
position:absolute;
display:none;
z-index: 1;
}
.film a:hover span{
display:block;
}
.btn {
background-color: #802a2a;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
position: absolute;
top: 45px;
right: 180px;
}
.btn:hover {
background-color: rgb(224, 13, 13);
}
.mode_nuit{
background-color: rgb(68, 20, 20);
filter: brightness(75%);
}
.mode_nuit, .h1{
color: #aeafae
}
/* ------------------------------------------------------------- Bouton Jour/Nuit -------------------------------------------------------------*/
.switch {
position: absolute;
display: inline-block;
width: 60px;
height: 34px;
top: 50px;
right: 100px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #802a2a;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #000000;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 30px;
}
.slider.round:before {
border-radius: 100%;
}
.slider:hover {
background-color: rgb(224, 13, 13);
}
/* ------------------------------------------------------------- Menu -------------------------------------------------------------*/
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
left: 0 !important;
}
.menu__btn {
position: fixed;
top: 40px;
left: 25px;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 1;;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #000000;
transition-duration: 0.15s;
}
.menu__btn > span::before {
content: '';
top: -8px;
}
.menu__btn > span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: fixed;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #AAAAAA;
box-shadow: 2px 2px 6px rgb(0, 0, 0);
transition-duration: .25s;
}
.menu__item {
display: block;
padding: 101px;
text-align: center;
color: rgb(0, 0, 0);
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #802a2aa6;
}
}
Une solution simple est de remplacer le margin-top par un padding-top pour le titre de la page :
.page-title { margin-top: 0; padding-top: 0.67em; }est-ce que par hasard tu saurais aussi comment régler le même problème qui apparaît quand on descend la page avec un coup de molette ?
Tu devrais pouvoir corriger ca supprimant le height: 100%; appliqué sur les balises html et body, ou en le remplaçant par un min-height: 100%; pour occuper tout l'espace dans le cas où le contenu serait plus petit que la hauteur de l'écran.
J'ai aussi remarqué que la page scroll tout en bas dès qu'on clique sur le burger-menu, ceci vient surement du fait que le code html de ce menu est placé sous la liste des films dans le document html. A mon avis, il serait mieux que le code html du menu soit placé avant la liste ul.
Par contre j'ai essayé de changer et bricoler le height: 100%; mais ça ne règle pas mon problème :/