Position : sticky pose des problèmes
Résolu
Lecodeurhtmlcss
Messages postés
76
Date d'inscription
Statut
Membre
Dernière intervention
-
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
Bonjour, je programme un site en html/css et je rencontre un problème avec l’attribut "sticky".
Pour l’instant, mon code css comprend la position "fixed" :
Mais dès que je met en mode "sticky", ma barre devient tout riquiqui ! (voir photo)
Je pense que je devrais mettre une hauteur en pixel dans "height", mais ça ne change rien !
（；´д｀）ゞ
J’espère que vous saurez répondre ! Merci beaucoup d'avance !
Pour l’instant, mon code css comprend la position "fixed" :
ul {
display:table;
border: 1px solid #555;
margin: 10px;
padding: 10px;
width: 97%;
height: 10%;
background-color: #f1f1f1;
top: 0; left: 0;
position: fixed;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
0 3px 5px rgba(0, 0, 0, .2),
0 5px 10px rgba(0, 0, 0, .2),
0 20px 20px rgba(0, 0, 0, .15);
}
Mais dès que je met en mode "sticky", ma barre devient tout riquiqui ! (voir photo)
Je pense que je devrais mettre une hauteur en pixel dans "height", mais ça ne change rien !
（；´д｀）ゞ
J’espère que vous saurez répondre ! Merci beaucoup d'avance !
A voir également:
- Css position sticky
- Ma position - Guide
- Suivi position google - Guide
- Partage position whatsapp - Guide
- Position gps - Guide
- Comment envoyer sa position par sms - Accueil - Téléphones
7 réponses
Hello,
est-ce que tu as une version de ta page en ligne afin que l'on puisse regarder ton code dans son ensemble ?
Difficile de t'aider uniquement avec ce bout de CSS
est-ce que tu as une version de ta page en ligne afin que l'on puisse regarder ton code dans son ensemble ?
Difficile de t'aider uniquement avec ce bout de CSS
Mon lien :
https://www.transfernow.net/files/?utm_source=3ewSyH052020&utm_medium=&utm_content=en
Note : certains fichiers ne sont pas libres de droit !
https://www.transfernow.net/files/?utm_source=3ewSyH052020&utm_medium=&utm_content=en
Note : certains fichiers ne sont pas libres de droit !
Tu peux déjà retirer le "height: 200px", ça permettra à ton élément de prendre automatiquement la bonne hauteur en fonction de son contenu.
Le conteneur (actuellement <span class= "banner">) de ton <ul> devrait être un "div" plutôt qu'un "span".
Je te conseille ensuite de laisser tomber le "display: table" et de plutôt faire ton menu en "display: flex".
Tu peux facilement apprendre le fonctionnement de cette propriété avec https://flexboxfroggy.com
Quel est l'intérêt d'avoir défini une hauteur de 100px à ton élément .texte_barre ? C'est lui qui cause la disparition de ta navigation une fois cette hauteur dépassée et qui empêche le fond de ton texte d'être blanc sur toute la hauteur de celui-ci
Le conteneur (actuellement <span class= "banner">) de ton <ul> devrait être un "div" plutôt qu'un "span".
Je te conseille ensuite de laisser tomber le "display: table" et de plutôt faire ton menu en "display: flex".
Tu peux facilement apprendre le fonctionnement de cette propriété avec https://flexboxfroggy.com
Quel est l'intérêt d'avoir défini une hauteur de 100px à ton élément .texte_barre ? C'est lui qui cause la disparition de ta navigation une fois cette hauteur dépassée et qui empêche le fond de ton texte d'être blanc sur toute la hauteur de celui-ci
Merci. Mais après avoir répondu à ces problèmes, ça ne fonctionne toujours pas.
Pire : Pour simplifié, j'ai mis
NB : On m'a déjà conseillé
Pire : Pour simplifié, j'ai mis
"fixed"dans mon html, et ça a fonctionné… mais quand j'ai remplacé par "sticky", ça n'a pas fonctionné !
NB : On m'a déjà conseillé
display:flex, mais j'ai vite arreté, puisque que ça ne fonctionné...
Bonsoir,
j'ai testé ton code : pour moi, il se comporte normalement.
https://labo.doobee.fr/?fixed-sticky
j'ai testé ton code : pour moi, il se comporte normalement.
https://labo.doobee.fr/?fixed-sticky
à vrai dire, ce code commence à avoir de sérieux problèmes. Maintenant, je ne peux même plus changer les attributs de hauteur ! ????
Si quelqu'un réussi :https://www.transfernow.net/files/?utm_source=U0cpyh052020&utm_medium=&utm_content=en
Si quelqu'un réussi :https://www.transfernow.net/files/?utm_source=U0cpyh052020&utm_medium=&utm_content=en
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
EDIT : J'ai créé une nouvelle discussion qui pose le problème beaucoup plus clairement !
→Petit lien←
PS : Non, je n'ai aucun lien avec un quelconque parti politique ;-) j'ai pris la page wikipédia la plus longue...
→Petit lien←
PS : Non, je n'ai aucun lien avec un quelconque parti politique ;-) j'ai pris la page wikipédia la plus longue...
