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
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
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.

Discussion

Une discussion

Comentar este artículo

¿Quién es usted?
  • [Conectarse]

Para mostrar su avatar con su mensaje, guárdelo en gravatar.com (gratuit et indolore) y no olvide indicar su dirección de correo electrónico aquí.

Añada aquí su comentario

Este formulario acepta los atajos de SPIP, [->url] {{negrita}} {cursiva} <quote> <code> y el código HTML. Para crear párrafos, deje simplemente una línea vacía entre ellos.

Añadir un documento

Seguir los comentarios: RSS 2.0 | Atom

Dernière modification de cette page le 14 de agosto de 2009