Barra lateral que desaparece o desplaza hacia abajo

Quería introducir brevemente un tema que me ha traído Karen al blog, al consultarme sus dudas y mencionarme dónde había encontrado la solución. No sé demasiado al respecto, así que me limitaré a describirlo, daros un enlace de ayuda y deciros en qué lugar de la plantilla podéis ir probando para buscar la solución.

Se trata de un tema que, al parecer, ha traído y probablemente siga trayendo problemas a los bloggeros: la barra lateral -o sidebar en inglés- que parece desaparecer y se nos desplaza hacia abajo, permaneciendo en su lado derecho o izquierdo, pero debajo de las entradas.

Aunque sólo sea por curiosidad os contaré que la existencia de distintas partes en nuestro blog (barra lateral, título, entradas y barra inferior) son en realidad páginas distintas, de ahí que en la plantilla tengan distinto nombre ("main", "sidebar", "title"...) cargadas desde lo que podemos llamar una página índice que las enlaza y nos permite verlas todas a la vez. Esto quiere decir que cada una de ellas puede (o al menos deberían poder) ser modificadas por separado.


La "página índice" tiene un tamaño determinado. Dentro de ella se encuentran la barra lateral y la barra principal (la de las entradas o posts) que, lógicamente, no pueden medir lo mismo, porque no cabrían, desplazándose la barra lateral hacia abajo; además, si la suma del tamaño de las dos, de la barra lateral y la principal, superase el tamaño máximo de esa "página índice" tendríamos el mismo resultado: una barra lateral desplazada hacia abajo.

Karen me comentaba que había conseguido solucionar su problema gracias a una entrada del Blog de blogs; imagino que se refería a ¿Por qué la sidebar se va hacia abajo? en cuyos comentarios podemos encontrar muchos datos valiosos sobre el tema, como, por ejemplo, que las imágenes demasiado grandes pueden provocar ese efecto de desplazamiento hacia abajo de la barra lateral.


Gracias a otro de los comentarios he podido acudir a la plantilla de mi blog y ponerme a experimentar, a ver qué resultado obtenía según los cambios que hacía.

La conclusión a la que he llegado es, como decía antes, que el tamaño o proporción de la barra lateral y de la barra principal tiene que estar compensado si no queremos que la barra lateral se nos desplace hacia abajo. Lo mejor, en mi opinión, es experimentar con la plantilla, utilizando las opciones "vista previa" y "borrar cambios" hasta que consigamos ver el blog como nos guste; y sólo entonces hacer uso de la opción "guardar plantilla" para guardar los cambios realizados. Por cierto, en todos los blogs de ayuda se aconseja guardar una copia de la plantilla en nuestro ordenador de modo que nos sirva de copia de seguridad en caso de que necesitemos borrarla entera y, así, no perdamos todos los cambios anteriormente realizados. Para guardar la plantilla sólo tenemos que usar la opción que nos da Blogger en Plantilla - Edición de HTML "Descargar plantilla completa".

Y dicho todo esto, si queremos intentar solucionar el problema de esa barra lateral que se desplaza hacia abajo o si, como quería Karen, queremos que haya más separación entre la barra lateral y barra de las entradas, acudiremos a Plantilla - Edición de HTML y buscaremos lo siguiente:

#sidebar-wrapper {

width:200px;

float:left;

font-size:87%;

padding-bottom:20px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Aquí podemos modificar el ancho de la barra lateral (width) que, en el caso de mi plantilla está en píxeles (width:200px). Podemos aumentarlo o disminuirlo. Si lo aumentamos demasiado puede que el efecto que obtengamos sea el que decíamos antes: que la barra lateral se coloque en su posición laterla pero debajo de todas las entradas. ¿Qué podemos hacer entonces? Disminuir el ancho de la barra de las entradas. Para ello buscaremos:

#main-wrapper {

width:450px;

float:right;

padding:100px 0 20px;

font-size:88%;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

y disminuiremos el ancho (width) de esta barra. Aquí, por ejemplo, es de 450; si lo disminuimos a 400 y hacemos click en "vista previa" veremos la diferencia.

Tened en cuenta que, a menos que necesitéis que la barra lateral sea más grande por alguna imagen o accesorio que incluyáis, no es necesario aumentar el ancho de la barra lateral, es suficiente con disminuir el ancho de la barra principal o de entradas (main-wrapper).



¡Y hasta aquí mis humildes y quizás confusas y confundidas explicaciones! Espero que os sirva de algo.