Position : sticky pose des problèmes [Résolu]

Signaler
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
-
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020
-
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" :
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

Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020
427
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
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
1
Mon lien :
https://www.transfernow.net/3ewSyH052020

Note : certains fichiers ne sont pas libres de droit !
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020
427
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
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
1 >
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020

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é...
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020
427 >
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020

Est-ce que tu peux détailler ce qui ne fonctionne pas ?
Si j'ouvre ta page html après avoir appliqué les quelques changements que je t'ai noté ci-dessus, j'ai un résultat qui ressemble à ça:


N'est-ce pas le rendu escompté ?
Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020
2
Bonsoir,

j'ai testé ton code : pour moi, il se comporte normalement.
https://labo.doobee.fr/?fixed-sticky
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
1
Merci, mais j'ai l'impression d'avoir quelques problèmes avec ce site... Je ne suis pas sûr de voir ce qui est censé se comporter en position fixed ou sticky... ????
NB : Super site !
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
1
à 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/U0cpyh052020
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020
427
<div style="position:sticky">
<ul style="display:inline">


Evite vraiment de mettre du style css dans tes balises HTML. Tu peux supprimer le style="display: inline", ca va redonner de la hauteur à ta barre de navigation
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
1
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...
Messages postés
29
Date d'inscription
lundi 20 avril 2020
Statut
Membre
Dernière intervention
29 mai 2020
1
Mais c'est bien sûr ! je devais enlever le display:inline de mon html ! Merci beaucoup à tous !
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020
427
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é).