28172 sujets

CSS et mise en forme, CSS3

[Résolu] Position: sticky

Bonjour,
alors voilà mon soucis. J'ai une nav en position sticky, mais je n'arrive pas à la centrer par rapport à ma div wrap. Que faire ? Merci pour vos réponses upload/1605013841-81593-2.png upload/1605013851-81593-1.png
Modérateur
Salut,


Je dirais rajouter au nav un 
right: 0;


Ou enlever le 
left: 0;
et mettre 
margin: 0 auto;
à la place.

PS : évite de mettre des screen de ton code c'est absolument frustrant a débuguer et on en peut pas le copier pour tester et aller plus vite... y'a les balise de code exprès pour ça Smiley smile Merci !
Modifié par _laurent (10 Nov 2020 - 16:11)
Merci pour ta réponse, malheureusement ça n'a pas fonctionné. J'ai donc continué à faire des essais et ça m'a amené à cette solution:


nav {
    width: 1500px;
    padding: 6px;
    position: -webkit-sticky;
    position: sticky;
    right: 0;
    top: 7px;
    margin: 0 -6px;
}

Modifié par Don-pasqual (12 Nov 2020 - 10:39)
Modérateur
Salut !
Ah je crois que je vois ce que tu voulais dire du coup. Il y avait 6px de décalage a cause du padding.
Alors pour éviter de faire un margin négatif, soit tu enlève 12px (6px de padding de chaque coté) à la width :
width: 1488px;

mais c'est pas très joli (ouais je suis un peu psychorigide, j'ai quand les nombre tombe juste Smiley lol ), sinon tu rajoutes :
box-sizing: border-box;

qui va spécifier que ton padding est INCLUS dans la width et non en supplément comme c'est par défaut.
nav {
    width: 1500px;
    box-sizing: border-box;
    padding: 6px;
    position: -webkit-sticky;
    position: sticky;
    right: 0;
    top: 0;
}


Bonne journée
Modifié par _laurent (12 Nov 2020 - 10:58)
Meilleure solution
Sujet clos
Aller à