Choose your language / Traduction.

Chercher / Search this Blog.

mardi 5 août 2008

Tutoriel : aligner des widgets avec une table.



Au fur et à mesure de la construction de ce blog, je me propose, à l'aide de quelques didacticiels, de vous faire partager la façon dont j'ai procédé pour le concevoir.


Dans un article précédent, je vous parlais de la façon de partager un entête pour y inclure, entre autres choses, des widgets. Entre temps, j'ai été confronté à un nouveau problème. Il s'est avéré que je ne voulais pas mettre dans chaque section un seul mais bien plusieurs widgets. Or, sans précaution c'est à dire en copiant / collant simplement les codes des widgets l'un après l'autre, on s'aperçoit qu'ils apparaissent l'un au-dessus de l'autre au lieu de profiter de l'espace horizontal offert par les sections crées.Voici ce que ça donnait concrètement:




Bien évidemment il n'y a rien de satisfaisant dans cette mauvaise occupation de l'espace. J'ai donc cherché une solution pour aligner les widgets. Celle que j'ai trouvé consiste simplement à créer une table HTML. En voici le code:
 <table>
<tbody>
<tr>
<td>
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=fr&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js"></script>
</td>

<td>
<a href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://generation68.blogspot.com"><img alt="Add to Technorati Favorites" src="http://static.technorati.com/pix/fave/tech-fav-1.png"/></a>
</td>

<td>
<script language="JavaScript" src="http://www.blogcatalog.com/rate-button.js.php?id=4442672" type="text/javascript"></script>

<noscript><a href="http://www.blogcatalog.com" title="Blog Directory, Find A Blog, Submit A Blog, Search For The Best Blogs"><br/>Blog Catalog Blog Directory<br/></a></noscript>
</td>
</tr>
</tbody>
</table>


Je vous ai indiqué en orange le code de la table elle-même, et en jaune vif le code de mes widgets. Il vous suffit donc de remplacer ces derniers par les codes des widgets qui vous intéressent plus directement. Attention à ne pas oublier la balise <tbody></tbody>. C'est l'erreur que j'ai faite avec pour conséquence un affichage défectueux, et j'ai malheureusement mis du temps à le comprendre. Avec l'espoir que ce petit truc vous serve :) 


Si cet article vous a plu ou vous a apporté quelque chose, ou au contraire si vous ne l'avez pas apprécié et que son contenu puisse être complété, merci de laisser un commentaire. C'est par l'intermédiaire de vos interventions que ce blog s'améliorera.

1 commentaire:

  1. Bonjour,

    je viens de vous rendre visite et j'aime beaucoup votre blog c'est simple mais très intéressant.
    j'ai créer un blog sur les jeux de consoles emulé sur pc ça pourra vous intéressé venez me rendre visite
    http://bigtos.blogspot.com et pourquoi pas un échange de liens ? Merci beaucoup et bonne weekend :)

    RépondreSupprimer