JMiur [E]

Cuando colocamos una plantilla o la modificamos y miramos el resultado, muchas veces, nos vamos a encontrar con una duda que puede transformarse en un error conceptual. Queremos cambiar fondos o tamaños pero ¿cuál es el blog? ¿Es todo eso que vemos en la pantalla del monitor? La respuesta es sí pero no.

Lo que vemos, en cualquier página web a la que accedemos es el contenido de la etiqueta BODY y, por lo general, nuestro blog está dentro de ella, definido con otro rectángulo al que, en Blogger, por defecto, se lo identifica como un DIV llamado outer-wrapper ¿Qué significa esto? Que el BODY es TODA la ventana del monitor, del nuestro pero también de los visitantes y allí nos encontramos con una primera cosa a tener en cuenta: las resoluciones de pantalla.

Es lógico que lo primero que se nos ocurre es que lo que ven los demás es lo mismo que vemos nosotros pero, eso no es así. Claro, cada usuario usa una resolución diferente y podemos suponer que sólo hay dos o tres posibilidades pero, si recorremos los resultados que muestran algunos servicio de estadísticas nos vamos a encontrar con datos que llaman la atención. Por ejemplo, miro lo que dice Google Analytics y dice que en el último mes, en este blog, los visitantes usaron ... 143 resoluciones de pantalla distintas. No dos o tres o cuatro o cinco sino 143.


Son demasiadas para tenerlas a todas en cuenta pero, de todas esas posibilidades, sólo debemos concentramos en los anchos ya que la altura no es relevante para diagramar nuestro sitio. Aún así hay casi 100 tamaños distintos. Un rápido ejemplo:

640 720 768 800 819 832 840 844 896 904 922 936 960 969 983 1000 1007 1016 1024 1037 1045 1069 1080 1088 1112 1117 1120 1126 1140 1143 1152 1170 1176 1192 1200 1229 1264 1241 1250 1263 1267 1276 1272 1280 1317 1344 1350 1360 1366 1372 1400 1408 1421 1435 1440 1451 1503 1512 1517 1536 1540 1568 1579 1600 1652 1680 1728 1772 1776 1920 2048 2304 2560 2880 3360 3840 ...

¿Para qué sirve saber esto? A mi juicio, para tres cosas:
  • decidir el ancho de nuestro sitio:
  • centrarlo en la pantalla de cualquier monitor:
  • poder agregarle fondos
Por supuesto, muchas de ellas son decisiones personales, en mi caso, si el 90% de los usuarios usa resoluciones iguales o mayores a 1024, ese valor debería ser el mínimo. Evidentemente, tal como vienen las cosas, es probable que en poco tiempo más, incluso eso sea escaso ya que hablar de resoluciones de 1280, 1440 o 1680 se está haciendo cada vez más común. Para un usuario novel, este es un problema serio porque todas las plantillas que provee Blogger están pensadas para resoluciones de 800 y por lo tanto, hoy por hoy son demasiado angostas. Incluso muchas plantillas que vemos en distintos sitios de descargas siguen con ese criterio y me parece un error que no suele ser sencillo de corregir (Modificando las plantillas (Tutorial 1: Anchos)).

¿Cómo es eso de centrar el blog? ¿Centrarlo con respecto a qué?

Miremos la pantalla. Todo lo que nos muestra el navegador es el BODY, su ancho es siempre igual al ancho de la resolución de pantalla. Es un gran rectángulo que medirá cierta cantidad de pixeles. Nuestro blog quedará dentro de eso así que podríamos ver diferentes cosas en diferentes monitores:

800x6001024x768
1280x960
1680x1050

Si el blog no está centrado, veremos esto:


Cuando escribimos un post, tal vez, si no hay remedio, podemos usar alguna etiqueta poco recomendable como <center> </center> porque no se nos ocurre nada mejor o no encontramos una solución; no es lo más recomendable pero bueno ... Sin embargo, al diagramar plantillas, esa etiqueta debe desterrarse, el diseño (layout) de una plantilla debe ser claro, simple y estar basado en DIVs (rectángulos identificados con un nombre único) cuyas propiedades deben ser establecidas con CSS. Haciendo eso, tendremos un sitio flexible, fácil de editar y accesible desde cualquier navegador.

El BODY no tiene un ancho fijo, y usar la propiedad text-align: center para centrar el blog no servirá. Lo que debemos centrar es el rectángulo exterior, el primer DIV, el que por defecto se llama outer-wrapper.

Para centrar DIVs tampoco usamos text-align: center porque eso, centra el contenido de ese rectángulo pero no el rectángulo en si mismo. Para centrarlos debemos darle un ancho (width) y utilizar la propiedad margin. Así que, como mínimo, una plantilla debería tener establecidas estas propiedades:
#outer-wrapper {
.......
margin: 0 auto;
position: relative;
width: VALORpx;
}
De este modo, sin importar el VALOR, el blog estará centrado en la pantalla del monitor a menos, claro, que alguien utilice resoluciones menores que ese ancho en cuyo caso, aparecerá una barra de desplazamiento horizontal.

48 comentarios:

Kirei  

Hola JMiur muy buen post,me vino bárbaro porque hoy estaba luchando con un blog de pruebas y es difícil cuando no sabés como lo ven los demás, yo tengo un monitor de 20 pulgadas y siempre queda mucho espacio a los costados, te cuento que hay un sitio donde podés ver como queda tu blog en distintas resoluciones http://viewlike.us/ lo encontre en el blog de girlyblogger. Espero que te sirva el aporte. Saludos desde Córdoba

Responder
Víctor  

Belleza Jmiur, pero lo que mas me intriga es si hay algún comando para expandir el fondo del blog en la pantalla dependiendo de cada resolución como en el escritorio de Windows, algo como un expand o algún wareber de ese tipo.

Responder
Vku  

muy buen articulo.
pero igualmente es dificil hacerlo para todos los gustos.
yo en mi caso tengo de resolucion 1024x768
y mi página tiene un ancho de 770 px.
pero generalmente cuando navego por internet me encuentro con páginas muy anchas eso me molesta ya que no puedo verla en su totalidad de una.
y mas ahun porque tengo al costado los marcadores.
todo esto es una opinion personal
tambien hay un código javascript que detecta y cambia eligiendo el .css
por supuesto que necesitas un alojamiento
yo en lo personal no lo utilizo jamas
pero si que es dificil hacerlo para todos
y sobre todo tambien esta lo de los distintos navegadores y sus verciones.
yo decidi hacerlo asi de 770 que en casi todos se ve bien y dejo un mensaje solo para los que hablen con IE que mi página o blog esta echo en un 100% para firefox.
ahora mi pregunta:
si mi blog es de ancho 770 para que resolucion seria?

Responder
Vku  

otra pregunta: como haces para que quede dentro de outer-wrapper una imagen fija con position:fixed

Responder
Analia Alvado  

Hola, JMIUR, luego de entrar a la dirección que te dejó Kirel, en el primer comentario, pude terminar de comprender el post. Si lo hubiese visto antes de leerte, entonces hubiera entendido menos. 800x600 es la resolución que más se adapta a mis ojos y al monitor de mi PC, sin embargo, cuando trato de añadir al blog un fondo de imagen con un gadget, nunca encuentro la medida que necesito… x ej. Los de este sitio: http://thecutestblogontheblock.com/free-backgrounds.html , que los probé a todos y no entendía nada.

Después de leerte, mi frustración se ha resolucionado… :D

Responder
JMiur  

Gracias, Kirei, muy buen dato el de ese sitio, no lo conocía.

Víctor: No, no hay nada semejante. En el CSS, las imágenes usadas como background no se dimensionan. Lo único que puede hacer es usar patterns o mosaicos que se repitan pero, a mi juicio, la lógica es basarse en un modelo o resolución de pantalla que uno crea razonable y concentrarse en eso porque es imposible adaptarse al 100% de las alternativas.

Vku:
No es que hacerlo para todos los gustos sea difícil, es imposible :D Sólo podemos hacer "lo que podemos hacer" :D
Es verdad, pueden usarse alternativas que cambien el CSS. De hecho, las usé hasta hace un par de años.
Si tu blog tiene un ancho de 770 pixeles se verá en cualquier resolución salvo excepciones, digamos resoluciones de 800 pixeles en adelante; casi no hay monitores de resoluciones más bajas. En lo personal, y esto es muy subjetivo, diría que resoluciones de 1024 en adelante son als normales y por lo tanto, un ancho de hasta 1000 pixeles es más que aceptable y sería lo lógico; pero claro, eso no sóolo es opinable soino que depende del tipo de fondo a usar, de los márgenes, etc, etc, etc.

Para fijar una imagen de fondo hay que colocar el valor fixed en la propeidad background:
background: #color url() no-repeat fixed left top;

Responder
Graciela  

qué buena entrada!!! :) ahora me quedo con la duda de cómo se verá mi blog en distintas resoluciones...en algunos blogs te ofrecen verlo en diferentes resoluciones...yo puedo verlos bien a todos los que visito.
Ni idea del tamaño de mi monitor :D, ahora tomo el centímetro jajaja...buen comienzo de la semana!!!

Responder
JMiur  

El enlace que deja Kirei es bueno para probar cómo se ve el blog: http://viewlike.us/. El tuyo se ve bien, sin problemas :D

Responder
Lic.Daniel Gianni  

¿entoces cada persona que ve mi blog lo ve con diferncia de colores?
soy nuevo en esto no deseo arriesgar muchas gracias
daniel katrina.daniel@gmail.com

Responder
Gem@  

Me encantan estas entradas donde de forma tan clara se entiende y aprenden cosas útiles.
¿Sabes? me habían preguntado mucho si era posible dimensionar una imagen de fondo para que se adaptara a cualquier resolución, mi respuesta era la misma que has dado aunque siempre queda esa duda de si hay alguna solución que desconocemos.
Gracias maestro :)

Mañana recojo el cocotero :D

Responder
MALINA  

Magnifico el articulo! me lo guardo para cuando necesite echar mano de el.
He aprovechado para localizar los otros 5 tutoriales a través de tu buscador y ya estan todos a buen recaudo. Ahora lo dificil es sacar el tiempo para leerlos y aprender de ellos.

Gracias siempre por tu ayuda

Besosssssss

Responder
Vku  

JMiur si realmente es imposible para todos.
lo de dejar fijo y que quede dentro es para unos menu que estoy probando y ayer me puse a hacer experimentos con css y lo pude lograr utilizando unos div, puse lo que queria dejar fijo con relative y esto dentro de un div fixed. si queres pasa por mi blog fijate como quedo, ya cambie el de la izquierda y de abajo me queda solo el de la derecha que cuando pueda lo ago, gracias por todo y realmente sos un grande en esto, te tengo linkeado en mi blog.
cualquier cosa a las ordenes para lo que necesites.

me resulto de utilidad esa página para ver las resoluciones gracias Kirei.

Responder
JMiur  

Daniel: en ningún momento hablamos de colores.

Gem@: No hay nada de eso para los fondos, en realidad, no sé hasta que punto podría ser útil pero sería una curiosidad. Por cierto, ahora digo "palmeras" es que quiero ampliar la cosa y abarcar un poco más :D

Saludos, Malina. Me alegro que sirva :D

Perfecto, Vku :D A todos nos gustó el aporte de Kirei, buen sitio.

Responder
Víctor  

Quiero implementar eso del #outer wraper pero no lo tengo en mi plantilla, yo lo que tengo es #main wraper, ¿son lo mismo?, ¿que hago?

Responder
JMiur  

Victor:

Si se trata de la Plegaria de un pagano, no hace falta porque está centrado.

El DIV outer-wrapper existe en tu plantilla pero no tiene propiedades, sin embargo, hay otro, interior, llamado content-wrapper que tiene las propiedades correctas:

#content-wrapper {
margin:0 auto;
text-align:center;
width:1150px;
}

Responder
ALvaRiTo  

hola Jmiur lo que quiero es centrar el background. pero ya vi que mi plantilla es muy diferente a las que mensionas aqui. quiero que el cotenido util sea blanco y los lados celeste. pero tengo que hacer el background a la medida, del contenido util. y a los lados igual . osea blanco 940px y celeste una medida igual a ambos lados. creo,,, es asi? ahorita estoy en un curso online de corel draw porque no se nada de ese prograna, pienso aplicarle degrade . eso..

Responder
ALvaRiTo  

ah y ya vi esa pagina para testear la plantilla en diferentes resoluciones. y mi plantilla se ve bien. no se deforma como las otras

Responder
JMiur  

El fondo, si está en el body, se centra con background:

background: #color url(laimagen) no-repeat 50% top;

y el cuerpo del blog, dimensionando el div más externo (usando width) y colocando margin: 0 auto;

Pero esas son propeidades generales y todo dependerá del diseño que se quiera hacer.

Responder
Dr. Litos  

Muchas, muchísimas gracias por esta simple explicación. He conseguido centrar el blog de una maldita vez por todas, llevo MESES lidiando con ello por querer correr antes que empezar a andar...

¿He dicho gracias?? Un saludo!

Responder
Zeros  

Hola, Jmiur, ¿te puedo pedir ayuda?

El otro día, sin causa aparente (había funcionado bien hasta entonces), la sidebar de mi blog se fue a vivir su propia vida al fondo del blog en vez de a la derecha de las entradas.

El caso es que había configurado (y aún está así) el outer-wrapper a 985px, el main-wrapper a 700 y el sidebar-wrapper a 250, así que en principio debería entrar bien. De todas formas, he probado a cambiar el main-wraper a menos de 400px, y la sidebar sigue debajo. Ya no sé qué hacer... (Incluso he reiniciado la plantilla, pero nada).

El blog en cuestión es el que se llama z-e-r-o-s.blogspot.com

En cuanto a lo que explicas en esta entrada, yo he centrado la sidebar usando "div align=center", y ha funcionado, y lo mismo con las entradas. Podría decirte dónde puse la etiqueta "div" si quieres ;)

Un saludo, y gracias!

PD: perdón por el offtopic, pero es que ya no sé qué hacer... :(

Responder
JMiur  

Zeros:
Lo más probable es que tengas un error en esta entrada: Power Balance, ya que si navegas etiquetas, la mayoría se ve bien salvo la que contiene ese post. Todo parece producto de un error en la forma de usar MORE. Fíjate acá

El parámetro align no hará que un DIV se centre ya que lo que hace es centrar su contenido. Tu blog está centrado justamente porque outer-wrapper tiene un width definido y el margen está establecido como 0 auto.

Responder
Zeros  

Muchas gracias, JMiur, he vuelto a nacer ^^

Me estaba desesperando ya, he revisado la plantilla tres quintillones de veces :D (mi amigo no se conformó con cambiar la fuente, tuvo que cambiar también el tamaño y la alineación, había etiquetas de "span" por todas partes. XD)

Respecto a lo que comenté del centrado, olvídalo, me refería al centrado de los textos, no al del cuerpo del blog. :$

Muchísimas gracias y un saludo!

PD: cómo montar el favicon lo saqué también de aquí, así que gracias por todo ^^

Responder
JMiur  

Zeros:
Es algo que puede pasar y con MORE, el problema ha aumentado; me alegro que se solucionara :D

Responder
Fackss  

Hola Jmiur, tengo un problema:
aqui esta el Outer-Wrapper de mi Plantilla

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background:#ffffff;
width: 980px;
margin:0px 10px 20px 10px;
padding:0px 0px 0px 0px;
border-left:3px solid #000000;
border-right:3px solid #000000;
border-bottom:3px solid #000000;
text-align:$startSide;
font: $bodyfont;
}

y el problema es que mi Computador tiene una Resolucion de 1024 x 768.
Se Ve bien con esa Resolucion pero cuando pruebo en ver la Pagina con la Resolucion de 1280x1024 el blog se ve todo hacia la Izquierda (no se centra) y nose como hacerlo porque el Codigo ya tiene ancho (Width 980) entonces nose que hacer.
Me ayudas?
Gracias

Responder
Fackss  

disculpa ya lo eh solucionado me faltaba colocar el
margin:0 auto;

Muchas Gracias

Responder
La hormiguita  

Hola, te mandé hace unos días una pregunta, por el otro formulario de contacto... no se si no llegó o estás muy ocupado, ya que nunca se publicó...Así que por si no llegó te la vuelvo hacer y si estabas ocupado, te pido disculpas.
La pregunta es estoy trabajando con la plantilla que baje dizembre 1 ya la achique, tenía más de una imagen de 1250px, y eso quedó bien, el tema es que si se la ve en una pantalla mayor la página esta toda a la izquierda y la revise y no puedo encontrar como centrarla y encima si se me ocurre agregar un gadget, el que está en el footer queda centrado y en la pantalla mas chica se vería la mitad, se puede hacer algo?
gracias.http://www.estudiobossertyasociados.com/ estas como usuario.
Gracias. nuevamente.
La hormiguita.

Responder
JMiur  

Pués no, lo he buscado por si había quedado traspapelado pero, no lo he encontrado así que es probable que no haya sido enviado por algún motivo.

Centrarlo es posible, para eso, deberías cambiar dos propiedades en #outer-wrapper
#outer-wrapper {
.......
margin:0 auto;
width: 1024px;
}

El problema que tendrás es que el body tiene una imagen de fondo que enmarca el contenido del blog y el body es siempre la pantalla completa. Así que también deberás centrar ese fondo; en este caso, sólo la imagen, de este modo:

body {
.......
background:#000 url(TUIMAGEN) repeat-y 50% 0;
}

Ese dato 50% le dice al navegador que coloque la imagen de fondo en el centro de la pantalla, sin importar su ancho.

Responder
La hormiguita  

Quedo genial!!!!!, gracias... ahora no entiendo porque width 100% lo centra a la izquierda?
:D

Responder
JMiur  

Porque el 100% es el 100% de algo, del contenedor y ene ste caso, el contenedor es el BODY que tiene un ancho equivalente al total de la pantalla. No es que se alinee sino que ocupa todo el ancho pero, adentro, hay cosas más pequeas y entonces, queda un espacio vacio a la derecha.

Es lo mismo que ocurrirá si dentro de un DIV de 300 pixeles, colocas un DIV de 100 pixeles. El segundo se alineará a la izquierda y si dentro de ese de 100 colocas uno que diga 100%, tendra 100 de ancho y tambien se alineará ala izquierda.

Un poco confusa mi explicación :D

Responder
La hormiguita  

La verdad la explicación parece las muñecas rusas esa que van una dentro de otra, bueno a ver si entendí, lo que vos me decís es que en el body esta el hombre invisible entonces cuando yo le digo 100% se ubica la página a la izquierda y lo invisible a la derecha.... y si le digo 1024px se centra y el hombre invisible se parte en dos y se pone cada parte en un costado????
Igual quedo

Gracias

Responder
JMiur  

El body es un enorme rectángulo que ocupa toda la pantalla, sea cual fuese ese ancho.

Cuando colocas algo dentro (un DIV) y le dices que ocupa el 100%, es el 100% del body.

El tema es que dentro de ese DIV de 100% hay otros más (las muñecas rusas de las que hablas) y alguno de ellos, tiene un ancho de un valor en pixeles asi que no ocupa el 100%, y a la derecha, aparecerá entonces ese espacio vacio; como es más chico, sobra espacio.

Si le damos un ancho fijo al primer DIV, lo centramos diciéndole al navegador que calcule cuanto mide la pantalla y meta eso en el medio, eso es lo que hace margin: 0 auto; Callular un margen igual a derecha e izquierda.

Responder
La hormiguita  

Genial, ahora sí entendí....gracias!!!!! muy bueno.
:)

Responder
La hormiguita  

Hola.... por aquí ando... el blog que estoy realizando http://www.estudiobossertyasociados.com/en el que estás como usuario, en mi pantalla lo veo bien pero cuando lo paso a monitor de 1024 por 768 la mitad del blog para abajo esta corrido unos centímetros... me podrias decir que puedo hacer??? para corregir ese defecto. Mil gracias!!!!:D

Responder
JMiur  

Pués lo he visto y es curioso. No logro entender el motivo de eso porque parece ilógico. Seguiré mirando a ver si encuentro algo, por ahora, no tengo respuestas.

Responder
La hormiguita  

Muchisimas gracias por solucionar el problema de la plantilla, quedo perfecto!!!!!!!:D
Eternamente agradecida.

Responder
JMiur  

Me alegra que se resolviera :D

Responder
LUNA  

Buenas tardes...
Estupendo post ...muy bien explicado ...
Muchisimas gracias ..y tambien al aporte del enlace que ha dejado Kirei ...muy bueno para comprobar como queda....
Me ha servido de mucho ...y nada ..que tocara seguir machacandonos la cabeza a ver como se pueden ir solucionando estos detallitos.
gracias...

Responder
Yurika-Chan  

JMiur funciono a medias, en un blog funciono sin problemas, pero en otro nada de nada, no logro que funcione, que diferencia puede haber uno con el otro para que no funcione

Responder
JMiur  

Muchísimas. No hay forma de saberlo sin ver de qué se trata.

Responder
Yurika-Chan  

Solucionado, el Outer-wrapper tenia un margen a la izquierda

Responder
Eugenia  

¿Puedo aplicar esto para centrar un main-wrapper en el outer-wrapper? Pregunto porque al hacer una entrada con formato propio ocultando la sidebar, el main se me pega al lado derecho del outerw y queda horrible, con las medidas standars de la minima (Outerw660px, mainw410px y sidebar 220px)el truco de ocultamiento queda bien y todo está centrado, pero al tener las medidas modificadas, no y entiendo que me está faltando algo para obligar al main a desplegarse correctamente en todo el espacio abierto del outerw, pero no lo consigo.

saludos!

JMiur  

Habría que ver tu ejemplo concreto pero, así, en general, verifica que:

main-wrapper no tenga la propiedad float o agrégale float:none cuando se "despliega"
main-wrapper cambie su ancho si es que quieres que ocupe el espacio de la sidebar
main-wrapper tenga margin:0 auto; si quieres centrarlo

Todo eso es genérico, viendo tu ejemplo concreto se puede verificar qué propiedades faltan o sobran.

Responder
thecatmen  

muy buen aporte
me a ayudado mucho

gracias

Responder
Jalu  
Este comentario ha sido eliminado por el autor.
JMiur  

Si es en el blog que está en tu perfil, poner margin:0 auto; en body carece de sentido, puedes quitarlo.

En la regla de #outer-wrapper {} tienes errores; hay dos llaves de cierre y esos puntitos debes quitarlos ya que sólo idican que ahi puede haber otra propieda, en ese blog; width: 1002px; as´´i que en lugar de:

#outer-wrapper {
.......
margin:0 auto;
width: 1002px;
}
}

debería decir:

#outer-wrapper {
margin:0 auto;
width: 1002px;
}

Jalu  
Este comentario ha sido eliminado por el autor.
Responder
Jalu  
Este comentario ha sido eliminado por el autor.
JMiur  

No puedes crear directorios o subdirectorios en Blogger; para hacer eso, necesitas un hosting propio.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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