positionnement Pied de page avec CSS et 960gs

Question

Je suis nouveau à faire avec mises en page CSS (je ne l'ai pas fait de conception web pour très longtemps) et je ne peux pas à comprendre comment obtenir le pied de page de la page pour afficher au fond de la façon dont je veux. -Affiche au bas du contenu si le contenu dépasse la taille verticale de la fenêtre d'affichage -Affiche au bas de la fenêtre si la fenêtre d'affichage dépasse la taille verticale du contenu.

Le code que j'utilise ensembles le pied de page en bas de la fenêtre, mais si je dimensionner le navigateur pour être plus courte que le contenu, il couvre tout le contenu.

code: <div style="background-image:url(footer_bg.jpg); background-position:bottom; background-repeat:repeat-x; height:235px; width:100%; bottom:0px; position:absolute;"></div>

Mon objectif principal est d'avoir un pied de page avec du texte et un gradient de fond (à savoir les informations de l'entreprise, coordonnées.). J'aimerais que l'arrière-plan du pied de page couvre la largeur de la page, mais je ne sais pas si je peux le faire avec les divs de 960 g.

EDIT: Je voudrais faire cela avec tous les CSS, pas de scripts si possible.
J'ai trouvé un bon code pour obtenir un pied de page CSS à ce lien:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Le principal problème que je rencontre en ce moment dans la mise en œuvre que par 960gs est le float:left; dans le 960gs CSS. Il semble que cela empêche mes grilles d'étendre verticalement le parent <div>. Cependant, si je retire le flotteur, 960gs semble ne pas fonctionner aussi bien.

Ce qui suit est le lien avec le flotteur retiré. La colonne «a» est grid_7 suffix_1 et la colonne «b» devrait être grid_4 dans le même container_12. En d'autres termes, ils devraient être l'un à côté de l'autre.

Answer 1

Jetez un oeil à CSS Sticky Footer. C'est fait en html/css pur sans script du tout. Il y a une explication de la façon de le faire fonctionner avec 960gs au signalkraft.com.

Espérons que cela aide.

Answer 2

En CSS, il n'y a pas la capacité "if/else". C'est là les langages de script entrent en jeu.

Levez les yeux vers JQuery. En JQuery, vous pouvez saisir un élément avec le pied de page #id et dire quelque chose comme:

$('#footer').addClass('bottomView'); 

« bottomView » pourrait faire en sorte que l'élément avec les bâtons de bas de page d'identification au bas de la fenêtre. Ensuite, lorsque l'utilisateur défile, que JQuery peut surveiller, il peut vérifier s'il veut changer la classe en 'bottomContent'.

Ensuite, dans votre css, viennent des classes bottomView et bottomContent qui placent l'élément où vous voulez.

Bonne chance.