AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Ubicando columnas

martes, 21 de abril de 2009

Una de las columnas de mi blog se cae.
He añadido un segunda sidebar pero sale fuera de lugar.
La columna que he añadido sale debajo / al final de las entradas.

Estas frases y otras similares me las han enviado varias veces.

Tenemos un blog con una plantilla original de blogger, que solo tienen dos columnas, la de las entradas y la sidebar y queremos añadir otra.
Seguimos las instrucciones que encontramos en algún blog de ayuda, (éste o cualquier otro), pero el resultado final no es el esperado ya que, al ver el blog, vemos que una de las dos columnas se ha colocado debajo de la de las entradas.

Normalmente, salvo rarísimas excepciones, esto se produce cuando la suma de las medidas de todo lo incluido en las 3 columnas supera, aunque solo sea en 1 pixel, a la del total de la zona útil del blog.

Me explico: La mayoría de plantillas de blogger, excepto la harbor, la snapshot y la herbert, (creo), que usan todo el espacio disponible y de las que os hablaré al final, tan solo utilizan una cantidad concreta del espacio total de una pantalla.
Así, si tu pantalla tiene una resolución de 1200 pixels y la zona útil del blog solo usa 960 de esos pixels, verás a ambos lados un fondo distinto. Un ejemplo de esto puedes verlo aquí. (Pincha sin miedo, se abrirá en otra ventana).

En ese blog que enlazo, hay un fondo general, el azul oscuro. La zona útil de ese blog es todo lo comprendido en el fondo rosa.
Ese blog tiene un ancho fijo de 1.100 píxels. Si tu pantalla tiene una resolución inferior no llegarás a ver la zona azul oscuro, pero si la resolución es superior si podrás verla, aunque quizá debas abrirlo a pantalla completa.

Como podrás ver, si has pinchado en el enlace, la zona útil de ese blog está enmarcada, así como las 3 columnas, las cuales están algo separadas entre si.

Pues bien, en el caso concreto de ese blog, las medidas de las columnas son las siguientes:
Main, que es la zona de las entradas, mide 440 pixels, una de las dos columnas laterales mide 235 pixels y la otra 225.
Sumamos estas 3 cantidades: 440 + 225 + 235 y nos da 900 píxels. ¿Donde están los 200 restantes?
Bueno, estos 200 se reparten entre los márgenes derecho e izquierdo, los márgenes entre columnas y los marcos.

Porqué esos marcos también cuentan. Ocupan unos cuantos píxels cada uno, a derecha e izquierda, que no podemos olvidar.

A veces, cuando recibo ese tipo de consultas que comentaba al principio, añaden que han seguido las instrucciones al pie de la letra y efectivamente, lo han hecho, pero quizá en el blog de la persona que me consulta ya hay algún marco incluido y las instrucciones no lo tenían en cuenta.
Así, al aplicar las medidas standar que dejamos, esos marcos hacen que el blog se descontrole.

También una imagen o gadget colocados en la sidebar, o en una entrada, que ocupe más espacio del disponible puede ser causa de este descontrol.
Porqué si el total de lo incluido en un blog no dispone de suficiente espacio para mostrarse correctamente, el navegador se busca la vida para enseñarlo y, logicamente, lo coloca al final, debajo de las entradas.

La solución más habitual en estos casos es reducir algunos píxels alguna de las 3 medidas.
Éstas se encuentran en la línea del width del código CSS de cada columna.
La definición más habitual de cada una suele ser: #main o #main-wrapper para la columna de las entradas y #sidebar o #sidebar-wrapper y #newsidebar o #newsidebar-wrapper, para las columnas laterales.

Y revisar que éstas no contengan nada que sobrepase los límites establecidos.
Un gadget, por ejemplo el feedjit, que mida de ancho más que el espacio disponible en el elemento de la columna donde está colocado, saldrá hacia la derecha, aunque quizá no lo veamos, y empujará al resto del blog.

Porqué tampoco miden lo mismo los elementos que las columnas.
En el blog de muestra que he enlazado podeis verlo claramente. La zona útil de los elementos es tan solo lo que tiene fondo gris, mientras que cada columna lateral comprende el marco de la columna, el fondo de la misma, el marco del elemento y el fondo del mismo, con lo que lo que contenga ese elemento debe medir menos que el total de la columna.
Por poneros un ejemplo práctico, el feedjit que hay en la columna de la derecha del blog de muestra mide tan solo 205 píxels y ya veis lo justito que encaja. Los 20 píxels que quedan hasta los 225 que mide la columna son el fondo que se ve de la propia columna, los marcos y los, más o menos, dos pixels de padding (separación del contenido a los márgenes) que hay.

En cuanto a las 3 plantillas de las que os hablo al principio, que ocupan toda la zona disponible, (éste blog en el que estás es un ejemplo de la harbor), dichas medidas vienen expresadas en %.
En estos casos el main ocupa el 48% y cada columna lateral el 24%, pero si se incluyen marcos se debe reducir ligeramente estas cifras, o las columnas quedarán pegadas entre si y cabe la posibilidad de que alguna se caiga. (Sucedió en este blog cuando le añadí la segunda columna).

Imprime esta entrada

6 comentarios. ¿Quieres añadir el tuyo?

  1. E-migrad@ ha dicho
  2. Gracias por los consejos Eulalia.

    Es la primera vez que escribo aquí,pero hace tiempo que te leo. Hace pocos días implementé una serie de cambios en mi blog "migraciones Internas" y la verdad es que con tus indicaciones para la Menubar en la TicTac me salvaste... no encontraba - a pesar de haber leído varios artículos en diversos lugares - la forma de que quedara bien.

    Mil Gracias!

    Cuando puedas, por favor, pasa por el siguiente post, vale?. Me gustaría que lo leyeras:

    http://migraciones--internas.blogspot.com/2009/04/los-blogs-que-leo.html

    K tengas un muy buen día,

    E-migrad@

  3. Pilar Bujaldón ha dicho
  4. Hola Eulalia, hace unos días te pedí ayuda supongo que estás a tope de faena, si tienes un momento, pués estoy un poco agobiada con mi nueva plantilla,que con internet explorer se ve mal,con mozzilla bién,entre otros problemillas que tengo, pero ese es el más importante, gracias de antemano, un beso.

  5. Graciela ha dicho
  6. muy buena explicación Eulalia!!!, a veces hay que ir mirando y mirando 1px cambia todo...besitos!!!

  7. Carlos Quiva ha dicho
  8. hermano quiero una plantilla buena

  9. Eulalia ha dicho
  10. Carlos:
    Dejando de lado que soy hermana, no hermano, pásate por Ideas. (tienes el enlace bajo la cabecera) allí hay muchas.
    Saludos.

  11. ANTESVA ha dicho
  12. Hola EULALIA ,espero que me mandes a mi nuevo correo,tus nuevas novedades tesva@hotmail.com

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.