[Résolu] Rendre le slider pleine page en haut, avec menu par dessus

[Zythom]

Bonjour à tous,

le titre du topic est pas super donc une image vaut mieux que des explications alambiquées. Je cherche à adapter mon slider dans le même style que cette page : https://www.ma-sono.com/

Je pensais l'accrocher dans le displyTop, avec quelques règles css pour l'affichage, mais ça rend pas du tout comme je le veux...

Je vais très certainement devoir allez changer du code, mais je ne suis pas certain de où commencer.

Je suis preneur de toute suggestion

 

Merci

 

Prestashop 1.7.8.3

Thème classic-child

Module carroussel natif version 3.1.0

Edited April 22, 2022 by Zythom (see edit history)

[JulienPct]

Bonjour,

Mettez votre header en position absolue ?

[Zythom]

Je pourrais tester ce soir je vous dirais ce qu'il en est.

Merci

[Zythom]

Bon, je reviens sur ce sujet. Mettre le header en position absolute n'a ps fonctionné.

J'ai donc créé un hook, que je tente de placer à différents endroits dans montheme/templates/_partials/header.tpl et j'ai modifié le fichier php du module pour qu'il s'y greffe.

Le meilleur résultat que j'ai pu obtenir pour l'instant est celui en pièce jointe. Malheureusement, si je ne mets pas une opacity: 50% sur le slider je ne vois plus les autres éléments de mon header 🤷‍♂️

Je pense que je ne joue pas correctement avec les display et position des divers éléments...

Une idée ?

(www.dj-webstore.com/testingsite pour ceux que ça intéresserait...)

 

Merci

Edited April 21, 2022 by Zythom (see edit history)

[Mediacom87]

En mettant le header en position absolute cela fonctionne chez moi

Par contre il faut bien penser à mettre :

top:0;
left:0;
right:0;

Puis il faut jouer avec les couleurs et les opacité mais ce n'est pas le plus simple il est préférable de mettre un pixel transparent pour faire cela.

 

[Zythom]

12 minutes ago, Mediacom87 said:

En mettant le header en position absolute cela fonctionne chez moi

Par contre il faut bien penser à mettre :

top:0;
left:0;
right:0;

Puis il faut jouer avec les couleurs et les opacité mais ce n'est pas le plus simple il est préférable de mettre un pixel transparent pour faire cela.

 

Merci @Mediacom87!

Donc, simplement en accrochant le module dans le displayTop et mettant le header en position absolute, c'est bien ça ?

Bon ben je ré-essaie...

[Zythom]

J'ai dû rater quelque chose... mon slider se loge sous le menu et à côté du logo avec le header en position absolute

[Mediacom87]

Sans url je ne peux en dire plus.

Mais je suis intervenu sur la div complète du header et pas une seule div présente dans le header.

[Zythom]

Voici l'url :

www.dj-webstore.com/testingsite

[Mediacom87]

vote slider étant dans le header alors ce n'est pas possible.

 

[Zythom]

Ah mais je dois le laisser dans le displayHome et juste modifier la position de header ?

Pffff j'avais pas compris 🤦‍♂️

 

Bon ben voilà c'est résolu

Edited April 22, 2022 by Zythom (see edit history)

[Zythom]

Je retire ce que j'ai dit, ce n'est pas tout à fait résolu...

J'ai appliqué une règle width:100% à mon container, mais j'ai toujours deux petites colonnes blanches de chaque côté de la page de mon site (cf capture). J'ai tenté de jouer avec des margin et padding sur plusieurs éléments mais je ne parviens pas à le rendre pleine page (ou alors je me retrouve avec une barre de scroll horizontale en bas d'écran, ce qui fait moyen).

Une idée/piste ?

[Mediacom87]

Normal, le container a un padding

.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

Si je retire cette règle alors plus de vide sur les côtés.

[Zythom]

3 minutes ago, Mediacom87 said:

Normal, le container a un padding

.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

Si je retire cette règle alors plus de vide sur les côtés.

J'avais essayé mais je me retrouve avec un scroll en bas d'écran car la colonne de droite est toujours présente au bout du container 🤷‍♂️

Du coup j'ai tenté d'agir sur le body ou le main, mais ça donne la même chose...

[Mediacom87]

c'ets le row dans la div suivante qui provoque cela d'où les 15px de padding sur le container.

[Zythom]

13 minutes ago, Mediacom87 said:

c'ets le row dans la div suivante qui provoque cela d'où les 15px de padding sur le container.

Encore une fois je me sens con, je dois pas regarder au bon endroit... Je ne vois pas de "row" dans la div suivante (ni plus loin d'ailleurs) 😅

[Zythom]

Yessss ! j'ai trouvé mon erreur ! Merci @JulienPctpour l'idée du absolute, et merci encore @Mediacom87pour le temps que tu as pris ça rend exactement comme je le voulais !

cette fois c'est vraiment résolu 

[Mediacom87]

Tu as mis en résolu mais au final, comment à tu fais ?

[Zythom]

5 minutes ago, Mediacom87 said:

Tu as mis en résolu mais au final, comment à tu fais ?

Alors voici le post que j'ai écrit il y a une heure et qui est toujours en "hidden" (je sais pas pourquoi lol)

Yessss ! j'ai trouvé mon erreur ! Il s'agissait bien de la classe .row de laquelle j'ai retiré les margin. Merci @JulienPctpour l'idée du absolute, et merci encore @Mediacom87pour le temps que tu as pris ça rend exactement comme je le voulais !

cette fois c'est vraiment résolu 

[Zythom]

11 minutes ago, Mediacom87 said:

Tu as mis en résolu mais au final, comment à tu fais ?

J'ai tenté de poster la réponse mais ça plante (peut-être à cause de l'image que j'essaie de joindre).

Bref

Il fallait bien enlever les margin de la classe .row

Merci @JulienPctpour l'idée du absolute, et merci @Mediacom87pour ton temps

C'est donc résolu pour moi

[Zythom]

Ah ben ça y est tout est apparu !! 🤣