Problème bouton CSS
Fermé
Ipoote
Messages postés
45
Date d'inscription
dimanche 23 septembre 2018
Statut
Membre
Dernière intervention
21 mai 2023
-
19 avril 2022 à 20:40
Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023 - 20 avril 2022 à 16:55
Ipoote Messages postés 45 Date d'inscription dimanche 23 septembre 2018 Statut Membre Dernière intervention 21 mai 2023 - 20 avril 2022 à 16:55
A voir également:
- Problème bouton CSS
- Réinitialiser chromecast sans bouton - Guide
- Bouton reinitialisation pc - Guide
- Bouton marche arret i o - Forum Word
- Hard reset samsung sans bouton home - Guide
- Bouton on/off comment savoir ✓ - Forum Matériel & Système
1 réponse
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
20 avril 2022 à 09:14
20 avril 2022 à 09:14
Bonjour,
Tes extraits de code ne permettent pas de reproduire ton problème. Il faudrait voir le code html et css complet.
Sinon, utilise l'outil Inspecteur d'élément dans les outils de développement de ton navigateur pour mieux analyser le css appliqués sur les éléments de ton html.
Tes extraits de code ne permettent pas de reproduire ton problème. Il faudrait voir le code html et css complet.
Sinon, utilise l'outil Inspecteur d'élément dans les outils de développement de ton navigateur pour mieux analyser le css appliqués sur les éléments de ton html.
Modifié le 20 avril 2022 à 14:13
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;
}
}
20 avril 2022 à 15:00
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; }20 avril 2022 à 16:05
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 ?
Modifié le 20 avril 2022 à 16:36
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.
20 avril 2022 à 16:48
Par contre j'ai essayé de changer et bricoler le height: 100%; mais ça ne règle pas mon problème :/