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 o alinear la menubar

viernes, 31 de julio de 2009

La menubar es esta barra de botoncitos que podeis ver bajo la cabecera.
Hace ya tiempo encontré en el blog de Rosa el modo de colocarla y os expliqué como hacerlo.
Posteriormente fui descubriendo como modificarla para darle el aspecto de botón, como ponerle a esos botones fondos que hicieran juego con el blog, ya fueran de color o de imagen, como crear variables para modificar la fuente y el color del botón tanto cuando se ve como cuando se pone el ratón encima y como aprovechar la zona del crosscol, un espacio que blogger gentilmente ha colocado bajo la cabecera de nuestras plantillas para que podamos poner publicidad.

A lo largo de este tiempo me han preguntado varias veces si se podia centrar cuando hay pocos enlaces, o alinearla con el resto del blog, cuando está llena de botones.

Todas las pruebas que había realizado hasta ahora daban como resultado que los enlaces se vieran en forma normal, uno bajo otro, con lo que ya había desistido de intentarlo.

Pero hoy, mientras estaba revisando todos los blogs para configurar el tema de los comentarios, he modificado los botones de los blogs de Utilidades, quitando el de google earth, (tema que tengo pendiente pero que no se como enfocar) y colocando en su lugar el de Gadgets.
También he añadido el del Diccionario y, al hacerlo, el último botón, correspondiente al Blog roll, ha quedado raro. Las dos palabras se han colocado una bajo la otra, ya que el botón entero no cabía en el espacio que tienen estos blogs, sin embargo seguia quedando una zona muerta a la izquierda.

Y de repente se me ha encendido la bombilla y he hecho una prueba.
¡Bingo!
La menubar se ha alineado con la sidebar, que en estos blogs está a la izquierda y el último botón ha recuperado su aspecto normal.

Luego, para ver si se podía centrar, he hecho la prueba en Música. ¡Perfecto!.

Es tan sencillo como añadir esta línea:

margin-$startSide: 0;

en este trocito de código: #menubar ul { antes del símbolo } que lo cierra, con lo que este trocito queda así:

#menubar ul {
list-style: none;
margin-$startSide: 0;
padding: 0 0 20px 0;
}

Si lo que quieres es centrarla en lugar de 0 pones la cantidad de píxels que creas necesarios para que empiece a verse. En el blog de música, por ejemplo, son 100.
En este caso has de expresarlo así:

margin-$startSide: 100px; (el 100 es un ejemplo)

Luego haces vista previa y vas reduciendo o aumentando esa cantidad según veas.

Solo una nota de atención: Si tu blog tiene una plantilla en la que las medidas vengan expresadas en % no vas a lograr centrarla, ya que el ancho del blog depende de la resolución de la pantalla con que se mire, con lo que lo que tu veas bien, otro puede verlo desplazado.

Y en la scribe a 3 columnas, no se ve en la misma posición si se mira en Explorer que si se mira con Firefox.

Por lo demás, en la minima ha quedado perfecto, tanto el alineado como el centrado, y se ve correctamente en los dos navegadores.

Imprime esta entrada

7 comentarios. ¿Quieres añadir el tuyo?

  1. dora ha dicho
  2. Muchas gracias Eulalia,sinceramente
    te admiro. Estás haciendo una noble labor, el ayudar a otras personas. gracias

  3. Aly Cullen ha dicho
  4. muchas gracias me ha servido de mucho
    una pregunta, no se si ya lo habias explicado antes
    se puede poner una imagen de fondo en la menubar?? no me refiero a cada boton, si no una imagen de fondo que contenga todos los botones :)

    muchas gracias por tu ayuda n.n
    saludos

  5. El panal de la Abejita ha dicho
  6. Hola Eulalia!!! Excelente tu blog de ayuda.. Seguí tus pasos para llevar una plantilla scribe de dos columna a tres y me da el siguiente error: "Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Informacón:StartSide." He repasado paso a paso para ver en donde cometí el error sin resultados favorables.. Podrías ayudarme por favor??? Gracias!! Marisela desde Venezuela markisa_20@hotmail.com

  7. Eulalia ha dicho
  8. Aly:
    Para ponerle este tipo de fondo deberías colocarla en el crosscol y ponerle un fondo a esta zona.
    Saludos

  9. Eulalia ha dicho
  10. Abejita:
    Si te dicee sto es que tu plantilla es antigua y no usa estas definiciones.
    Pon left en lugar de $startSide y right en lugar de $endSide.
    saludos.

  11. Conchita ha dicho
  12. Hola, Eulalia: Te escribo desde Bibliofagia, el gadget de los seguidores se me ha quedado vacío desde hace 2 días, ¿cómo lo puedo arreglar?
    Una altra cosa, después de simpsonizarme, ¿cómo puedo guardar la foto simpsonizada CON LA CAÍDA DE OJOS?
    No puedo guardarla de ninguna manera, haría a la desesperada una captura de pantalla, pero entonces no se vería la "caída de ojos" que es lo que más me gusta, ¿cómo lo has hecho tú para tenerla tan perfecta en la cabecera de tu blog?
    Gracias anticipadas y un abrazo.

  13. CRISLLUI ha dicho
  14. Como siempre explicandonos y enseñandonos cosas nuevas, pasate por mi blog que te he dejado un regalo. Saludos

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