<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Sin Comentarios &#187; Varios</title>
	<atom:link href="http://www.sincomentarios.com/category/varios/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.sincomentarios.com</link>
	<description>Un poco de lo mejor de la vida.</description>
	<lastBuildDate>Sat, 17 Mar 2012 23:23:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Cuando la barra lateral (sidebar) de un blog &#8220;salta&#8221; al pie de página. Soluciones.</title>
		<link>http://www.sincomentarios.com/cuando-la-barra-lateral-sidebar-de-un-blog-salta-al-pie-de-pagina-soluciones/</link>
		<comments>http://www.sincomentarios.com/cuando-la-barra-lateral-sidebar-de-un-blog-salta-al-pie-de-pagina-soluciones/#comments</comments>
		<pubDate>Sun, 10 Oct 2010 12:55:53 +0000</pubDate>
		<dc:creator>Serafin</dc:creator>
				<category><![CDATA[Varios]]></category>
		<category><![CDATA[Blogger]]></category>
		<category><![CDATA[sidebar]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.sincomentarios.com/?p=164</guid>
		<description><![CDATA[El tema de este artículo no estaba precisamente en mi mente cuando creé este blog sin embargo en este medio hay personas que se dedican a realizar un trabajo que entregan gratuitamente al resto de usuarios, y en ocasiones es un trabajo excelente, que en este caso me ha permitido, al utilizar la plantilla actual, [...]]]></description>
			<content:encoded><![CDATA[<p>El tema de este artículo no estaba precisamente en mi mente cuando creé este blog sin embargo en este medio hay personas que se dedican a realizar un trabajo que entregan gratuitamente al resto de usuarios, y en ocasiones es un trabajo excelente, que en este caso me ha permitido, al utilizar la plantilla actual, poder presentar estos artículos con una estética agradable.</p>
<p>Consideré por lo tanto que una categoría del blog podría estar dedicada a Internet y no había mejor manera de estrenarla que dedicando este artículo a algunas recomendaciones que pueden ser útiles para resolver un problema que se suele presentar con cierta frecuencia en los blogs. De repente un día nos damos cuenta de que <strong>el lateral derecho, lo que se conoce como sidebar, ha desaparecido de su posición original y aparece en la zona inferior de la página</strong>.<br />
¿Cuáles son los motivos por los cuales se produce ese salto del lateral derecho (o izquierdo) a la zona próxima al pie de página?<br />
Para intentar aclararle este asunto le voy a dar el ejemplo de este mismo blog en el que apareció ese problema y de qué manera lo solucioné buscando las posibles causas.</p>
<p>Por lo general utilizo Internet Explorer sin embargo también tengo instalado Firefox y en ocasiones lo utilizo para ver si en ese segundo explorador todo se visualiza correctamente pues la manera de interpretar las páginas y mostrar la información no siempre coincide con Internet Explorer.<br />
Mientras que en Internet Explorer podía ver el lateral derecho (sidebar) en su posición correcta:</p>
<div id="attachment_170" class="wp-caption alignnone" style="width: 510px"><img class="size-full wp-image-170" title="sidebar lateral" src="http://www.sincomentarios.com/wp-content/uploads/2010/10/sidebar-lateral.gif" alt="" width="500" height="285" /><p class="wp-caption-text">Sidebar en su posición correcta en el lateral derecho.</p></div>
<p>En Firefox no sucedía así y ese lateral había pasado a ocupar el espacio inferior de cada artículo:</p>
<div id="attachment_169" class="wp-caption alignnone" style="width: 510px"><img class="size-full wp-image-169" title="sidebar abajo" src="http://www.sincomentarios.com/wp-content/uploads/2010/10/sidebar-abajo.gif" alt="" width="500" height="286" /><p class="wp-caption-text">Sidebar fuera de lugar, en el zona inferior de la página.</p></div>
<p> Antes de seguir le aclaro que en Firefox me mantengo sin registrar en el blog para poder ver lo que se le presenta a cualquier usuario no registrado. La clave del cambio de posición está precisamente en ese detalle.</p>
<p>¿Qué habría que hacer para solucionar este problema?<br />
Aunque de entrada todo apuntaba a que podía ser un problema de los tag div vamos a mencionar posibles causas de ese cambio de posición de la barra lateral.</p>
<p>- El desplazamiento de la sidebar podría deberse a que <strong>hemos introducido elementos gráficos (fotografías, banners,&#8230;) con un ancho mayor al asignado a esa zona</strong> con lo cual es imposible mantenerla en esa posición. El resultado es un salto al siguiente lugar posible donde desplegar esas imágenes sin obstáculo al tener un espacio disponible suficiente.<br />
En el caso de este blog podría haber sucedido así pues en el lateral derecho hay varias fotografías añadidas. Supongamos que esas fotos hubiesen sido mayores en su anchura que la que puede soportar esa sidebar. ¿Esto cómo lo podemos averiguar?.<br />
Nos vamos al Editor de WordPress y editamos el archivo Stylesheet que es el archivo de estilos css que gobierna toda la distribución en pantalla de los diferentes elementos.<br />
¿Qué tenemos que buscar en ese archivo?<br />
Algo similar a esto:<br />
#main #<strong>sidebar</strong> {<strong>width:280px</strong>; float:right;line-height:18px; margin-right:5px;}<br />
Ahí descubrimos que el máximo ancho que soporta ese lateral es de 280 px aunque nunca conviene llegar a ese límite pues en ocasiones otros estilos afectan a ese lateral para establecer márgenes entre los elementos que se añaden y los bordes de la sidebar, con lo cual podemos estar reduciendo en 10 o 20 px el ancho total, además por simples cuestiones estéticas es aconsejable ser generoso con los espacios libres.<br />
En este caso el ancho de las fotos laterales es de 275 pixels así que no había razón para suponer que ese fuese el problema.<br />
Si en su caso ha introducido imágenes con un ancho superior al de la sidebar ya sabe que debería de reducir su ancho hasta hacerlo inferior al que puede leer en la hoja de estilos.<br />
En conclusión: el primer motivo por el cual la sidebar puede saltar de posición es la introducción de algún elemento que supera el ancho de esa zona.</p>
<p>- En algunos blogs, por ejemplo los que utilizan <strong>blogger</strong>, al introducir la <strong>etiqueta &#8220;more&#8221;</strong> para indicar que sólo se muestre parte del texto del artículo y que se pueda seguir leyendo al completo al pulsar en un enlace que suele tener nombres como &#8220;siga leyendo&#8221; o &#8220;leer al completo&#8221;, se añadía de tal manera que un tag div no era cerrado cuando se mostraba la versión abreviada.<br />
Me explico:<br />
En un texto en el cual tenemos esto como código fuente:<br />
&lt;div&gt;texto<br />
texto<br />
texto<br />
&lt;/div&gt;</p>
<p>Añadimos una etiqueta &#8220;more&#8221; tal que así:<br />
&lt;div&gt;texto<br />
more<br />
texto<br />
texto<br />
&lt;/div&gt;<br />
Con lo cual en la visualización del fragmento del artículo el código que se presentaba en pantalla era sólo:<br />
&lt;div&gt;texto<br />
more</p>
<p>¿Dónde se cerraba el div abierto?<br />
Ese era el problema que supongo que ya habrán solucionado en blogger.<br />
La solución manual consistía en editar el artículo y cerrar el div antes de la etiqueta more y volverlo a abrir despúes de esa etiqueta para que quedase a su vez cerrado con el último div, tal que así:<br />
&lt;div&gt;texto<br />
&lt;/div&gt;<br />
more<br />
&lt;div&gt;<br />
texto<br />
texto<br />
&lt;/div&gt;</p>
<p>- El anterior motivo por el cual la sidebar se puede desplazar de lugar nos orienta al problema que tienen algunas plantillas que no están correctamente creadas y <strong>dejan abierto algún div</strong>.<br />
Si usted revisa el código fuente de las páginas de su sitio web tal vez encuentre que el número de etiquetas &lt;div&gt; no coincide con el de etiquetas de cierre &lt;/div&gt;, si ese es su caso entonces ya sabe a qué se debe su problema de salto de la sidebar.<br />
En la plantilla de este blog el problema no se debía a que el diseñador hubise olvidado cerrar los div sino que había colocado dos de ellos en una posición incorrecta en el archivo de comentarios:</p>
<div id="attachment_166" class="wp-caption alignnone" style="width: 510px"><img class="size-full wp-image-166" title="solo registrados" src="http://www.sincomentarios.com/wp-content/uploads/2010/10/solo-registrados.gif" alt="" width="500" height="330" /><p class="wp-caption-text">Esas etiquetas div nunca podían ser vistas por usuarios no registrados.</p></div>
<p>De esa manera cuando un usuario no está registrado no se llegan a mostrar nunca los &lt;/div&gt;.<br />
Ahora bien si los cambiamos de posición:</p>
<div id="attachment_167" class="wp-caption alignnone" style="width: 510px"><img class="size-full wp-image-167" title="todos usuarios" src="http://www.sincomentarios.com/wp-content/uploads/2010/10/todos-usuarios.gif" alt="" width="500" height="330" /><p class="wp-caption-text">Ahora si que cualquier usuario puede ver cómo se cierran esas etiquetas.</p></div>
<p>En ese caso tanto a los usuarios registrados, como a los no registrados, se les mostrarán esas etiquetas.<br />
Puede que en su caso suceda algo semejante o que simplemente el diseñador haya olvidado cerrar algún div.<br />
Espero que tenga suerte y pueda solucionar ese salto de sidebar si es que está afectando a su blog.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sincomentarios.com/cuando-la-barra-lateral-sidebar-de-un-blog-salta-al-pie-de-pagina-soluciones/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

