Contenido de una sección a dos columnas simétricas

Un método para ahorrar espacio distribuyendo artículos o subsecciones consiste en desplegar los contenidos en dos columnas simétricas.
Este sencillo código puede ser insertado en un esqueleto para tal fin.

En la portada de Tintero, bajo el esquema de los esqueletos con Colewebs, utilizamos una tabla que divide simétricamente los contenidos de una sección específica.

¿Qué quiere decir esto?

Por ejemplo, en la portada mencionada, la sección “Semblanzas memorables” se divide en dos, ocupando un menor espacio que si viéramos el listado de artículos “de corrido”.

He aquí un símil de este pedazo de código, que se puede insertar en otros esqueletos, con algunas anotaciones puntuales.

Sección -> Artículos desplegados a 2 columnas
Sección -> Artículos desplegados a 2 columnas
Portada de Tintero.Org; obviando un pequeño error en el css (visible en la ilustración) , los artículos de la sección se dividen en dos columnas simétricas
<!-- Se abre la tabla completa -->
<table border="0">
<tbody>
<tr>

<!-- Se abre la primer columna, con su respectivo estilo -->
<td style="border-right: 1px groove rgb(248, 248, 248); padding-right: 1em;" valign="top" width="50%">
	

<B_personajes1>

<!-- Abre el bucle de la primer columna. Saldrán la mitad de los 6 artículos  que pedimos en en bucle,  es decir, los tres primeros -->

	<BOUCLE_personajes1(ARTICLES){id_rubrique=22}{par date}{inverse}{0,6}{1/2}>

<!-- acomoda un logotipo reducido a la derecha -->
[<div class="logo_derecha">(#LOGO_ARTICLE_RUBRIQUE|right||reduire_image{45,45})</div>]
<strong>[<a href="#URL_ARTICLE">(#TITRE)</a>]</strong>

<br />[(#DESCRIPTIF|couper{100})]

<!-- El texto descriptivo. Ojo: aquí el filtro couper nos ayuda a tener un número similar de caracteres en el descriptivo, lo cual hace que no se descuadre -->
<br />
</BOUCLE_personajes1>
<br />
	</B_personajes1>
	
</td>


<!-- Ahora, en la columna siguiente, el mismo código dará los resultados faltantes, es decir, la segunda mitad -->

<td style="padding-left: 1em;" valign="top" width="50%">

	<B_personajes2>
	<BOUCLE_personajes2(ARTICLES){id_rubrique=22}{par date}{inverse}{0,6}{2/2}>

<div class="logo_izquierda">(#LOGO_ARTICLE_RUBRIQUE|left||reduire_image{45,45})</div>]<strong>[<a href="ver.php3?id_article=#ID_ARTICLE">(#TITRE)</a>]</strong>

<br>[(#DESCRIPTIF|couper{100})]
</BOUCLE_personajes2>
<br>
	</B_personajes2>
<br>	
	
	</td>
</tr>
</tbody>
</table>
<!-- Fin de la tabla -->
Sección -> Subsecciones
Sección -> Subsecciones
En la portada de Viento de Libertad se despliegan las subsecciones en dos columnas que dependen de una sección superior.

2Una sección y sus subsecciones2

En la portada de Viento de Libertad (sitio que documenta mediante fichas los casos de presos políticos en México), el despliegue es similar, con la diferencia de que el resultado son subsecciones que se desprenden de una sección principal.

<p align="center" style="font-weight: bold; font-size: 18pt; font-variant: small-caps;">Fichero por años y por casos</p>

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD WIDTH=330 ALIGN="right" VALIGN="top">

<B_directorio>
<BOUCLE_directorio(RUBRIQUES) {id_rubrique=1}>
	<B_sous_rubriques>
	
	<FONT FACE="arial,helvetica,sans-serif" SIZE=3>

	<BOUCLE_sous_rubriques(RUBRIQUES){id_parent}{par titre}{1/2}>
	<BR><FONT FACE="arial,helvetica,sans-serif" SIZE=1>
	<B>[<A HREF="#URL_RUBRIQUE"><FONT COLOR="#000000">(#TITRE|majuscules)</FONT></A>]</B>

		<BOUCLE_art_rub(RUBRIQUES){id_parent}{par titre}>
		<BR><IMG SRC="puce.gif" BORDER=0> <A HREF="#URL_RUBRIQUE"[ TITLE="(#DESCRIPTIF|textebrut|attribut_html)"]>#TITRE</A>

		</BOUCLE_art_rub>
	</FONT>
	<BR>
	</BOUCLE_sous_rubriques>

	</FONT>
	<BR>
	
	
	</B_sous_rubriques>
	
	
</TD>

<TD WIDTH=8 ROWSPAN=2><img src="NAVPICS/rien.gif" alt="" width="8" height="1" border="0"></TD>
<TD WIDTH=8 ROWSPAN=2 BACKGROUND="NAVPICS/point.gif"><img src="NAVPICS/rien.gif" alt="" width="8" height="1" border="0"></TD>
<TD WIDTH=8 ROWSPAN=2><img src="NAVPICS/rien.gif" alt="" width="8" height="1" border="0"></TD>
<TD WIDTH=320 ROWSPAN=2 VALIGN="top">

	<B_sous_rubriques2>
	<FONT FACE="arial,helvetica,sans-serif" SIZE=3>

	<BOUCLE_sous_rubriques2(RUBRIQUES){id_parent}{par titre}{2/2}>
	<BR><FONT FACE="arial,helvetica,sans-serif" SIZE=1>
	<B>[<A HREF="#URL_RUBRIQUE"><FONT COLOR="#000000">(#TITRE|majuscules)</FONT></A>]</B>

	
	<B_art_rub2>
	<BOUCLE_art_rub2(RUBRIQUES){id_parent}{par titre}>
		<BR><IMG SRC="puce.gif" BORDER=0> <A HREF="#URL_RUBRIQUE"[ TITLE="(#DESCRIPTIF|textebrut|attribut_html)"]>#TITRE</A>
		</BOUCLE_art_rub2>
</B_art_rub2>

	</FONT>
	<BR>
	</BOUCLE_sous_rubriques2>



	</FONT>
	<BR>	
	
	</B_sous_rubriques2>
	
</TD></TR>
</TABLE>

	<TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=0>
		<TR WIDTH=100%>
		<TD WIDTH=100% BACKGROUND="NAVPICS/point.gif"><img src="NAVPICS/rien.gif" alt="" width="8" height="8" border="0"></TD>
		</TR></TABLE>



</BOUCLE_directorio>
</B_directorio>

Debo confesar que no recuerdo exactamente dónde encontré este código, pero sinceramente espero sea de utilidad.

updated on 14 August 2009

Discussion

Une discussion

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom