Bas de page à 3 colonnes

Vous m’excuserez de vous avoir laissé ces quelques jours sans rien publier, mais J’avais eu des petits problèmes avec l’électricité et la disquette que j’utilisais. Je vous écris rapidement ce petit billet pour ne pas vous laisser affamé une journée de plus.

Nous allons voir comment mettre rapidement un bas de page à 3 colonnes.

1. Mettre le code suivant juste avant la balise ]]></b:skin>

#bottom {

clear: both;

float: left !important;

float: none;

width: 855px;

height: 100%;

margin: 0;

padding: 0;

background: #031545 url(http://fresh.lifewg.googlepages.com/separator_green.gif) repeat-x 0 0;

border-top: 20px solid #fff;

font-size: 0.9em;

text-align: left;

color: #fff;

}

#bottom-left,

#bottom-mid,

#bottom-right {

width: 30%;

padding: 20px 0 20px 20px;

float: left;

}

#bottom h2 {

margin: 0 0 10px 0;

padding: 0 8px;

font-size: 1.6em;

color: #fff;

}

#bottom h2 span {

color: #508fd2;

}

#bottom ul {

margin: 0;

padding: 0;

list-style-type: none;

border-top: 1px solid #031c5d;

}

#bottom ul li {

line-height: 26px;

border-bottom: 1px solid #031c5d;

}

#bottom ul li a {

display: block;

padding: 0 10px;

color: #fff;

text-decoration: none;

}

#bottom ul li a:hover {

background: #010b32;

}

2. Ajouter le code html suivant juste avant la balise <div id='footer'>

<div id='bottom'>

<!-- Bottom Left -->

<div id='bottom-left'>

<b:section class='bottom-content' id='bottomleft-content'>

<b:widget id='HTML11' locked='false' title='' type='HTML'/>

</b:section>

</div>

<!-- Bottom Mid -->

<div id='bottom-mid'>

<b:section class='bottom-content' id='bottommid-content'>

<b:widget id='HTML12' locked='false' title='' type='HTML'/>

</b:section>

</div>

<!-- Bottom Right -->

<div id='bottom-right'>

<b:section class='bottom-content' id='bottomright-content'>

<b:widget id='HTML14' locked='false' title='' type='HTML'/>

</b:section>

</div>

</div> <!-- end of #bottom -->

3. Enregistrer le modèle et aller sur “éléments de la page” pour voir les nouveaux la nouvelle section à 3 colonnes au bas de la page.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.