JMiur [E]

Hace un tiempo, en una de las entradas se mostraban algunos métodos para tener un diseño con columnas de igual altura..

Por defecto, la altura de cualquier elemento depende de su contenido así que es normal que la columna de entradas tenga cierto alto y la de la sidebar otro. En ciertos diseños, eso no es algo deseable ya que, por ejemplo, hay un color de fondo diferente y nos gustaría que, sin importar el contenido, todas llegaran hasta el final de la página.

La solución que más me gustaba para resolver el tema implicaba usar sólo CSS, agregando una serie de propiedades como:
margin-bottom: -32768px;
padding-bottom: 32768px;
Esto, tenía un beneficio, no usaba JavaScript pero, tenía una desventaja, los enlaces a posiciones exactas (#nombre) o aquellos que son anclajes no funcionan o, peor aún, "cortan" la página de tal modo que el blog se ve espantoso.

Hasta ahora, ese era un detalle menor en la mayoría de los casos pero, la nueva opción MORE lo ha transformado en un porblema serio ya que el enlace generado es, justamente de ese tipo: #more. Ese problema planteaba Emile en un comentario y, un poco después que era justamente ese detalle el que impedía ver las entradas de su blog de manera normal.

Hace ya mucho, Carlos me había enviado por mail una página donde se hablaba de un método para crar columnas iguales. No lo había probado y estaba allí en mis marcadores, esperando. Llegó el momento de sacarlo a la luz porque parecería que resuelve el tema.

El artículo en cuestión es Height Fixer For Blogger y es fácil de implementar; basta agregar lo siguiente antes de </head>:
<script type='text/javascript'>
//<![CDATA[
onload=function() {
var alturaMAIN = document.getElementById('main-wrapper').offsetHeight;
var alturaSIDEBAR = document.getElementById('sidebar-wrapper').offsetHeight;
if(alturaSIDEBAR>alturaMAIN) alturaMAIN=alturaSIDEBAR;
document.getElementById('main-wrapper').style.height = document.getElementById('sidebar-wrapper').style.height = alturaMAIN+ 'px';
}
//]]>
</script>
Sólo un detalle, asume que la columna de posts tiene un ID llamado main-wrapper y la columna de sidebar un ID llamado sidebar-wrapper. Si la plantilla posee otros IDs, deberá cambiarse el script para que verifique la altura correspondiente.

ACTUALIZACIÓN:

Un comentario de egoloco aporta una solución extra que bien podría ser útil en muchos casos.

El script original lo que hace es detectar si la altura de la sidebar es mayor que la altura del main y, si es así, hacer que este último se alargue para que ambos queden iguales.

Lo que él se pregunta es ¿qué pasa si ocurre lo contrario? Y responde: hay que alargar la sidebar así que acá va una variante que lo que hace es verificar cuál de las dos columnas es la más larga y darles a ambas la misma altura:
<script type='text/javascript'>
//<![CDATA[
onload=function() {
var alturaMAIN = document.getElementById('main-wrapper').offsetHeight;
var alturaSIDEBAR = document.getElementById('sidebar-wrapper').offsetHeight;
if(alturaSIDEBAR>alturaMAIN) {
document.getElementById('main-wrapper').style.height = alturaSIDEBAR+ 'px';
} else {
document.getElementById('sidebar-wrapper').style.height = alturaMAIN+ 'px';
}
}
//]]>
</script>

74 comentarios:

Bonzu Pipinpadaloxicopolis III  

Creo que para el caso de Emile sería buscar <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> y eliminar + &quot;#more&quot;.

Responder
Anónimo  

Hace tiempo que lo tengo implementado en uno de mis blogs... noto un problemilla (al menos en mi caso) si tienes bastantes gadgets en la sidebar y estos llegan al footer, en la parte de Diseño es como si el footer se "comiese" a los últimos (más concretamente a los dos últimos en mi caso) y no hay acceso a ellos para editar, he de andar moviendo los de arriba para acceder a estos últimos... ¿has notado tu que esto pase?

Responder
Iván_RG  

Cuando leí el título del post pensé que mi perrito Moore te había destrozado algo en tu casa... no sé, unas columnas de madera o algo similar... pero luego recordé que tu estás en Argentina y yo en España, y como a mi perro volar como que no le va demasiado, pues imposible que fuera él... menos mal...!!

jeje!!

Ahora en serio,JMiur me viene de perillas este truco, ya que como sabrás hemos cambiado algo la plantilla de TodoTwitter y el tema del tamaño de la sidebar era algo que había podido controlar en la página principal indicando un min-height tanto en la sidebar como en el mai.
Claro, en las páginas de entradas individuales esto ya no me vale ya que no puedo controlar el tamaño del cuerpo del post,...

Así que andaba un poco "fastidiado" con ese tema hasta que ...ooohhhh!! esta script me viene de perlas para solucionar el problema en TodoTwitter, mañana el pajarraco @Twittboy va a estar contentísimo cuando lo vea. Lo he colocado en su blog y queda perfecto, cómo no...

muchas gracias!!

★Iván

Responder
egoloco  

Bueno, bueno... esto sirve... lo pensé una vez y me llegó como por telepatía. Se agradece!

Responder
Bocha  

Te dejo el mensaje que te mande aca... espero me lo puedas responder...

1) Debajo de los comentarios coloque el link que te manda a la forma vieja de comentar. El viejo formulario... pero no me gusta como queda, me gustaria que quedara identico al cartel de suscripcion que tengo yo. Se puede?? va todo se puede, pero como yo no tengo tanta idea de esto te pido ayuda...

2) Eso por un lado, ahora bien, el otro detalle es que el footer y el footer dividido en tres estan juntos, al dividir el footer en tres algo coloque mal, yo lo que quiero es que se vean separados. Como lo podemos arreglar??

Responder
JMiur  

Bonzu: Sí pero me parce que usar el script es una solución más genérica ya que lo mismo podría ocurrir con cualquier otro anclaje.

Rosa: No lo había visto pero, lo que dices me suena lógico así que me puse a hacer pruebas a ver si podía reproducir el error. Lo que he encontrado como solución (no sé si será válida para todos los casos) es agregar esto en el CSS:
body#layout #main-wrapper {height:100%;}
body#layout #sidebar-wrapper {height:100%}
Con body#layout controlas, hasta donde es posible, la forma de mostrar los gadgets en la ventana de agregar elementos y la idea es buscar propeidades "diferentes" a las que tiene el blog de tal forma de ajustarlas. Fíjate si eso ayuda a resolver el problema.

BanakaBanaka: Pués sí, vi los cambios ayer :¿Será Twitterboy relegado a un rincón de MySpace? :D Pués, prueba este modelo de solución que parece andar bien con la advertencia de Rosa respecto a la forma de ver la ventana de Diseño aunque creo que en tu caso no se necesitará ajuste porque la sidebar no es demasiado larga.

egoloco: Espero que le saques provecho :D

Bocha: Ya respondí el mail.

Responder
mundotigra  

He probado varias veces y no me funciona :(

Alguna ayuda?

Responder
JMiur  

mundotigra:
No veo el script colocado. En todo caso, en tu blog, los IDs son diferentes
main-wrapper se llama main-wrap1
y
sidebar-wrapper se llama sidebar-wrap
así que debes cambiar esos nombres en el código.

Responder
Unknown  

pruebo y me fijo como queda, no pude con el anterior -seguro cometía errores- adiosssssssss

Responder
Emile  

Perfecto y simple! Lo que tiene también de bueno en comparación al otro método es que no elimina los bordes (border: ...).

Ahora sí no hay que desprenderse de nada :D

Responder
Unknown  

Jmiur solo para cuando tengas un tiempito y salida del tema:
puedes darme una pista de por qué? la cajita que contiene al título de la entrada no tiene la misma medida que la entrada, valga la redundancia ;) gracias

Responder
JMiur  

Emile: Es sencillo, no tendrás problemas.

Graciela: el título se vé más angosto porque así lo dice el CSS:
post h3 {
........
width:610px;
}
simplemente, elimina esa propiedad y así ocupará el ancho total, sin importar cuál sea.

Responder
Bonzu Pipinpadaloxicopolis III  

Cierto JMiur, mejor que se solucione todo de una vez :-)

Responder
Ivan Rodriguez  

A ver... voy a tener que denunciar a JMiur y a BanakaBanaja por abuso "pajaril"... sinvergüenzas!! yo no quiero un MySpace!!.

Eso me recuerda a un chiste:

"-¡Papá, papá!
- ¿qué quieres, hijo mío?
- Cómprame un coche, andaaaa.. ¡¡Cómprame un coche!!
- ¡¡y una mierda!!
-¡¡¡NOOO, NOOO, un Twingo NOOO!!"


Pues eso, que yo no quiero un MySpace!! ya tengo mi blog y mi Twitter... jajaja!!

Bueno, pues eso, contento por los cambios y contento porque la barra ya llega hasta abajo en las páginas interiores. Tan sólo ocurre que en la página principal, al desplegar los elementos de la sidebar, que están en la parte inferior se "esconden" bajo el footer.
Esto ocurre en Firefox, claro, en el "inefable" Explorer no se esconde sino que se superpone.

De todas maneras, no molesta, ya he dicho que estoy contentísimo.

Y claro lo que comenta Rosa no me afecta porque efectivamente, la sidebar es muy corta.

Bueno, JMiur muchas gracias por el truco, un puntazo de script.

Un abrazo!!

Responder
JMiur  

TwitterBoy: Primero, deberían quitar el min-height de #sidebar-wrapper y #main-wrapper. Lo del footer es razonable. el script calcula la altura visible y cuando esta cambia, no se recalcula. Una posibilidad sería hacer una llamada al script cada vez que se contrae o expande la sidebar. Otra posiblidad es establecer propiedades para el footer de tal manera de posicionarlo de manera absoluta en el fondo del blog.

Responder
Unknown  

graciassssssssss amigo, mira que saqué y saqué y me decía:
"Me quieres a tu modo, sin entrega
Sin los afecto que de ti persivo y
A veces me parece que quisieras
alejarte de mi y no estar conmigo.

Jamas mi voz , mis artes, mis canciones
pero eso, nada mas, tan solo eso
Mi inocentes ardientes, emociones
cuando yo te acaricio con mis besos

Si, pero no que no que no
Tu dices que me quieres , pero no

que no que no, tu dices que me quieres
pero no que no que no
porque tu amor me hiere"
ahhh puse el script todo está de maravillas :D

Responder
Nathan yo  

Hola

Bueno le que quería pedir ayuda a usted porque creo que es el mas indicado, mire hace dos días cambie mi plantilla por otra mucho mas liviana pero resulta que la que tengo ahora no muestra los títulos de las entradas solamente el de la primera no sé que tendrá y quería que usted me ayudara en el caso que tuviera solución.
este es el blog --->> http://globalmention.blogspot.com/

Responder
JMiur  

Genial Graciela ¿Hoy anda de trovadora? :D

Global Metion Blog: ¿Qué significa eso de que "ahora no muestra los títulos de las entradas solamente"? Si se trata de que los posts se mostraran sin contendio y que se abrieran al ahcer click en el título, eso, debería agregarse otra vez pero no sé cuál método usabas o si podrá integrarse con la actual.

Responder
Unknown  

hoy es uno de esos días que algún amig@ debería organizar un asalto, cantar, bailar jajaja...ando muy trovadora :)

Responder
Nathan yo  

que solo se muestra el del primer post, los demás no :(

Responder
Anónimo  

Muito interessante esse é um erro comun em blogs mais pouco notado!

Responder
Anónimo  

esta exelente eso de more es algo que muchos buscamos en la web para poner en nuestros blog :D

Yo queria hacerte una pregunta que nada que ver con esto, bueno mi plantilla la descargue de la web y tenia varios elementos que alentaban la pagina, por ejemplo tenia un slide para imagenes, un slide para poner las ultimas notas de mi blog, un espacio para los sponsor, acerca de.. y un top 5.

yo decidi quitar eso porque no me gustaba porque alentaba mucho la pagina, pero pues lo habia quitado desde la plantilla, borrando solo la parte que decia:

">b:widget id=..."

y eso para que ya no apareciera, pero aun quedaron las cosas de la configuracion de los widgets y lo de los archivos .js de cada widget.

Mi pregunta es que aun mi blog sigue lento, sera porque aun quedaron los restos de los widgets en la plantilla? los deberia borrar?

Espero que me ayudes gracias

Responder
Gloria  

Lástima, pero no me funciona. He probado de muchas formas, incluso abajo de head, he probado en mi blog de prueba también, cambiando por varias plantillas, incluso las que blogger nos provee, pero aún asi no de logrado de que la barra lateral no se desplace hacia abajo.

Responder
JMiur  

Global Metion Blog:
Habría qyue ver la plantilla para saber el modtivo exacto pero, debe haber alguna clase de condiconal donde está el título <h3 class="post-title">
Asñi, mirando el código fuente es imposble saber cuál código es. También veo etiquetas extrañas como <normal class='date-header'> que no significa nada, por ejemplo.

Responder
JMiur  

Wrestler:
Es posible que haya scripts que no se uticien y puedan eliminarse. Tendría quu saber cuál de tus blog es al que te refieres.

Gloria: Si pusieras un ejemplo online podría ver si encuentro el error.

Responder
Anónimo  

hola, bueno este es mi blog:

http://galeriawwedivas.blogspot.com/

Responder
Nathan yo  

Entonces qué se puede hacer?

Responder
J. Villegas Ruíz  

hola felicitaciones por el blog!!! tengo una duda... y con relacion a este tema.... en mi blog, al aplicar el codigo more para cortar la entrada y que aparesca el leer más, no aparece en la entrada en nigun lado el link de leer más---- como soluciono eso? disculpa las molestias!

Responder
Anónimo  

Hola Miur, el blog al que me refiero es de de Argentina y sus atractivos. la URL: http://quevisitarenargentina.blogspot.com

Perdón por poner la dire, no quiero hacer spam, pero bue...:)actualmente le saqué el codigo del more, y el que recomiendas para nivelar el sidebar.
El sidebar que queda desplazado es el derecho, mientras que el izquierdo queda bien.

Besos;)

Responder
JMiur  

Wrestler:
Es probable que los scripts agregados no tengan uso. No sabría decirte si esto es cierto o no porque no es fácil detectar su uso. Tal vez los necesitas en algunas entradas. Esa parte es sencilla de verificar, quitalos y miras que ocurre pero, lo que causa la demora en la carga no es eso sino la cantidad de imágenes que deben ser cargadas en el home.

Si abres tu blog, verás que hay una diferencia enorme entre la velocidad de carga de una entrada individual y del home. Es que allí, si bien sólo hay 8 entradas, se cargan 8 posts completos aunque no los veas, es decir, TODO lo que contienene esos posts. Conté alrededor de 70 imágenes y eso es lo que causa la demora.

Que algo esté oculto no significa que no se cargue, se carga igual aunque sea invisible y tal cantidad de información es difícil de manejar, sobre todo, si se le suman objetos Flash que también hay en los posts y las diferentes imágenes que crean el header aleatorio. Todo eso se carga y de allí la demora que es excesiva.

El MORE del que se habla en estas entradas es una solución porque al usarlo, el post se corta de verdad pero, habría que adaptarlo al modelo de plantilla que utilizas y eso es algo que aún no está pensado ya que esta opción es muy reciente.

Responder
JMiur  

Global Metion Blog:
¿No has mirado a ver si encuentras ese tipo de código? Lo que debe hacerse es modificar la plantilla para eliminar esa condición. No es algo que se vea online.

Ville:
¿Has verificado si el código que lo genera está en la plantilla?

quevisitarenargentina:
Oh no, poner la URL es necesario y eso no es spam :D
Allí, el problema es que hay dos sidebars y no una sola así que si se quieren igualar, habrá que adaptarlo y cambair los ids por #side-wrapper1 y #side-wrapper2 o sólo tener en cuenta esta última ya que es la más larga.
Ahora, si se trata del MORE, eso puede deberse a la forma de usarlo.
Si lo has probado en una plantilla mínima en un blog de pruebas y no funciona, sería bueno revisar esa parte porque lo más probable es que el error esté allí

Responder
Anónimo  

Ok JMiur pero si tubiera script sin uso alentarian la carga?

mmmm en otro blog decian que lo de los banners aleatorios opimisarian la carga del blog, creo que entonces lo lei mal.

Muchas gracias JMiur :)

Responder
Nathan yo  

Si están ambos códigos no le había entendido pero una vez ubicados que se puede hacer?

Responder
JMiur  

Wrestler:
No sé a a que se referiría esa explicación de banners aleatorios pero, por sentido común, cuanto más cosas hay, mas tarda en cargarse.
Ayudaria pero muy poco. Como dije, podrías sacarlas y ver que pasa. Cualquier problema, simplemente las agregas otra vez. Pero, el problema fundamental son las imágenes.

Global Metion Blog:
No sé cuál es el código que está allí. Eso varía con las plantillas. Debería verlo.

Responder
Nathan yo  

Le he mandado un correo con la plantilla espero que allí se pueda porque en los comentarios no se puede

Responder
egoloco  

Jmuir, probando este truco (que lo necesitaba aún sin usar el MORE) me di cuenta que, en los post más "cortos" los últimos elementos de la sidebar se ocultan detras del footer, algo asi como dijo Rosa más arriba. Así que probé modificar el Script con esto (espero sirva para alguien):

<script type='text/javascript'>
//<![CDATA[
onload=function() {
var alturaMAIN = document.getElementById('main-wrapper').offsetHeight;
var alturaSIDEBAR = document.getElementById('sidebar-wrapper').offsetHeight;
if(alturaSIDEBAR>alturaMAIN) alturaMAIN=alturaSIDEBAR;
document.getElementById('main-wrapper').style.height = document.getElementById('sidebar-wrapper').style.height = alturaMAIN+ 'px';} else {
if(alturaSIDEBAR<alturaMAIN) alturaMAIN=alturaSIDEBAR;
document.getElementById('sidebar-wrapper').style.height = document.getElementById('main-wrapper').style.height = alturaSIDEBAR+ 'px';
}
//]]>

Responder
JMiur  

egoloco:

Creo interpretar que Rosa hablaba de la parte de Agregar elementos y no del blog en si mismo pero al margen, a ver si comprendo tu idea porque el código en los comentarios sale un poco confuso por cuestiones de espacio.

¿El tema es detectar cual de los dos es la más alta y darle a la columna más corta la altura de la más larga sin importar si es una u otra?

Simplificando un poco:

var alturaMAIN = document.getElementById('main-wrapper').offsetHeight;
var alturaSIDEBAR = document.getElementById('sidebar-wrapper').offsetHeight;

if(alturaSIDEBAR>alturaMAIN) {
document.getElementById('main-wrapper').style.height = alturaSIDEBAR+ 'px';
} else {
document.getElementById('sidebar-wrapper').style.height = alturaMAIN+ 'px';
}

si la SIDEBAR es la más alta alargamos el MAIN
si el MAIN es la más alta alargamos la SIDEBAR

Si ese es el concepto, parecería razonable.

Responder
egoloco  

Correctisimo Jmuir, la idea sería esa :D

Y sobre lo de Rosa, bueno, crei que se trataba de eso, en fin, voy aprendiendo? :P

Responder
JMiur  

egoloco:
Eso entendí yo pero también pude haber entendido mal :)

Tu idea me gusta así que ahora la agregaré al post.

Responder
Anónimo  

Ambos tenéis razón... es decir, yo hablaba del problema de la parte de Diseño en mi comentario, pero leyendo el comentario de egoloco, se me ocurrió comprobar eso que el dice en la "vista real" del blog y también se apreciaba ese "fallo" tal como el apuntaba y yo no había notado...

Con el aporte de egoloco, se soluciona el problema, al menos yo lo noto todo bien...

¡Gracias a los dos!

Responder
JMiur  

Eso se llama ser diplomático, Rosa :D Pudo haber ocurrido que ninguno tuviera razón :D

¿Ahora funciona bien? Perfecto. Es bueno saberlo porque no logré probarlo por completo.

Responder
egoloco  

Gracias JMiur, Gracias Rosa también. El problema lo tuve solo en la "vista real", y viendo otros scripts pude ver que también se podía hacerse al revés. Y como dijo JMiur, pude haberme equivocado, pero ¡Oh, casualidad! que me salió... Y me siento contento de haber aprendido y haber probado algo por mi cuenta. Eso también quiere decir que el Maestro enseña muy bien :D

Responder
Pancho Tama  

ohhhh tengo un grave problema... en mi plantilla no encuentro el valor sidebar-wrapper y busque tambien como sidebar-wrap y nada... ¿alguien me da una manito por favor? pues me gustaria implementar eso del read more. de ante mano mil gracias!!! dejo mi direccion: http://cronicasdeunamovida.blogspot.com

Responder
JMiur  

Pancho:
Tu plantilla tiene otro nombre de ID y varias sidebars, una debajo de la otra. Para usar el MOR esto es innecesario y basta usar el código de Blogger.

Responder
Pancho Tama  

okis gracias por la ayuda!!!

Responder
Unknown  

ahhhhhhhhhhhhhhhhhhhhhhh
hi there, i have a little problem;;
in this blog of test's: http://rapidolor.blogspot.com/
i use the <--more--> on my post's, there was no problem with the sidebars,,,:)
but, in this one http://rapidoeindolor.blogspot.com/
i used the <--more--> and then, my sidebars gonne to the bottom of the page...

Responder
JMiur  

Lucas: Fíjate si esta entrada ayuda.

Responder
Letty Bathory  

Hola!!! El blog esa excelente, me ha ayudado muchisimo, pero tengo una duda, a mi me funciona perfectamente el <-more->, la sidebar sigue en su lugar y en fin, perfecto... Pero tengo una duda, mas bien una molestia, no me gusta que el link de "seguir leyendo" este alineado a la izquierda, entonces probe de centrarlo, y fue cuando la sidebar se fue al $%#$"@, cayo abajo y bueno el problema que ya sabes, el punto es que quiero saber como demonios hago para poder el centrar el link y que todo lo demas siga en su lugar..
De antemano gracias, y repito, excelente blog!!! =)

Responder
JMiur  

Erzsébet:
No puedo ver tu blog para darte una respuesta exacta pero, bastaría agregarle propiedades CSS, por ejemplo, antes de antes de ]]></b:skin>:

.jump-link { text-align: center; }

También puedes darle fomato al enlace:

.jump-link a { ................ }
.jump-link a:hover { ................ }

Responder
WIÑAYPAQ  

En mi caso, tengo una "sidebar dividida en 2" una encima de ella, cambie el ID con "sidebar-wrapper-doble" y nada, no resulta, qué puedo hacer?

Responder
JMiur  

Al tener varias columnas encimadas, deberías crear un script especial para que vaya sumándolas; nada sencillo.

Responder
Lujo  

Re Hola,
Probando el script que se propone y como tengo dos columnas, he colocado:

<script type='text/javascript'>

//<![CDATA[

onload=function() {

var alturaMAIN = document.getElementById('main-wrapper').offsetHeight;

var alturaSIDEBAR = document.getElementById('sidebar-wrapper').offsetHeight;

if(alturaSIDEBAR>alturaMAIN)

var alturanewsidebar = document.getElementById('newsidebar-wrapper').offsetHeight;

if(alturanewsidebar>alturaMAIN) {

document.getElementById('main-wrapper').style.height = alturaSIDEBAR+ 'px';

} else {

document.getElementById('sidebar-wrapper').style.height = alturaMAIN+ 'px';



document.getElementById('newsidebar-wrapper').style.height = alturaMAIN+ 'px';



}

}

//]]>

</script>

En mi caso, me pasa lo mismo que Rosa comentaba más arriba y en IE se ve una separación mayor entre el footer y las sidebars.

J. Miur, ¿es correcto el script que propongo?, ¿o se te ocurre otra idea mejor?.
El espacio que se ve entre el footer y las sidebars en IE, ¿no se puede modificar para que se visualice como en mozilla/chrome/safari?.

Gracias por tu paciencia y disculpa tanta consulta.

Soy de las que te leo muucho, pero hoy estoy preguntona. (#^_^#)

Responder
JMiur  

Lujo:

Si, el script parece correcto y en Mozilla y Chrome se ve bien. También se ve perfectamente bien en IE8.
En cambio, en IE7 se ve el footer separado y ahí tengo que adivinar un poco. Por ejemplo, un detalle a cambiar podría ser la ubicación del padding de ese footer.

Ahora dice:

#footer-wrapper {
.........
padding-top:15px;
}

Podría quitarse de ahí y colocarse así:

#footer-columna-contenedor {
.........
padding-top:15px;
}

Responder
Lujo  

Hola J.Miur,
Muchísimas gracias por tu tiempo, consejos, paciencia y gran amabilidad.
Te estoy muy agradecida, de corazón.
Si alguna vez necesitas alguna cosa y puedo ayudarte, no dudes que ahí estaré.
Mil deseos de sueños cumplidos para este 2010.
Abrazotes!

Responder
egoloco  

Parece que algo sale mal, en la ventana de agregar elementos la sidebar, el último elemento se esconde tras las columnas del footer... y eso que el footer esta "vacío". Te dejo una captura acá.

Responder
egoloco  

Se me olvidaba decir que esto sólo en Firefox, pero el blog en "vista normal" como decía Rosa, se ve bien, tanto en IE como en FF.

Responder
JMiur  

Entoncees, deberías buscar la forma de modificar las propiedaes del layout que se muestra en diseño:

body#layout #main-wrapper {height:100%;}
body#layout #sidebar-wrapper {height:100%}

O cosas similares, incluso, colocarles valores en pixeles. No hay reglas para eso, hay que ir probando.

Responder
Dyatlov  

Hola Jmiur, la verdad que no doy pie con bola con este tema, que puede estar pasando?
Saludos
Gracias.

Responder
famtv  

Hola Jmiur, no termino de entender porque no me calcula bien la altura del main con la sidebar, las ID son correctas y he probado con los 2 scripts.
Por ejemplo, cuando le doy a siguientes entradas, se recalcula y la sidebar algunas veces queda corta y otras quedan iguales (main-sidebar) va variando. ¿Por que será?
Si tienes 5 min y pudieras mirarte la plantilla te estaría muy agradecido.

Saludos!

Responder
JMiur  

Tendría que verlo online pero n osé cuál es el blog.

Responder
famtv  

Disculpa ya he habilitado el perfil, ahora si puedes verlo, un descuido. Gracias Jmiur.

Responder
JMiur  

Como es algo que no ocurre siempre, dá la impresión de ser un problema de tiempos de carga; el script se ejecuta cuando se termina de cargar la página y eso, no siempre ocurre con fluidez.

Una forma de evitar es no ejecutarlo con onload sino agregarlo directamente al fina de la página o al final de la sidebar aunque, aún así, si hay elementos que demoran en ser cargados el resultado será siempre imprevisible.

Responder
famtv  

Tienes razón Jmiur, es por problemas de carga del blog, quité el script de linkwithin que era el que más "pesaba" y todo solucionado.
En todo caso si quiero volver a poner entradas relacionadas en miniatura utilizaria como bien explicas en otro post, el Json.
Gracias!

Responder
Paulus  

Buenas tardes.
Gracias por el script, que no consigo adaptar para que funcione en mi blog: blog.alamier.com.

En mi caso, entre el content-wrapper y main-wrapper y sidebar-wrapper, tengo una capa con la transparencia de las columnas, #column-1 que contiene el main y #column-2 que contiene el sidebar.

No consigo dar con la forma de modificar los ID:s en el script para empatar ambas columnas. ¿Puedo rogarte que le eches una mirada a ver si tú encuentras qué falla?

Muchísimas gracias.

Responder
JMiur  

Imagino que lo que debes evaluar y comparar son:

column-1 que es el id correspondiente a main-wrapper
y column-2 que es el id correspondiente a sidebar-wrapper

document.getElementById('column-1').offsetHeight
document.getElementById('column-2').offsetHeight

En este momento, el script no se ejecuta porque, al no existir un elemento cuyo ID sea sidebar-wrapper, se produce un error.

Responder
Paulus  

¡¡Ahhhhmigo!! Eso no lo vi. Intenté parchar la falta del ID, cambiándolo en el primer getElementbyId, pero no toqué el segundo... voy a ver si ahora pita.

Muchas gracias por responder tan rápido.

Responder
Paulus  

hayquejoelse... ahora sí. de nuevo gracias.

Responder
JMiur  

Si funciona, me alegro :D

Responder
Marian  

Hola JMiur. ¿Podrías decirme cual es el id de las sidebares y de los post en mi blog? No son ni main-wrapper ni sidebar-wrapper.
Desde hace tiempo quería hacer esto en mi blog.
Gracias,
Marian

Responder
JMiur  

Com oestás usando una de las nuevas plantillas de Blogger, als cosas se complican muchísimo porque la estructura posee una serie de propiedades por defecto muy dificiles de manipular fuera del editor de plantillas.

La estructura no usa IDs sino clases; los ids más cercanos al tema son estos:

main
sidebar-left-1
sidebar-right-1

Responder
Marian  

Ok, gracias. Y entonces lo que explicas en este post no me sirve ¿verdad?

Responder
JMiur  

En principio, diría que no se podría aplicar a las nuevas plantillas de Blogger; puede ser que sea posible pero tengo mis dudas y como te dije, son diseños muy poco amigables y difíciles de personalizar.

Responder
Anónimo  

¡Hola JMiur! Recientemente descubrí Vagabundia y este tema es muy interesante. me gustaría emparejar las 3 columnas de mi blog... podrías ayudarme con algún ejemplo de como puedo modificar el Script para poder aplicarlo en las 3 columnas?.

JMiur  

No podría agregar mucho más que lo indicado en esta entrada y en la anterior; dependiendo de la estructura de la plantilla, es un tema complejo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR