Position d'éléments selon écran

Bonjour,

Premier problème : j'ai un footer, placé a la fin de mon site. Lorsque l'ecran est petit, pas de soucis, mais lorsque l'ecran de l'utilisateur est grand, il y a un soucis, il y a du vide apres.
Comment laisser le footer tout en bas ?
J'ai essaye un position:absolute; bottom:0 mais lorsque l'ecran est petit, ca pose un probleme car le footer est bien en bas, mais il est au dessus de la fin du contenu et le cache.

Second soucis : une div est en milieu de page, et je voudrais que lorsque l'utilisateur scroll vers le bas, des que le haut de cette div touche le haut de la fenetre, elle reste affichee a cette position (beaucoup de sites web l'utilisent a des fins de pub ou affichent des reseaux sociaux comme cela, sur les cotes)

Merci d'avance =)

Edit: exemple ici : http://www.zendesk.com/product/compare (la barre du haut, descendez)
Modifié par LightBen (26 Aug 2012 - 15:49)

Up... =)

Re up ?

LightBen a écrit :
Bonjour,

Premier problème : j'ai un footer, placé a la fin de mon site. Lorsque l'ecran est petit, pas de soucis, mais lorsque l'ecran de l'utilisateur est grand, il y a un soucis, il y a du vide apres.
Comment laisser le footer tout en bas ?
J'ai essaye un position:absolute; bottom:0 mais lorsque l'ecran est petit, ca pose un probleme car le footer est bien en bas, mais il est au dessus de la fin du contenu et le cache.

Second soucis : une div est en milieu de page, et je voudrais que lorsque l'utilisateur scroll vers le bas, des que le haut de cette div touche le haut de la fenetre, elle reste affichee a cette position (beaucoup de sites web l'utilisent a des fins de pub ou affichent des reseaux sociaux comme cela, sur les cotes)

Merci d'avance =)

Edit: exemple ici : http://www.zendesk.com/product/compare (la barre du haut, descendez)

Salut,

Pour ton premier problème, ça serait pas mal si tu pouvais nous donner un exemple, sinon, tu peux essayer la technique du sticky footer, avec un div .push.

Pour ton second problème, tu as une première solution qui n'est pas actuellement acceptable car pas de support (sauf Chrome et latest Webkit), qui est la position:sticky (je l'ai écrit ce matin, tu as de la chance !). Tu as ici une alternative jQuery qui te permet d'obtenir le même résultat.

C'est exactement tout ce que je voulais.

Un énorme merci =)

Dommage que position:sticky ne soit pas encore répandu... ça m'a d'ailleurs fait un choc de voir que meme mon propre browser etait pas dans le coup lol.

LightBen a écrit :
C'est exactement tout ce que je voulais.

Un énorme merci =)

De rien

LightBen a écrit :
Dommage que position:sticky ne soit pas encore répandu... ça m'a d'ailleurs fait un choc de voir que meme mon propre browser etait pas dans le coup lol.

Le mien non plus, j'utilise Firefox 16.0, mais c'est pas grave. Si sticky devient officiel, FF le supportera aussi. Y a beaucoup de trucs que seul Webkit supporte, c'était le cas avec les transformations 3D en CSS3 à un moment, mais FF se met rapidement dans le coup, en général.

Par contre je viens d'installer Google Chrome Canary (Version 23.0.1254.0 donc superieure a la 23.0.1247.0 requise au minimum) et le sticky ne fonctionne pas (quand j'analyse le code, il affiche bien "propriete CSS invalide"...)

?

Weird ... j'ai pas essayé chez moi, parce que je suis pas sur le channel Canary de Chrome, mais je vais essayer du coup. Attends un peu.

Je viens d'installer la dernière Canary de Chrome (la même que toi), et le sticky marche parfaitement. Tu es bien sur la demo dont j'ai mis le lien dans mon article ?

Finalement, ca marche. En fait, apres de nombreuses recherches dans mon fichu code, ma div sticky etait a l'interieur d'une div non sticky et ca devait poser probleme... ou alors je me suis emmêlé les pinceaux dans mon code CSS avec les associations de classe...

Ça marche, merci beaucoup =)

PS : si quelqu'un pouvait jeter un coup d'oeil a mon autre topic http://forum.alsacreations.com/topic-4-63447-1-Rollover-sur-une-liste-et-rollover-du-first-child.html#lastofpage ... merci =)