colonnes à la une « bruno de florence

bdf

Bruno de Florence – artiste français installé à londres – pianiste improvisateur – diplômé de musicologie de Goldsmiths College Londres – co-curateur de Lutecium – également photographe – skally et puis bien d’autres encore – à suivre
colonnes à la une
16 août 2009 - catégories: WordPress - mots-clef:
5_fingersun bricolage pour afficher les articles en colonnes.  la plupart des maquettes de WordPress affichent les articles sur une seule colonne.  il existe des solutions permettant de les afficher sur 2 ou 3 colonnes , à la manière d’un magazine – mais elles ne m’ont pas satisfaites du point de vue ésthétique. En effet, elles utilisent une technique d’affichage horizontale (par l’intermédiaire d’un float), ce qui laisse de vilains espaces blancs verticaux, puisque l’alignement vertical du rang suivant sera déterminé par l’article le plus haut.

fig-1

ma solution est simple: afficher les articles verticalement, ce qui permet aux  articles de chaque rang d’être directement sous leurs voisins d’en haut:

chaque colonne est contenue dans sa propre DIV.

Voici comment procéder, en sachant que cette solution est basée sur la technique de la grille 960. Si vous ne connaissez pas, allez sur le site et informez vous.

D’abord, lancer votre query, puis:


<?php $postcount= 0 ?><!--Set post counter to 0-->
<div class="grid_4 alpha"><!-- Open Left Column Div-->
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h2 class="postnormal">
<a href="<?php the_permalink() ?>" rel="bookmark" title="lire <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</h2>
<div class="entry">
<?php the_excerpt(); ?>
</div>
<div class="spacer"></div><!--Clear so articles with high pics dont overlap-->
</div><!--End Div Post-->
<?php $postcount++ ?><!-- Increase Post Count-->
<?php if ($postcount == 5) : ?><!--5th just displayed post so -->
<!--a)Close Left column Div -->
</div>
<!--b)Open Right Column Div -->
<div class="grid_4 alpha">
<?php endif; ?>
<?php endwhile; ?>
</div><!-- Close either Left/Right Div-->

la DIV grid_4 alpha est une classe particulière au système grille 960.  ma technique dispose 10 articles sur 2 colonnes de 5 articles chacune. changez suivant votre gout.  il y a probablement une manière plus élégante de coder, mais pour moi ça marche.  il y a d’autre part des techniques JQuery qui permettent un réglage automatique et optimal du placement de Divs à l’intérieur d’un espace donné, Cf sur Nettuts.

diffuser cet article
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • blogmarks
  • E-mail this story to a friend!
  • MySpace
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
  • Yahoo! Buzz

articles similaires

wordpress and the unix date format

i encountered an interesting fluke in converting Lutecium, a site of which i am co-curator, from HTML to WordPress 2.91.  A psychoanalytical archive, the site has in excess of 1500…

lâche moi les baskets

depuis WP 2.7, une fonction qui permet d’afficher certains articles dit sticky en haut de page a été intégrée. pratique, sauf que les query retournent toujours les articles demandés avec…

ce site

ce site tourne avec WordPress – un logiciel de gestion de contenu également dit blog – ce type de logiciel permet de n’avoir pas à se soucier du côté technique…



les commentaires sont fermés.