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

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom