Idiomas del sitio : [ar] [en] [es] [fr] [it]

À propos de SPIP

SPIP

SPIP Blog

SPIP Démo

SPIP Doc

SPIP Forums

SPIP Herbier

SPIP Irc

SPIP Party

SPIP Sedna

SPIP Test-GrmlEU

SPIP User

SPIP Zone

Portada del sitio > Esqueletos

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

Miércoles 2 de agosto de 2006, por Prom. Última actualización Jueves 27 de julio de 2006

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>

P.-S.

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

Comentar este artículo

Contenido de una sección a dos columnas simétricas
26 de abril de 2008 22:39, por c3tz

Muy bueno este efecto de doble columna, disculpen la ignorancia, dodne debo pegar alguno de los codigos.Gracias mil

Responder este mensaje

Volver al inicio del foro

RSS 2.0 | Mapa del sitio | Espacio privado | Charte et vie SPIP-Contrib |

| L'autre.net

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

P.-S.

Navegación

Comentar este artículo

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

Volver al inicio del foro

1 Mensaje