Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: CSS - footer collé au bas de page, puis qui monte avec quand on arrive en bas  (Lu 8008 fois)

nonoch

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 19
    • Voir le profil
    • E-mail

Salut à toutes et à tous,

j'ai une petite question pour vous :

j'aimerai réaliser pour un site un bandeau de footer qui serai fixe en bas (donc toujours visible), mais qui une fois que l'on descendrai au plus bas de la page, le footer monterai, pour afficher la totalitée de son contenu

j'espère que mes explications sont claires  ???,


donc, est il possible de gérer ça avec uniquement du css, et si oui, une idée ou une piste sur le code a écrire ?

Merci d'avance pour votre aide ou vos conseils
IP archivée
Un clavier AZERTY en vaut deux ...

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail

Bonsoir.
Si je comprends bien, lors de la navigation, il ne serait affiché qu'une partie de footer et elle serait fixe en bas de page.
Seulement lorsqu'on arriverait en bas de page (au maximum on va dire) alors le footer remonterait afin de laisser apparaitre le reste de son contenu ?

Je ne crois pas que ce soit gérable qu'avec les CSS. Peut-être un javascript mais je ne connais rien qui puisse faire ça.
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

metaroid

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 187
    • Voir le profil
    • Portfolio infographiste metaroid

il n'y a pas vraiment d'intérêt à faire ce que tu veux .. c'est pas très cohérent, de plus cela va demander de faire pas mal de tests et je ne suis pas sûr que tu puisses obtenir quelques choses de correctes sur la plupart des navigateurs. Je dirais cependant que tu peux avoir ton footer en fixe et  c'est sur le survol de ta div footer que tu fais un événement over en javascript pour déployer celui-ci vers le haut.
IP archivée
Less is more

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail

Effectivement, metaroid à raison et le "over" peut, lui, être géré par CSS sans javascript.
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

nonoch

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 19
    • Voir le profil
    • E-mail

il n'y a pas vraiment d'intérêt à faire ce que tu veux .. c'est pas très cohérent,
bah, en fait, c'est pas parce que TU n'y vois pas d’intérêt ou de cohérence qu'il n'y en a pas pour d'autres...

mais juste une petite précision sur le fait de vouloir faire ca :

quand vous prenez l'utilisateur lambda d'internet (car il n'y a pas que des geek sur le net) :

- vous faite un footer fixe, puis qui se développe au passage de la souris, eh bien vous remarquerez qu'il n'aura pas le réflexe d’aller passer sa souris dessus pour voir les info qu'il contient (c'est du vécu, pas des suppositions)

- vous faite un footer fixe, puis en arrivant a la fin de la page, il se développe, et la la lecture des informations est alors dans le schéma classique pour cet utilisateur.



bref, j'ai déja géré un footer fixe puis qui se dévelloppe au passage de la souris (en css pur, pas besoin de js obligatoirement) mais j'ai rencontré le probléme sur le fait que les info du footer n'étais que très peu consultées. (et aprés avoir fait un sondage, j'ai compris le problème)
alors, oui, j'aurai pu mettre une phrase d'accroche pour dire de passer la souris sur le footer, mais c'est bien dommage de gacher un peu son design pour ca...

j'aimerai vraiment trouver un moyen de le faire, je l'ai déja vu sur un site, mais je n'arrive pas a le retrouver


pour la petite explication, la partie fixe de mon footer ferai je pense 20 à 30 px maxi, (avec un léger dégradé par dessus pour faire un effet d'apparition du texte au moment du défilement.)

je sais que je veux faire qqch de compliqué, et surement au dessus de mes capacités, mais bon, si on ne tente pas, on ne progressera jamais
IP archivée
Un clavier AZERTY en vaut deux ...

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail

Bonsoir.
Il te faudra trouver un javascript ou le faire écrire dans ce cas car seulement en CSS c'est impossible.
Si tu retrouves le site où tu as vu ça, il suffit d'en lire le code source pour trouver le script ou au moins son nom.
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

metaroid

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 187
    • Voir le profil
    • Portfolio infographiste metaroid

Non c'est une question de logique intrinsèque au langage web, saupoudré d'expérience utilisateur..
En tout cas je vais essayer de mon côté.. ça m'amuse ce genre de bêtise

.. Merci Eddy ;)
« Modifié: août 24, 2011, 17:47:10 pm par metaroid »
IP archivée
Less is more

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail

metaroid, je pense que tu as oublié ton message ci-dessus (ou dessous selon ton mode d'affichage) !
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

metaroid

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 187
    • Voir le profil
    • Portfolio infographiste metaroid

J'ai fais un test qui fonctionne avec jQuery sur l'événement scroll ... tu verras que ça pose un problème que je ne sais contourner pour l'instant; chaque séquence de molette sont stockées puis vérifiées, cela prend donc du temps à la fonction de s'apercevoir que la page est en bas (plus la scroll est importante plus ça pourrait mettre de temps) .. bref je te laisse regarder, ça peux déjà te faire avancer. A++ tard
IP archivée
Less is more

nonoch

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 19
    • Voir le profil
    • E-mail

Merci pour la piste, je m'en vais regarder ca.

note a moi même : faut vraiment que je me mette a Js...
IP archivée
Un clavier AZERTY en vaut deux ...
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum