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.

Centrar la cabecera del blog.

lunes, 27 de julio de 2009

A menudo me llegan consultas sobre las medidas de los blogs. Ya sea que las columnas están muy juntas, ya sea que las imágenes no encajan en las cabeceras, etc.
Voy a tratar de explicar como se solucionan estos problemas, pero como las explicaciones son algo largas, haré dos entradas. Una para las cabeceras, ésta y otra para las columnas.

Así que vamos a ver como centrar las cabeceras.

Cuando se añade una imagen a la cabecera, en un blog no tuneado, blogger ajusta, en la mayoría de plantillas, automáticamente la altura del contenedor.

El ancho depende. Si la imagen es más ancha que el contenedor, si, si es más estrecha no.

En blogs tuneados, o plantillas descargadas desde otros sitios, incluidas las mías, a veces no se ajusta ni la altura.

Esto sucede porqué, (y hablo de las mías, aunque es aplicable a todas), se ha definido una altura en el código. Yo lo hago si añado una imagen a la cabecera.
En cualquier caso, modificar ésto es bastante sencillo. Empecemos con la altura.


Entramos en Diseño/Edición de HTML y localizamos el CSS de la cabecera.

Suele empezar así: #header-wrapper {

Teniendo en cuanta que cada grupo de órdenes termina en un símbolo así } tendremos que mirar en este bloque de órdenes si hay una que diga: height: Xpx; siendo esta X la cantidad de píxels que se le ha dado de altura fija al contenedor de la cabecera.

Modificando dicha cantidad, ya sea haciéndola más grande o más pequeña, lograremos que la imagen encaje en su marco.
Vista previa y guardar cuando lo veas perfecto.

El ancho:

Depende de la plantilla.

Puede ser que el espacio de la cabecera sea independiente o no.

En plantillas en las que esta zona es independiente del resto del blog, suele haber una línea, en el mismo bloque que he mencionado antes, (header-wrapper), que dice: width:Xpx;

Si esta X es tan ancha como el blog y tu imagen no, puedes disminuir la cantidad que haya allí, dejándolo tan ancho como tu imagen, pero ¡cuidado!, si tiene borde, quizá debas añadirle a la medida de tu imagen los píxels de los dos bordes, el izquierdo y el derecho.

¿Como saber las medidas de tu imagen? Es fácil. Si la tienes en tu pc, pones el ratón encima o la clicas una vez, para que le salga un cuadrito en el que están las medidas, el peso y el tipo de imagen que és.


En este ejemplo que os dejo, el 237 es el ancho y el 222 la altura. Siempre la primera medida que se ve es el ancho de la imagen.

Asi, si tu imagen mide, por ejemplo, 800 píxels de ancho y el contenedor de la cabecera mide 1000 píxels, pero tiene un marco (border) de 4px has de pensar que el ancho a dejar, será 808.
Aunque, como no siempre es así, en cuanto hagas la modificación haz Vista previa y si has de retocarlo, hazlo, ya sea reduciendo o aumentando ligeramente esta medida.

En plantillas en las que la cabecera forma parte del total del blog, no siempre se puede solucionar así.
En estos casos, no suele haber width en ese grupo de órdenes, ya que el ancho viene definido en #outer-wrapper .
En este tipo de blogs, tampoco suele haber borde en la cabecera, pero, si lo hubiera, la solución está en darle un margen hacia la izquierda.
Para ello añadiremos unas líneas al código en el bloque del #header { (En este tipo de plantillas no suele haber header-wrapper, solo header).
Dichas líneas serán las siguientes:
max-width: Xpx; y margin-$startSide: Xpx;
Con la primera le decimos que la anchura máxima de header será esa, (recuerda X es la medida de tu imagen más la de los dos bordes si lo hubiera).
Con la segunda le decimos que esta cabecera estará situada a una cierta distancia del principio del blog.

¿Como calcular esta distancia? Es fácil, pero hagámoslo con un ejemplo.

Tienes una imagen de 800 píxels de ancho. La cabecera tiene un borde de 4 píxels y el blog mide 1000 píxels de ancho.
La cuenta es la siguiente: 1000 - [800 + (4 x 2) ]/ 2 = X
Me explico:
A los 1000 pixels que mide el blog, le restamos la suma del ancho de la imagen y los dos bordes y dividimos el resultado entre dos. Cada una de estas mitades será la zona que quedará a ambos lados de la imagen cuando la centres.
Por eso le diremos que la imagen estará a esa cantidad de píxels de distancia del principio del blog.

Mención aparte merecen los blogs sin una medida concreta de ancho.
Modelos como éste en el que estás, en los que las medidas vienen expresadas en % hacen casi imposible la tarea de centrar la cabecera, con el handicap de que los dos navegadores más usados, firefox y explorer, no se ponen de acuerdo en la forma en la que has de decirles que la muestren centrada.
Si ves este blog con explorer, ya sea el 7 o el 8, la cabecera está centrada, pero si lo ves en firefox no.
Si algún dia descubro como hacer que se vea centrada en ambos, ya os avisaré.

Imprime esta entrada

8 comentarios. ¿Quieres añadir el tuyo?

  1. Diana ha dicho
  2. Eres sin duda la reina del tunning de blogs!!! Muchas grácias por tu información!!!

  3. Graciela de Palomas ha dicho
  4. excelente tesoro, no podría estar mejor explicado...besitos!!!

  5. La seño Vanespecial ha dicho
  6. GRACIAS ENCANTO!!! YA LO CONSEGUÍ!! AHORA SÓLO ME FALTA, EL CÓMO HACER QUE LA IMAGEN QUE QUIERO, PONERLA EN HTLM, ESO NO SÉ, ASÍ QUE LO QUE HE HECHO HA SIDO CAMBIAR IMAGEN. Y LUEGO IR MODIFICANDO EL LARGO DE LA CABECERA.

    MUCHAS GRACIAS. YA TE ENLACÉ, QUE NO LO HICE EN SU MOMENTO!!!

    AH!! OTRA COSA QUE ME HA ENCANTADO Y NO SÉ EN QUÉ ETIQUETA BUSCAR, ES CUANDO HE PUESTO MI RATÓN SOBRE LA PALABRA COMENTARIO, HAY MARIPOSITAS ¡QUE CHULO! CÓMO LO HAGO EULALIA, WAPA???

    GRACIAS POR RESPONDER TAN RÁPIDO!!
    BESOTTES

  7. Eulalia ha dicho
  8. Diana: Gracias.

    Graciela: Grcaias a ti también.

    Vane: Lo de las maripositas está en una entrada titulada Decorar lod enlaces. Usa el buscador y la verás.

    Besos a todas.

  9. Luz del Alma ha dicho
  10. Hola Eulalia, quiero centrar la cabecera del blog y no puedo, es una plantilla adaptada por vos, me ayudás?
    GRACIAS!!!

  11. Eulalia ha dicho
  12. Luz:
    Para empezar la imagen es demasiado alta.
    Para centrarla, ya que no se centra sola, en #header la linea de padding: 0; déjala así:
    padding-$startSide: XXXpx;
    Poniendo en lugar de XXX la cantidad que corresponda al espacio que ha de quedar libre en cada lado, según las instrucciones que hay en esta entrada (las cuentas que menciono).

    Para que la imagen entera quede dentro de la cabecera y no salga debajo de las entradas, en la misma zona dinde pone height: 180px; cambia el 180 por lo que haga de alto tu imagen.

    ya me contarás.

  13. Luz del Alma ha dicho
  14. EULALIA, GENIA!!!
    Ya lo hice y quedó de maravillas, eso sí, te cuento un secreto, las cuentas no me daban (porque soy un tantito torpe...)entonces fuí probando con números y... EUREKA!, allí estuvo!
    GRACIAS, GRACIAS, GRACIAS!!!
    Un abrazo enorme

  15. yaroti ha dicho
  16. GRACIASS!!! AHORA POR FIN ECJO MI IMGEN EN LA CABECERA DE MI BLOG!!!!
    GRACIAS! YA TE AGRADI A MIS FAVORITAS

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