WordPress : le pied de page du thème swatch ne peut pas coller au bas

Publié par Jean-Michel le

J’utilise un thème wordpress gratuit de woothemes, le thème Swatch. Je ne sais pas si quelqu’un utilise ce thème aussi. J’ai un problème. Lorsque les messages sont courts. le pied de page du thème ne peut pas atteindre le bas. A laissé un morceau d’espace vide. C’est tellement moche. Je veux donc trouver une méthode pour y remédier. J’ai lu des livres sur le CSS et j’ai cherché sur Google plusieurs fois, mais je ne trouve toujours pas de moyen. Donc, j’espère que vous pourrez me donner des suggestions. Mes connaissances en programmation sont si pauvres. Désolé. J’espère obtenir votre réponse.

Lire également:  Wordpress : Thème enfant du thème enfant

Meilleures salutations.

/* 2.1 Containers & Columns */
#wrapper  { background: transparent url(images/wrapper-bg-colourstrip.png) repeat-x left top; padding-top: 5px; } /* Top padding is the height of the colour strip image. */

#main{width:575px;}
#main.fullwidth, .layout-full #main, .col-full {width: 900px; margin:0 auto;}

#sidebar{width:250px;}
#sidebar .secondary { width:140px; }

.entry img { max-width:565px; }
.layout-full .entry img { max-width:890px; }

.col-left { float: left; }
.col-right { float: right; }

.two-col-right #main { float:right; }
.two-col-right #sidebar { float:left; }



    /* 2.6 Footer */
#footer{padding: 30px 0 20px; background: url(images/bg-ripple-footer.png) repeat top left; color:#999;}
#footer p {}
#footer a { color: #ffffff; }
#footer #credit img{vertical-align:middle;}
#footer #credit span{display:none;}

#footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer-widgets.png) repeat top left; padding:10px 0; }
#footer-widgets .block { padding:20px 10px 0 10px; float:left; }
#footer-widgets .col-1 .block { width:100%; padding-left:0; }
#footer-widgets .col-2 .block { width:420px; padding-left: 20px; }
#footer-widgets .col-3 .block { width:270px; padding-left: 16px;  }
#footer-widgets .col-4 .block { width:200px; padding-left: 10px;  }

Solution n°1 trouvée

Cette démo présente une méthode largement utilisée pour implémenter un pied de page collant http://ryanfait.com/sticky-footer.

Lire également:  Wordpress : Comment supprimer le menu installé dans wp-admin par un thème ?

La configuration HTML :

<div class="wrapper">
    <!-- Body Content -->
    <div class="push"></div>
</div>

<div class="footer">
    <!-- Footer Content -->
</div>

C’est le CSS qui le fait :

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's   height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

À défaut, vous pouvez essayer de demander de l’aide à WooThemes.

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *