'Full width' position with relative position after

Hey Cedric,

Alors que j'avais commencé à te rédiger les spec d'un 'Slideshow ++' basé sur ce que j'avais fait développer par une équipe Canadienne en JS et PHP dans une autre vie, je suis tombé sur le Revolution Slider de UniteCMS.

Ce slider manipule des layers de façon 'ergonomique' et permet de créer à peu de frais des slideshows hyper dynamiques, qui ne ressemblent plus tout à fait à des slideshow (si tu utilises les layers + la transparence des .png).

Ils ont vraiment performé...

Bon, il manque quelques features, et certains aspects de design d'interface qui auraient pu être un peu plus malins, mais globalement c'est un slider au top. Si ça t'intéresse un jour de développer un tel plugin pour SlideShow CK fait moi signe J'ai encore quelques éléments dans les cartons qu'ils n'ont pas, et qui peuvent mettre leur slider en difficulté

Bref. J'ai été très content de tomber sur ce slider.

Sauf que je n'arrive pas à faire un truc proprement:

--> Créer un template via Template Creator qui permet d'avoir leur module en 'Full Width' dans une position (qui prenne toute la largeur du browser), mais qui permette aussi d'avoir d'autres positions disponibles... Ils ont une option 'Full Width' en plus de 2 autres positions, mais qui requiert si j'ai bien tout compris que la position qui accueil ledit slider soit aussi en full width.

Leur version:
www.unitecms.net/joomla-extensions/unite...ider-full-width-demo

Ce que moi j'ai fait pour l'instant (c'est work in progresse pour le look) :
www.couleurweb.com/?brou=1

En fait, j'ai mis une position en 'Absolute' et 'width:100%', et du coup j'ai bien la Full Width recherchée, mais les positions en dessous ne tenant plus compte de cette position, se superposent... Je ne sais pas comment revenir / rester dans le flow de position 'Relative'....

Du coup pour mon menu du bas, j'ai créé une autre position 'Absolute' avec

bottom: 0px !important
left: 0px !important

...pour que cette position soit collé en bas.

Mais c'est loin d'être idéal...
Comment puis-je faire pour avoir le même résultat qu'eux dans l'actuel TC?

Merci d'avance pour tes conseils.
(Je peux te donner un accès à l'Admin si tu veux).


Merci!
D.

:huh:

Hello Cedric.

J'ai essayé d'avancer sans toi sur ce problème.
Il n'y a pas de raisons que Template Creator m'empêche de faire ce que je veux!

J'ai donc essayé plusieurs choses.

Ce qui m'a donné le meilleurs résultat: utiliser l'extensions 'GiBi Add CSS' qui permet de créer des modules qui assignent des CSS à un élément donné et pas à tout le site. En l'occurence, cela permet de remplacer la CSS principal de la Homepage... seulement sur le homepage.

J'ai donc commencé par enlever mes 'position: absolute' dans mon template via Template Creator.
J'ai bien mis des...

...dans les CSS des 2 positions affichées sur la homepage (le slideshow et le menu).

Puis j'ai définit pour la CSS de la Homepage via 'GiBi Add CSS' le code suivant:

CA permet de changer la taille du wrapper principal, de mettre un fond de body différent des autres pages, et de masquer la position 'main' en annulant sa couleur de background. Tout ça seulement sur la homepage donc.

Et là, MIRACLE : ma homepage affiche bien sur toute la tailel de l'écran mon slideshow pourtant en position relative, et le menu se colle ensuite en dessous de lui parfaitement, ce qui est impossible en 'Absolute'.

Je suis donc bien dans un flow 'relatif', permettant une saine gestion des positions, mais... en fullwidth!

MAIS j'ai eu un problème: ça ne fonctionnait que si la fenetre du browser était d'une taille respectable.
Si on retaillait la fenêtre du navigateur, le mobile.css prenait le relais, redéfinissait le wrapper principal suivant les tailles de la fenêtre. Du coup mon trick ne fonctionnait plus.

J'ai tenté:
1°) Desactiver l'option 'Responsive' dans la gestion des templates: c'est la pire des solutions. Tout devient statique, c'est la cata.

2°) Modifier, voir supprimer la mobile.css: programmer mon 'Responsive' comme je le veux dans Template Creator. Puis, via FTP, j'ai passé tous les 'wrapper' du 'mobile.css' à 'wrapper=100% !important'.

Et là...
Ca m'a l'air de fonctionner pas mal!!

Le seul problème pour l'instant, mais j'ai peur de tomber sur d'autres side-effects, c'est que je suis obligé de re-modifier le 'mobile.css' dès que je génère une nouvelle version du template via Template Creator'. Pas très pratique, mais faisable si c'est le seul side-effect...

Y'a t'il une solution plus académique?
Que penses-tu de ma solution?

J'ai choisi Template Creator parce qu'il permet de faire ce que l'on veut, sans vrais grosse connaissance de code. Du coup, j'ai du mal à ne pas pouvoir faire ce que je veux... Là, j'ai pasé un temps déraisonnable sur ce problème, sans être certain de ma solution... :dry:

Est-ce que ça aurait aussi été plus simple sur la version 3 de TC? :woohoo:

Merci d'avance pour ton opinion, voir de ta solution alternative (j'ai un peu peur de tomber sur des loups à cause de mes modifs).

Merci d'avance, car ma 'science' s'arrête là.

D.

salut
honnetement j'avoue ne pas comprendre grand chose à ton souci.
J'ai compris que tu veux faire du full width, pourtant j'ai déjà dit que la v2 n'est pas prévue pour ça, mais qu'on peut contourner en utilisant les margins et paddings et overflow comme dans ma video :


maintenant c'est sur que la v3 de template creator permet de créer des design à largeur fluide et full width
quant à ta solution, tu peux désactiver le responsive dans les optoins du template et mettre tes css dans le fichier cutom.css prévu à cet effet, là encore à voir dans la video
CEd