Un problema solventable. Ancho variable del blog | Oloblogger Una de las cosas a la que no prestamos mucha atención cuando comenzamos a desarrollar nuestro blog, es la que se refiere al ancho que tendrá...

21 de junio de 2008

Un problema solventable. Ancho variable del blog

Una de las cosas a la que no prestamos mucha atención cuando comenzamos a desarrollar nuestro blog, es la que se refiere al ancho que tendrá nuestro espacio. Cogemos una plantilla, hacemos las pruebas pertinentes observando el resultado en NUESTRA PANTALLA y cuando nos gusta, la instalamos.

Lo que ocurre es que hay una importante diversidad de resoluciones y cada usuario verá la página ajustada a su propia resolución. Como leemos de arriba a abajo, el alto no supone ningún problema, ya que para eso está la barra de desplazamiento. Pero lo que ya es un poco coñazo es tener que mover el scroll horizontal cada vez que terminamos una línea o cada vez que queremos ver la barra lateral que queda oculta. Esto último ocurre, por ejemplo, cuando diseñamos un ancho de 1024 pixels y el usuario tiene una resolución de 800px. De este asunto es de lo que se queja nuestra amiga de Androides Roqueros.

Resolución de 1280px

Resolución de 800px

Actualmente, los anchos habituales son de 800, 1024, 1280 y 1440 pixels. Por tanto, si creamos una página con 800px, todo el mundo la verá correctamente. Eso sí, infrautilizamos el espacio disponible y en resoluciones muy grandes, el contenido se quedará como muy desangelado en el centro de la pantalla.

CSS nos permite una solución, pero que no está exenta de otro tipo de problemas. Existe una instrucción (WIDTH) en la que se puede indicar el ancho en pixels de cada uno de nuestros contenedores y que ya vimos en "Crear bloques de información". Si bien lo habitual es indicar un ancho fijo mediante una expresión numérica de pixels, también se puede utilizar un expresión porcentual.

Así, en lugar de usar width:200px; también podemos usar otra similar a width:80%;

El ancho así definido, expresará que tanto por ciento del ancho disponible, debe ocupar el contenedor correspondiente.

Un ejemplo. Definimos un contenedor principal (outer), en el que luego colocaremos un espacio para entradas (main) y otro con la barra lateral (sidebar). Respectivamente, 1000, 750 y 250 pixels de ancho fijo.

#outer-wrapper {
width: 1000px;
...
}
#main-wrapper {
width: 750px;
...
}
#sidebar-wrapper {
width: 250px;
...
}

Cuando alguien con pantalla de 800px vea nuestro blog, el contenido que sobrepase ese ancho (200px), quedará oculto a la derecha y tendrá que usar la barra de desplazamiento horizontal del navegador para poder ver ese trozo de página. Cuando alguien con 1440px de resolución visite la misma página, verá un hueco de 440px, bien repartido a ambos lados o bien en uno de los dos lados, según el diseño de la plantilla.

Sin embargo, si hacemos esto otro...

#outer-wrapper {
width: 100%;
...
}
#main-wrapper {
width: 75%;
...
}
#sidebar-wrapper {
width: 25%;
...
}

...cualquier usuario verá una página en la que las tres cuartas partes del ancho estarán ocupadas por el contenedor de las entradas y la otra cuarta parte la ocupará la barra lateral.

Actualmente, este blog tiene una cabecera de ancho fijo y cuerpos de entradas y barra lateral variables. Si le dais al botón "restaurar" del navegador y luego abrís y cerrais la ventana manualmente en cuanto a anchura, apreciareis el resultado. Tened en cuenta que las imágenes no modifican su tamaño, pero que las líneas de texto sí lo hacen, tal y como pasa por ejemplo con Word cuando cambiais los márgenes.

Resolución de 800px

Resolución de 1280px



Fácil ¿no?... Pues la verdad es que sí y no. Ahora empiezan los problemas. En las plantillas más sencillas, no existirán mayores pegas que las relacionadas con los márgenes (margin) y los espacios (padding). Según el explorador (IE, Firefox, Opera...) el tratamiento de estas instrucciones tiene un resultado un poco distinto, lo que provocará que por un solo pixel, quizás no quepa el contenedor definido y se nos descuadre toda la estructura. En este caso con no apurar el espacio, tenemos suficiente. Usemos el 98 o el 99% del ancho total y en los bloques "interiores" al principal, pongamos por ejemplo un 74% y un 24%. Evidentemente, estos dos últimos no sumarían un 100%, pero eso es precisamente lo que queremos para evitar problemas.

Experimentando con la plantilla y probando con Vista Previa antes de salvar, esto lo solucionais con poco trabajo.


Otra cosa que ya requiere un poco más de trabajo es el rediseño de páginas con muchas florituras gráficas, como esquinas redondeadas o dibujos formados por distintos elementos.

Una cabecera con esquinas redondeadas, normalmente se hace montando una imagen que contenga las esquinas superiores, a continuación un fondo (background) plano del mismo color y por último otra imagen con las esquinas inferiores. "Encima" del conjunto, irá nuestra imagen principal o texto (el fondo negro sólo es para que se aprecien las esquinas; realmente debería ser transparente)



Este sería el resultado con anchos fijos:


Pero cuando nuestro contenedor tiene un ancho variable y el dibujo de las esquinas tiene un ancho fijo, según que la resolución del usuario sea mayor o menor que la esperada, pasan cosas como estas:



Siento no poderos dar soluciones concretas, porque dependerán del diseño gráfico de cada web y sólo hay que darse una pequeña vueltecita por internet, para ver que hay casi tantos diseños como personas.

Pero para que no desespereis, aportaré al menos que muchos casos se solucionan de una forma relativamente sencilla. Hay que usar imágenes de alto fijo y montar el resultado en vertical utilizando las propiedades de repetición y posición de BACKGROUND, tales como NO-REPEAT, LEFT, TOP, etc., sustituyendo las imágenes "base" anteriores por otras como estas:


También se puede fijar la parte superior-izquierda y colocar "imágenes complementarias" a la derecha y abajo. Pero como hemos dicho, esto es mucho más complicado de hacer y, sobre todo, de explicar aquí caso a caso.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

60 comentarios :

  1. Hola...

    Tus trucos me han servido de mucho pero quisiera saber que haces para vincularte en tu mismo blog con los botones divertidos que estan arriba...

    Espero tu ayuda. Gracias

    ResponderEliminar
  2. Hola, una preguntota si no es molestia.

    He visto en algunas páginas que cuando uno le da click a un vínculo la página se oscurece y aparece un cuadro blanco y en ese cuadro aparece la foto o el video del link y una "x" para cerrar el cuadro y volver a como estaban.

    Te dejo una págin que hace eso.

    No se si se pueda o no poner en blogger, en caso afirmativo me supongo que sabrás como.

    Sería mucha molestia?

    Un saludo y gracias.

    ResponderEliminar
  3. Lo siento... el link

    http://www.chistesybromas.com/news.php

    ResponderEliminar
  4. Cab, Yop... No entiendo muy bien si preguntais algo más profundo o simplemente lo que parece. Si es lo segundo, aquí van sendos enlaces.

    Cab: Crear un enlace

    Yop: Galería de imágenes

    ResponderEliminar
  5. Pero ahora ¿podrias ayudarme con otro? Es el truco de la "pagina doblada": Aqui se muestra...

    http://keytrucos.blogspot.com/2008/04/efecto-pgina-doblada.html

    ...esta pagina explica como se hace pero no entien a que se refiere con "Google Pages o algún servicio de alojamiento para conseguir las direcciones URL de cada archivo."

    ResponderEliminar
  6. Oloman, muchísimas gracias, de verdad aprecio tu ayuda. Desafortunadamente no voy a poder aplicar tus conocimientos a mi página rápidamente, porque tiene muchas florituras gráficas, como tu dices, y ahorita no tengo tiempo de quebrarme la cabeza con todas ellas :). Pero gracias, ya me diste la idea de cómo meterle mano.
    Saludos!

    ResponderEliminar
  7. Estoy seguro de que si es eso oloman.

    Mil gracias y lo vamos a probar.

    ResponderEliminar
  8. La página de Key es muy buena. Os la recomiendo.

    En la entrada que citas, Key dice que hay que cargar unos ficheros previamente para poder aplicar el efecto. Esto ocurre con muchos trucos en los que hay que utilizar scripts, que no son más que unos mini-programas que realizan determinadas rutinas.

    Pero estos scripts no siempre pueden alojarse en Blogger o no es práctico hacerlo. Por eso os recomienda que los subais a "Google Pages u otrso servicios de alojamiento".

    Igual que subes fotos a Flickr o Imageshack, o vídeos a YouTube, hay otros sitios donde puedes subir scripts.

    Google Pages no es exactamente un sitio de alojamiento, pero te permiten crear gratis una página web y subir los ficheros que necesites. Por tanto, te das de alta, creas cualquier tontería y luego subes lo que quieras. Posteriormente te fijas en la dirección que te facilitan para ese fichero y lo podrás utilizar aquí en Blogger o en cualquier sitio.

    Siento no poder explicarme mejor, peor tampoco va a ser este comentario mayor que una entrada... y ya casi estoy batiendo ese récord.

    ResponderEliminar
  9. Hola Oloman: No sé si estoy en la sección correcta, pero lo único que desearía que los textos de las entradas en mi blog aparecieran bien encuadrados, es decir que el texto de cada línea terminara a la misma altura tanto a la izquierda como a la derecha, formando un rectángulo perfecto.
    Si me pudieras ayudar te estaría muy agradecido.
    Aquí te dejo el enlace a mi blog:
    LIBRO ABIERTO
    http://libroabiertorudyspillman.blogspot.com
    Un saludo y gracias por tu tiempo.
    Rudy

    ResponderEliminar
  10. Hola Rudy. Te había visto mucho por UNIBLOG, pero nunca por aquí.

    Para arreglar lo de la justificación de texto, busca

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted #000000;
    padding-bottom:1.5em;
    text-align:justify;
    }


    y añade la línea que te he marcado en negrita. Eso es todo.

    ResponderEliminar
  11. Sí, como tú bien dices, es verdad. Pero no he tenido tiempo de ocuparme demasiado de la estética del blog.
    De todas maneras, pienso revertir esto.
    En relación a tus instrucciones, las llevé a cabo al pie de la letra, pero como podrás observar tú mismo si lo deseas, no ayudó.
    Si tienes alguna otra idea de lo que puede estar sucediendo, bueno, aquí volveré para leer tus consejos.
    Un gusto saludarte nuevamente y que empiece un buen año para ti también.
    Rudy

    ResponderEliminar
  12. Rudy, si no te funciona, debe ser porque al crear la entrada incluiste un div align="left" u otro atributo html similar, y eso tiene prioridad sobre la plantilla.

    Eso sólo lo puedes ver tú editando una entrada ¿Lo puedes comprobar?

    ResponderEliminar
  13. Sí, efectivamente, Oloman. Lo que tú dices aparece en el html de las entradas. Pero yo no lo hice. ¿Sabes cómo lo puedo extraer de allí?
    Gracias por tu buena y rápida predisposición.
    Rudy

    ResponderEliminar
  14. Automáticamente, de ninguna manera Rudy. Hay que hacerlo a mano. Posiblemente hayas creados los posts desde la pestaña "Redactar". Ahí, no existe la justificación y sólo tiene opciones para alinear izquierda, centro y derecha.

    Además, cada vez que aplicas un color o un formateo de algún tipo, el HTML se te va llenando de SPAN (no SPAM) y similares.

    Yo prefiero redactarlo desde la pestaña de HTML y luego retocarlo con la otra.

    Prueba con la siguiente entrada y si te va bien, ya hazlo siempre así

    ResponderEliminar
  15. Muchas gracias Oloman, lo intentaré.

    ResponderEliminar
  16. Oloman Coloque Todo Al Pie De La Letra, Pero Me Gustaria Que Todo Quede Centrado Porque Se Fue Ala Parte Izquierda Del Blog, Que Tengo Que Cambiar o Colocar...?

    ResponderEliminar
  17. MomomonKy, busca esto:

    #outer-wrapper {
    margin:0;
    padding:10px;
    text-align:left;
    font: normal normal 100% Georgia, Serif;
    }

    Cambia el MARGIN y el TEXT-ALIGN y ponlos así:

    margin:0px auto;
    text-align:center;

    Creo que eso será suficiente.

    ResponderEliminar
  18. Disculpa La Demora Me Cortaron Mi Conección De Internet. Probe Lo Que Me Dijiste y Centro Todo Los Widget Los Títulos Las Fechas Todo, No Hay Otra Forma Sin Modificar Lo Demas...

    PD: Olvide Guardar Como Lo Regreso Ah Como Estaba?

    ResponderEliminar
  19. MomomonKy. Esa es la forma de centrar el contenido. No hay otra. Ahora, si hay cosas que no quieras centrar, tendrás que buscar los contenedores correspondientes e incluir las mismas líneas con otros valores. Por ejemplo:

    margin:0px;
    text-align:justify;

    Eso lo tienes que incluir en #main-wrapper para los elementos del cuerpo de los posts y en #sidebar-wrapper para el contenido de la sidebar.

    ResponderEliminar
  20. Que buen post!! No me habia anticipado sobre ese problema de las resoluciones..
    Gracias esto pude solucionar varios problemas que descubri en la resolucion de mi Blogjeje...

    Suerte!!!y Gracias por la info!!!:)

    ResponderEliminar
  21. Hola, me gustaría que solo la barra de menu de mi blog ocupase el ancho de la pantalla pero no lo consigo. Veo muchos que lo tienen así y deduzco que no tiene que ser difícil. ¿Podrias ayudarme? Gracias.

    ResponderEliminar
  22. Hola tocayo. Supongo que quieres hacer que el menú ocupe todo el ancho y que el resto ocupe menos para que se vea bien en pantallas de 1024px que son muy habituales. Si es así, para lo segundo, tendrías que hacer más pequeña la columna de los posts y/o las barras laterales. Aquí se explica un poco.

    Para lo del menú, no puedo verlo fácil (por lo del botón derecho anulado) pero creo que es aquí donde tienes que cambiar el valor del WIDTH:
    ul.navtop { background: #ffffff; height: 26px; width: 1148px;
    En lugar de 1148px; pon 100%;

    ResponderEliminar
  23. He cambiado el valor del Width al 100% pero solo he conseguido que se expanda un poco a la derecha. He quitado el bloqueo del ratón derecho para que puedas usarlo. Gracias de nuevo.

    ResponderEliminar
  24. Creo que el outer-wrapper limita el ancho. Prueba a sacar todo lo que forma el menú fuera del div id=outer-wrapper (colócalo por encima de esa línea). Si tu código te lo permite, también podrías simplemente bajar la línea que te indico detrás del segundo DIV de cierre del menú.

    ResponderEliminar
  25. Gracias Oloman, esa era la solución, poner el menú fuera del div id=outer-wrapper.

    ResponderEliminar
  26. ... y ese contenedor "outer", ¿en que parte de la plantilla lo inserto? (como ves, sigo buscando el modo de que la flecha quede siempre fuera de la coplumna de gadgets :)

    ResponderEliminar
  27. Tienes una plantilla de las nuevas Juansi y en ese caso, este código no te sirve. Prueba lo del porcentaje, pero buscando este código que cita Ciudad Blogger http://goo.gl/rGKe9

    ResponderEliminar
  28. Gracias gracias.. creo que ya tengo el problema resuelto por JMiur.. estaba bastante asustado con el aspecto de mi blog.. pero poco a poco ya no me da tanto miedo!!

    ResponderEliminar
  29. Hola Oloman, quiero hacer una plantilla que se adapte al ancho de todos los monitores incluido las tablets, veo que la tuya al visualizarse en resoluciones pequeñas se pierde la sidebar izquierda y aparece un menu superior. Como lo consigues, creo yo que no solo con porcentajes no?? gracias por la ayuda!! =)

    ResponderEliminar
    Respuestas
    1. Hola. Lo de las columnas en porcentajes es lo que se llama diseño elástico. Lo otro es diseño responsible que dirían los ingleses, sensible en mi traducción libre al español.

      No es fácil explicar cómo se puede hacer eso porque requiere bastantes condiciones, aunque lo básico es utilizar la propiedad @media que permite usar unas propiedades u otras según ciertos parámetros, por ejemplo el ancho de la ventana. Así es cómo se pueden por ejemplo ocultar, visualizar o cambiar colores o anchos según la ventana.

      Aquí tienes unos comentarios más amplios sobre el tema y una plantilla que puedes descargar para luego verle las tripas y aprender un poco cómo funciona el tema.

      Eliminar
  30. Muchas gracias Oloman, voy a descargar la plantilla e investigar un poco, tal vez te moleste luego, ojalá que no =)

    ResponderEliminar
  31. Hola Oloman. A mi no me aparece ni #outer-wrapper, ni sidebar ni main... me aparece esto, no sé si tenga algo que ver:






    <![CDATA[
    body {
    min-width: $(content.width);
    }


    De que otra forma me puede aparecer? Gracias!

    ResponderEliminar
    Respuestas
    1. Bueno no me deja copiar la parte que quiero mostrarte.. a ver ahora:

      b:variable default='960px' name='content.width' type='length' value='1150px

      b:variable default='310px' name='main.column.right.width' type='length' value='320px

      Eliminar
    2. Eso suena a plantilla del nuevo diseñador y es conocida mi animadversión hacia ellas. En concreto, esa es la parte de variables. Si entras en el Diseñador posiblemente puedas cambiar esos valores en px por valores en %, pero nunca lo he probado.

      Si no funciona entonces tendrás que buscar en la plantilla por el nombre de las variables. Sería $content.width y $main.column.right.width. Cuando las encuentres sólo tendrías que sustituir esos nombres por valores en %

      Eliminar
    3. O sea, serían los valores que te puse arriba. El problema es que yo cambio '1150px' por '115%' y me aparece esto:

      Invalid variable declaration in page skin: Length is invalid. Input: 115%

      Lo mismo para ambos valores..

      ¿cuál será la solución?
      Desde el diseñador no se puede cambiar el valor "px", ya está fijo.
      Agradecería mucho tu ayuda porque esto es un problema que me tiene loco.

      Eliminar
    4. Lo temía, por eso ya de expliqué una segunda opción...

      Eliminar
  32. $content.width y $main.column.right.width.
    Eso no aparece en la plantilla. Sólo pude cambiar los valores de esto que te pasé anteriormente:

    b:variable default='960px' name='content.width' type='length' value='1150px

    b:variable default='310px' name='main.column.right.width' type='length' value='320px


    Pero ahí es donde no me deja cambiar los valores poor el % porque me tira el error que te mencioné en el comentario anterior :(

    ResponderEliminar
    Respuestas
    1. (malditas plantillas nuevas...)
      Bueno, he estado mirando una plantilla de esas y aparece ligeramente distinto a como te dije. Sería $(content.width) e igual con la otra.

      En la que yo tengo para pruebas aparece enseguida en el BODY y el CONTENT-OUTER con min-width y max-width y luego hay más ocurrencias. Allí es dónde tendrías que poner el valor en %, pero ya sabes que después no podrás hacer cambios (de esos valores) desde el diseñador.

      Mejor por tanto que busques sin símbolos. Pretendía llevarte más directo pero me equivoqué y provoqué lo contrario. Lo sorry...

      Eliminar
  33. Oloman! Agradezco mucho tus molestias, de verdad :) pero como verás, no soy un experto en el tema, y no entiendo lo que me estás diciendo, Dónde es que tengo que poner o reemplazar los valores. Probé de varias formas y queda todo igual. En mi notebook se ve bien el blog pero si voy a una pc de escritorio con otra resolución se sigue viendo mal. Esto es lo que me aparece:


    <![CDATA[
    body {
    min-width: $(content.width);
    }

    .content-outer, .content-fauxcolumn-outer, .region-inner {
    min-width: $(content.width);
    max-width: $(content.width);
    _width: $(content.width);
    }

    ResponderEliminar
    Respuestas
    1. Con respecto al segundo valor me aparece esto:

      .main-inner .columns {
      padding-left: $(main.column.left.width);
      padding-right: $(main.column.right.width);
      }

      .main-inner .fauxcolumn-center-outer {
      left: $(main.column.left.width);
      right: $(main.column.right.width);
      /* IE6 does not respect left and right together */
      _width: expression(this.parentNode.offsetWidth -
      parseInt("$(main.column.left.width)") -
      parseInt("$(main.column.right.width)") + 'px');
      }

      .main-inner .fauxcolumn-left-outer {
      width: $(main.column.left.width);
      }

      .main-inner .fauxcolumn-right-outer {
      width: $(main.column.right.width);
      }

      .main-inner .column-left-outer {
      width: $(main.column.left.width);
      right: 100%;
      margin-left: -$(main.column.left.width);
      }

      .main-inner .column-right-outer {
      width: $(main.column.right.width);
      margin-right: -$(main.column.right.width);
      }



      Agradecería si me podés marcar dónde es que tengo que cambiar los valores así puedo entender mejor la plantilla :) de verdad mil gracias! si me sale esto me va a ayudar muchísimo!

      Te paso el blog para que veas cómo me queda:
      www.cunaroja.blogspot.com

      Eliminar
    2. Dónde veas $(content.width), lo sustituyes por el ancho total y con respecto al $(main.column.right.width); le pones el ancho de la barra lateral. Por ejemplo en el primer trozo:

      <![CDATA[
      body {
      min-width: 100%;
      }

      .content-outer, .content-fauxcolumn-outer, .region-inner {
      min-width: 100%;
      max-width: 100%;
      _width: 100%;
      }

      En la barra derecha que ya hemos visto tienes que poner el porcentaje que quieres que ocupe sobre el total y el resto hasta ocupar lo que quieres, lo pones dónde aparezca $(main.column.left.width). Por ejemplo si la derecha tiene 20%, la otra debe tener 80%. Quizás algo menos si hay márgenes y eso para que no se solapen.

      De todas formas no va a ser fácil modificar bien esa plantilla, así que ¡suerte! :)

      Eliminar
    3. Dios.. qué complicado se volvió esto. Tengo solo la columna principal y una barra a la derecha.. probe poniendo varios valores pero siempre queda mal, lo voy a tener que hacer con mas paciencia, investigando mejor y probando... lo unico que me quede decir es QUE MAL QUE LA ESTOY PASANDOOO!!!!

      Saludos Oloman, gracias por tanta dedicación, hoy por hoy se valora muchísimo! :)

      Eliminar
    4. Ve probando cosas y observa qué hace cada cosa. Poco a poco descubrirás cómo cambiarlo todo, poco a poco... ;)

      Eliminar
  34. Oloman, quería comentarte que tuve un problema y nada tiene que ver con lo que me ayudaste a resolver anteriormente. Me sucedió que acabo de publicar unas entradas y luego quise entrar a mi Plantilla e ir a EDICION HTML y cada vez que entro luego de 2 segundos la pantalla se me pone en blanco. Esto me sucede sólo con un blog de esa cuenta porque si voy a los otros si puedo modificar la plantilla tranquilamente. No sé cuál será el problema. Te dejo una imágen para que puedas ver lo que me aperece. Yo veo eso y luego de dos segundos se pone todo blanco, no me da tiempo a restaurar la plantilla que tengo guardada! Queé puedo hacer??? Este es la imágen:

    https://lh4.googleusercontent.com/-A-vdsUyZGI0/UE-2Xxfpq7I/AAAAAAAACEk/8EcNa33IvzQ/s912/Problema%2520con%2520la%2520Plantilla.png


    Gracias!!!

    ResponderEliminar
    Respuestas
    1. Listo Oloman! Encontré el problema, era lo del script del iFrame. Fui a la interaz antigua y pude entrar a la plantilla, borré ese código y cambié a la nueva interfaz y ya pude entrar. Luego busqué en tu blog y vi que también habías escrito de lo mismo! No me di cuenta jeje, pero al menos pude solucionar lo mio solito, eso ya me da orgullo jajaja. Bueno te mando un abrazo y perdón por las molestias, un abrazoo!

      Eliminar
    2. ¿Molestias? Ninguna. Un saludo.

      Eliminar
  35. ¿como lo has hecho para que en tu blog, si la pantalla es estrecha, la barra lateral izquierda salga como una cabecera arriba del todo, y si es aun mas estrecha no salga la barra de la derecha?
    Aprovecho para decirte que, en ordenadores netbook donde la pantalla no es alta, en tu blog si que es importante, ya que la barra de la izquierda se corta en "sobre este blog". (http://oi45.tinypic.com/25fuh3r.jpg)

    ResponderEliminar
    Respuestas
    1. Hola Jorge. Se trata de una plantilla adaptable (responsive en inglés) pero cómo hacer una no es una cosa que se pueda explicar de manera general.

      De todas formas en este artículo tienes unas breves nociones sobre el tema y una plantilla de ese tipo para Blogger. Viendo la plantilla por dentro podrás descubrir el uso de las media queries que son el "secreto" de cómo adaptar los anchos y la distribución de las columnas según el ancho de la pantalla del usuario.

      Aquí también tienes unos apuntes para las imágenes, tablas y vídeos adaptables.

      Y gracias por el aviso del corte de la barra de la izquierda, pero por eso mi barra es algo corta y por eso puse ahí cosas que no son importantes para vosotros ;)

      Eliminar
  36. hola saludo cordial muy buenas todas tus anotaciones de como organizar nustros blogs, tengo una pregunta para que me colabores, edito mi sitio y subo una nueva informacion en entrada nueva, pero al final todo lo demas se convierte en una chorrera de letras en vertical, si al final le doy clic en alguna entrada me la deja ver con el ancho normal, pero sucede otra vez lo mismo al final de esa pagina todo es una chorrera de letras. QUE HAGO AYUDEME? GRACIAS

    ResponderEliminar
    Respuestas
    1. Me temo que lo tuyo no tiene una solución fácil. Parece como si al trastear la plantilla hubieras cambiado algún cierre o apertura de sitio y por eso te salen todas las entradas dentro de la misma caja, cada vez más pequeñas. Lo más práctico es que intentes usar el nuevo botón "Plantilla de formato" e intentes ver cuál es ese div de más o de menos, aunque aún así es difícil. Casi mejor cambias la plantilla seleccionando después la misma que tienes ahora... pero virgen.

      Eliminar
  37. Hola Oloman!

    no consigo que mi blog se quede con ancho variable. No encuentro la parte que pones aquí... he insertado eso en CSS y sigue sin funcionar. Te copio la parte de la plantilla en la que creo que está el problema...






    ResponderEliminar
  38. Vaya, no sale... Aqui un pasteit con lo que no sale http://justpaste.it/ezw4

    ResponderEliminar
    Respuestas
    1. Tienes una plantilla de las últimas (nuevo diseñador) y esas son complicadas de manejar. Para esas los cambios no son tan simples y hay que entender un poco de CSS. Por ejemplo, el primer problema o mejor dicho cambio importante está nada más empezar:
      .content-outer, .content-fauxcolumn-outer, .region-inner {
      min-width: $(content.width);
      max-width: $(content.width);
      _width: $(content.width);
      }
      Eso de $(content.width) es una variable que se toma de las primeras líneas que me pusiste y que en tu caso tiene un valor de 970px.

      Esas tres líneas de .content-outer etc. lo que hacen es fijar el ancho a un mínimo y a un máximo de 970px, así que realmente es un ancho fijo. Habría que quitar las tres líneas y poner directamente un width: 100% o lo que sea y seguir ajustando el resto de cajas de similar manera.

      Pero luego, esas plantillas tienen más cajas "extrañas", así que no sé si será bastante con ajustar ese trozo que me pegas.

      Eliminar
  39. Hola Oloman! Hace unos días que me vengo rompiendo la cabeza con este porblema y no se que hacer. El problema que tengo es que cuando uso la versión móvil de mi plantilla, el outer-wrapper me pone un margin que yo no puse, yo lo tengo en 0px. Cuando inspecciono elemento en la página y cargo la plantilla móvil (con iphone 4 por ej.) me aparece un margin de 10px en el outer-wrapper que yo no quiero. Como hago para sacarlo??
    Desde inspeccionar elemento me sale: html body #outer-wrapper {
    /* margin: 0 10px; */
    } adentro de un bundle.css Si acá cambio el 10px por 0px se ve excelente, pero como puedo hacer eso en la plantilla?
    Muchas gracias, espero puedas ayudarme, mi blog es monkeymotor .net

    ResponderEliminar
    Respuestas
    1. No sé si funcionará, pero puedes probar a poner dentro de tu CSS un:
      html body #outer-wrapper {margin: 0 !important;}

      Eliminar
  40. Hola.
    ¿Sabes si esto ha evolucionado algo desde el 2008? Es que tengo un blog que he rediseñado hace nada y ya lo veo pequeño para las resoluciones actuales. Mi problema es que está lleno de ilustraciones y no me gustaría que perdieran calidad al readaptarse a un tamaño mayor. Supongo que la solución sería trabajar con unas dimensiones de base bastante grandes que se adaptaran a resoluciones menores. En fin, ya me cuentas.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Pues sí Dayara, ha evolucionado bastante... sobre todo si usas una de las nuevas plantillas.
      Estas tiene una estructura algo más complicada y aunque también es posible hacer algo parecido, no es tan sencillo para mí explicar qué clases (selectores) tienes que cambiar para conseguir una plantilla adaptable.
      Si quieres partir de una base para luego estilizarla a tu gusto, hace tiempo publiqué esta plantilla.

      Con respecto a las imágenes, una vez que tengas una plantilla adaptable (o simplemente más ancha), las imágenes puedes hacer que se adapten automáticamente usando esto otro.

      Eliminar
    2. Gracias por tu ayuda. La verdad es que esto de las resoluciones de los monitores, tablets, móviles y demás está creciendo tan rápido que resulta absurdo. Para la impresión en papel se trabaja a 300ppp (o a 600 si se va a ampliar después) porque el ojo humano no detecta más detalle, pero a nivel tecnológico las compañías estan yendo mucho más lejos para ver quién la tiene más grande. Los que tenemos blogs vamos a estar bien jodidos de por vida (si es que los blogs no acaban desapareciendo), porque ya no se trata de que tu plantilla se tenga que readaptar a otro tamaño, sino a otras dimensiones. Mi imagen de cabecera que está a 1280px cubre todo el ancho de mi pantalla y la mitad del alto; si cambiara el tamaño del blog a full hd (por ejemplo), en algunos monitores la imagen cubriría casi toda la pantalla.

      Eliminar