Salut !

Je suis en train de réaliser un site web pour une amie et j'ai un problème de position d'élement.

Je vous met le lien, le site n'est pas fini : http://mylittlecanada.fr/

Vous pouvez voir ici que les flèches jaunes sont bien, pour chaque page, en bas du navigateur de l'utilisateur. Pour ce faire, j'applique un padding-top, ce qui ne va pas du tout car mes éléments sur ma page ne sont pas cliquable.

J'ai essayer avec des positions absolutes etc mais impossible d'arrivé à un résultat en css.

Peut être du JS ?

Merci

4 réponses


Spiker
Réponse acceptée

Il faut savoir que pour une position absolute, il faut que sont parent soit en position "relative", pour que ton absolute se fasse en fonction du parent, dans le cas contraire, il prendra ton body en tant que référence .

Il te suffit de rajouter une position:relative à ta section qui englobe ton .scroll-down puis
de mettre une position:absolute; bottom: 0; left: 43%; à ton .scroll-down.

:)

Romano83
Réponse acceptée

Salut,
il faut que tu mettes tes sections en position relative et ensuite, au niveau de tes flèches de navigation, tu mets quelque chose du genre ;

position: absolute;
bottom : 0;
left : 43%; // Pour la placer au centre de l'image

Par contre, en testant, la div bg-cover se retrouve sur l'ensemble de ta page et pas uniquement sur ta première section ;)

Edit : Spiker a été plus rapide que moi ^^

iiNku
Auteur

Merci à vous deux. C'est exactement ce que je cherchais.

Pour ma culture perso, pourquoi left: 43% ?

Tout simplement pour le centrer plus ou moins au milieu de l'écran :)