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.

Como solucionar las distancias entre columnas

lunes, 27 de julio de 2009

Tal como digo en la entrada anterior, en ésta veremos como resolver este tema.

Hay dos casos específicos en los que puedes desear aumentar la separación entre columnas, y vamos a verlos ambos.

En primer lugar, están los blog con plantillas originales de blogger, las que se colocan al empezar, o a través de Seleccionar plantilla nueva.

Estos blog tienen dos columnas con las medidas estipuladas de antemano. Si quieres separar un poco las dos columnas, tienes dos caminos, o reduces unos pixels el ancho de alguna de las dos, con lo que aumentará la separación, o aumentas ligeramente el ancho del blog, que provocará el mismo efecto.

En los blogs tuneados, a los que se ha añadido una columna más, el problema suele ser más de márgenes que de medidas, aunque a veces éstas también tienen su importancia.

De manera que vamos a ver cada caso de forma independiente con imágenes para una mejor comprensión del tema.


Empezaremos con los blogs originales de blogger.

Para hacer las capturas he usado la minima, ya que es una de las que más claras tiene las órdenes que se dan en el CSS, ya que es ahí, en el CSS, donde se modifican las medidas de un blog.
De todas formas, el resto de plantillas tiene estas zonas que os mostraré muy similares.
¡Vamos allá!

Tienes un blog y te da la impresión que las columnas están demasiado juntas y quieres separarlas.
Este el aspecto del blog. (He enmarcado las zonas para una mejor comprensión y remarco en rojo lo que se ve). Puedes apreciar la distancia real entre columnas y en el código las medidas de ancho de ambas.


Si reducimos 10 píxels el ancho de main-wrapper, (el contenedor de las entradas), puedes ver como se separan las columnas.


La misma separación se produce reduciendo estos 10 píxels a la sidebar, (columna lateral).

Si no deseas reducir las medidas de las columnas, buscas un poco más arriba, #outer-wrapper y en el width de allí, que en la mínima es de 660 píxels, aumentas estos 10 o lo que desees.


Ahora veamos lo que sucede en un blog con 3 columnas.
Aquí tienes la imagen de un blog de esos.
Puedes ver la distancia entre columnas y abajo el código que hace que se vean así.
He remarcado en azul el ancho de las 3 y en verde lo que hace que haya esta separación: el margin.
En este caso, (esta es una de mis plantillas), le he dado un margen por la izquierda a la columna central, main-wrapper, y a la de la derecha, sidebar-wrapper. La de la izquierda, newsidebar-wrapper, lo tiene en 0 para que se pegue completamente a la izquierda de la zona útil del blog.


Si hacemos lo mismo que en la plantilla original y reducimos 10 píxels la columna de las entradas sucede ésto que ves. Al reducirse el ancho, estos 10 pixels quedan vacíos y la separación se produce solo en un lado.


Si los reducimos en la columna de la izquierda, el resultado es exactamente el mismo y lo mismo hará si los reduzco en la de la derecha.
Esto sucede porqué el margen de la nueva sidebar es el primero que interpreta el navegador, con lo que adapta el resto a esta medida.
Y no es que interprete estas órdenes porqué está escrito antes, que como puedes ver, en la imagen en la que se ven los tres, no es así, sinó por que abajo, en la zona del HTML, el código de la nueva sidebar es el primero que se ve, a fin de que aparezcan en este orden y los navegadores se basan en el HTML para mostrar lo que sea, añadiendo luego las propiedades del CSS. Por eso en la mayoría de entradas en las que se habla del CSS se dice que no es demasiado importante donde esté colocado algo, aunque siempre es bueno que mantenga un cierto orden, mientras que es de vital importancia el orden en que se escriben los códigos en el HTML. ¡Sigamos!


¿Como solucionarlo? Muy fácil.
En este caso jugaremos con las medidas y con el margen.
Reduciremos estos 10 píxels en una de las columnas, ya sea la de las entradas o una de las columnas laterales, (en este caso he reducido la central), y los 10 píxels los repartiremos entre los dos lados, sumándole la mitad al margen de la columna central, tal como ves aquí.


Aunque no se vea, solo le he aumentado el margen al main, y no a la sidebar. ¿Porqué?
Porqué, como has podido comprobar antes, la sidebar de la derecha, al estar colocada en esta posición, aparece pegada a la derecha, independientemente del margen que le digas, así el navegador ya le ha sumado, a los 6 píxels que yo le digo, los 5 que hay de diferencia ahora.

Imprime esta entrada

6 comentarios. ¿Quieres añadir el tuyo?

  1. zhenda ha dicho
  2. Hola Eulalia, niña me encanta tu blog y todas las ideas que das... Tengo una preguntilla para ti a ver si me puedes echar una mano. Mira una amiga me mandó el código para insertar la imagen para ir al principio pero en mi blog cada vez que lo hago se me va el fondo y la imagen no aparece por ningún lado. Los botones y yo estamos peleados. Gracias por todo! Un besazo!!http://diariodeclasezhenda.blogspot.com/

  3. Eulalia ha dicho
  4. zhenda:
    Enviame un mail con el código que te ha dado tu amiga y explicame donde va esa imagen exactamente.
    Hablaremos por mail, que puedo enviar códigos.

  5. zhenda ha dicho
  6. ok Gracias guapa! te lo mando todo, es que no me aclaro con todo esto... Me hago unos líos que no veas. Un beso!!

  7. :) ha dicho
  8. Hola Eulalia, quisiera saber como haces para separar los gadgets asi, porque yo los tengo recuadrados pero estan pegados. Agradecería tu ayuda. Un beso :)

  9. Eulalia ha dicho
  10. Has de buscar esto:
    .sidebar .widget {
    border:2px solid #FF3E9E;
    padding-left: 10px;
    background: #FFFFFF;
    {
    y añadir esta línea

    margin-bottom: 10px;

    Haz vista previa y si es poco aumentas ese 10 y si es mucho lo reduces.

  11. :) ha dicho
  12. Muchisimas gracias! :D

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