Position : sticky pose des problèmes
Résolu
Lecodeurhtmlcss
Messages postés
79
Statut
Membre
-
prosthetiks Messages postés 1309 Statut Membre -
prosthetiks Messages postés 1309 Statut Membre -
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 !
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 -
Mon lien :
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- Merci. Mais après avoir répondu à ces problèmes, ça ne fonctionne toujours pas.
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 -
à 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 -
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... -
Mais c'est bien sûr ! je devais enlever le display:inline de mon html ! Merci beaucoup à tous !
-
le code CSS que tu mets directement dans ton HTML prendra toujours le dessus sur le code présent dans tes fichiers CSS. Encore une fois, essaye de ne jamais mettre de css directement dans ton HTML (on appelle ça le CSS inline, et ce n'est vraiment pas recommandé).
