28172 sujets

CSS et mise en forme, CSS3

Volet coulissant

Bonjour,

je tente d'installer sur mon site le volet coulissant proposé par alsacreations :

https://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html


Tout fonctionne correctement, mais la présence de ce volet "pousse" les autres éléments de ma page (dans le sens de la hauteur). Et à chaque ouverture/fermeture du volet, la mise en page bouge aussi. Ce volet prend sa place dans le flux, et il a bien raison, mais ça ne me convient pas. Y-a-t-il une solution pour qu'il ne bouscule pas les autres éléments de la page, quitte à le faire apparaître avec un z-index bien calculé ?
J'ai cherché avec les mots clés appropriés mais je n'ai pas trouvé la réponse à ce problème.

Aussi, deuxième problème, bien différent, si je mets ce volet en position "fixed", lorsqu'il se mélange au reste de la page, la présence d'autres liens provoque un dysfonctionnement. Le lien "fermer/ouvrir" du volet se mélange avec les autres liens de la page et ne fonctionne plus. Ceci est surtout gênant sur de faibles résolutions, là où il y a moins de place sur la page. Mais là, je crois qu'il n'y a pas de solutions et ce sera à moi de calculer les emplacements pour éviter ce genre de désagrément, ou alors ne pas utiliser le mode "fixed".



Merci de m'éclairer.
Cordialement.
Modérateur
Salut,

Il faut effectivement passer par une position absolute ou fixed (c'est dans l'article que tu as mis).

Si tu as le code en ligne ça serait pas mal qu'on puisse voir ce que ça donne pour mieux t'aider.

Je ne comprend pas super bien ton deuxième soucis mais je pense que c'est une histoire de z-index. Normalement tu ne doit pas avoir de z-index sur le reste de ta page donc un z-index:1; devrait suffire à ce que le volet passe par dessus tout.
_laurent a écrit :
Salut,

Il faut effectivement passer par une position absolute ou fixed (c'est dans l'article que tu as mis).

Si tu as le code en ligne ça serait pas mal qu'on puisse voir ce que ça donne pour mieux t'aider.

Je ne comprend pas super bien ton deuxième soucis mais je pense que c'est une histoire de z-index. Normalement tu ne doit pas avoir de z-index sur le reste de ta page donc un z-index:1; devrait suffire à ce que le volet passe par dessus tout.


Oui, j'ai bien compris pour la position fixed.
Je ne l'ai pas mis en ligne, justement parce qu'il ne me satisfait pas.
N'empêche, ce qui me déplaît, c'est qu'à chaque fermeture ou ouverture du volet, ma page bouge, légèrement, de haut en bas, et c'est très désagréable. Je vois sur des sites des volets qui sortent et entrent sans que rien ne bouge dans la page. C'était là ma question principale.
C'est vrai que sans exemple en ligne, on ne peut pas trop avancer, mais comme ce volet n'apportait pas grand chose à mon site, je ne l'ai pas installé.

Pour la seconde question, il ne s'agit pas de z-index, même si j'ai parlé de cette fonction. Si je mets le volet "fixed" et qu'il se promène sur toute la page pendant la navigation, les liens fermer/ouvrir de ce volet arriveront forcément à chevaucher d'autres liens déjà présent sur cette page, ce qui crée un problème sur les mobiles et avec des gros doigts qui vont appuyer sur deux liens. Et c'est justement sur les résolutions mobile que je voulais l'installer.
Merci pour la réponse.
Sujet clos
Aller à