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.Pour ne pas rater les nouveautés :
Promouvoir cet article sur :
Scoopeo
Tapemoi
Wikio
Diggons
Rejoindre la communauté du blog sur :
:)) 
;)) 
;;) 
:D 
;) 
:p 
:(( 
:) 
:( 
:X 
=(( 
:-o 
:-/ 
:-* 
:| 
8-} 
:)] 
:-t 
b-( 
:-L 
Rodney : la mise en page de ton blog est toute décalée; Tu as ton article deux fois dont une au dessus de ta bannière. Et c'est le même pb sous IE et sous Firefox
Merci Anne pour la remarque. C'est juste que hier, j'essayais de mettre une version 3 colonnes de mon modèle quand il y a eu coupure de connection. Je vais finaliser cela aujourd'hui et espère que cette fois-ci; tout ira bien.
Sinon, merci beaucoup pour l'attention
Salut à toi Rodney, je passais par hazard, juste pour passer un ptit coucou, en ce moment c'est la folie j'ai plus trop de temps,
Pour le livre dont je t'ai parlé j'ai contacté directement mon prof, car je ne le trouve plus en magasin, il va m'en passer et je te recontacte dès que j'ai des nouvelles.
Bonne continuation ++
je suis impatient de tester cette astuce!
J'avais trouvé un équivalent en insérant un tableau à 3 colonnes dans un bloc html, ce qui était assez lourd niveau code
http://css.maxdesign.com.au/listamatic/
voici une liste de menu tout à fait intéressant
bravo gars
je te suis souvent
Je viens d'essayer cette astuce. J'ai un message d'erreur insoluble pour moi
@ Phillipe : Quand j'avais posté cet article , l'astuce fonctionnait bien. Mais, depuis un temps, Blogger a introduit des nouvelles restrictions qui font qu'il devient difficile d'installer certains widgets et mêmes certains modèles.
J'espère que la situation va se décanter d'ici là.
Bonjour Rodney,
Chez moi, ça marche bien, j'ai trois colonnes avant le footer.
Saurais tu comment faire, par contre, pour avoir le bottom et le footer avec un fond noir.
J'ai essayé de bidouiller avec le code "backgroud" du bottom mais ça n'a rien changé.
Merci à toi.
@ Janeair : essaye en effaçant url(http://fresh.lifewg.googlepages.com/separator_green.gif) et en mettant background: #000000 au lieu de background: #031545
C'est ce que j'ai fait, mais nada.
C'est pas grave, c'est pas urgent.
Merci ;)
Salut à toi Rodney :)
Voila quelques jours que je fais du tunning pour mon petit blog d'écriture.
j'ai attéri ici à travers le site de Mr Aziz haddad , Mashable.
Blogueur lorsque j'en éprouve le besoin, je te dis bravo pour tout le travail que tu as fais sur ton blog et de la qualité de son contenu.
Je viens de rajouter ce petit bout de code cité dans ton ton article pour avoir un pied de page en 3 colonne.
Ma page ayant un width de page 780px, le bas de page a dépassé !
J'ai eu alors l'idée d'élargir mon width de page à 855px et réduire le width du bottom à 780, pour faire un petit jeu de couleur !
Et là impossible d'avoir la zone du bottom centré !
j'ai essayé de changer la valeur de :
float: left !important (à right puis center )
sur center la zone bleu ne se voit plus !
J'avoue que je ne comprend plus ! ( par manque de connaissance html sans doute).
je peux déplacer la zone bleu du pied de page à droite, à gauche , mais pas au centre.
Merci pour ta réponse.