En la entrada anterior explico que hay blogs que expresan sus medidas en porcentajes y otros que las expresan en medidas exactas.
Puede darse el caso que tengas una plantilla de medidas exactas, por ejemplo de 800 pixels de ancho y quieras que ocupe toda la pantalla, así que le aplicas un 100% al contenedor general, haces vista previa, en tu pantalla de 1024 pixels de resolución y lo ves casi perfecto.
Quizá haya demasiada separación entre las columnas, pero, bueno, le añades unos cuantos píxels al ancho de las entradas, digamos 160, unos pocos más a la sidebar y haces vista previa. ¡Perfecto!.
Quizá haya demasiada separación entre las columnas, pero, bueno, le añades unos cuantos píxels al ancho de las entradas, digamos 160, unos pocos más a la sidebar y haces vista previa. ¡Perfecto!.
Pero entro yo a ver tu blog, con mi pantalla de 1660 pixels y esto es lo que veo.
Para evitar esto has de poner también porcentajes a las columnas. Digamos 70/30 pero no exactamente esto, ya que se ha de tener en cuenta las distancias entre columnas, así que le daremos 69/29 a ver que pasa.
Y si con ese pocentaje una de las dos columnas, habitualmente la sidebar, se cae, reduciremos un punto uno de los dos o ambos haste encontrar el equilibrio que haga que en una pantalla gigante el blog se vea así:
Y si con ese pocentaje una de las dos columnas, habitualmente la sidebar, se cae, reduciremos un punto uno de los dos o ambos haste encontrar el equilibrio que haga que en una pantalla gigante el blog se vea así:
De esta forma, se vea en la pantalla que se vea, siempre se verán las dos columnas equilibradas, ya que al estar expresadas sus medidas en porcentajes, el navegador muestra la columna de las entradas en el 69% de la pantalla y la sidebar en el 29% restante, (o el porcentaje aplicado).
Una última cosa a tener en cuenta:
En algunas plantillas cada columna tiene dos medidas, por ejemplo: una en #sidebar-wrapper (que sería el contenedor de la columna lateral) y otra, (casi siempre la misma), en #sidebar (que sería el contenido de ese contenedor).
En este caso se ha de modificar en los dos sitios, ya que de lo contrario, se le está diciendo que ocupe un % de la pantalla, pero también que este tanto por ciento estará ocupado por algo que tiene una medida exacta, con lo que, si el porcentaje resultara menor que la medida fija la columna se caería.
Poniéndole 100% a la medida interior, se logra que el contenido ocupe la totalidad del contenedor.
En algunas plantillas cada columna tiene dos medidas, por ejemplo: una en #sidebar-wrapper (que sería el contenedor de la columna lateral) y otra, (casi siempre la misma), en #sidebar (que sería el contenido de ese contenedor).
En este caso se ha de modificar en los dos sitios, ya que de lo contrario, se le está diciendo que ocupe un % de la pantalla, pero también que este tanto por ciento estará ocupado por algo que tiene una medida exacta, con lo que, si el porcentaje resultara menor que la medida fija la columna se caería.
Poniéndole 100% a la medida interior, se logra que el contenido ocupe la totalidad del contenedor.
Esto es también aplicable a columnas laterales que incluyen diversos bloques, como por ejemplo este mismo blog en el que estás, en el que la columna lateral contiene la doble columna de arriba y la sencilla de abajo.
Para modificar una plantilla expresada en porcentajes y convertirla en una de medidas fijas, el sistema es a la inversa.
Se han de encontrar todas las medidas expresadas en % y convertirlas en medidas fijas, recordando que el contenedor principal, (habitualmente llamado outer-wrapper), puede tener la medida que se desee, pero que la suma de las columnas más los espacios que habrá entre ellas no puede superar la del contenedor principal.
Se han de encontrar todas las medidas expresadas en % y convertirlas en medidas fijas, recordando que el contenedor principal, (habitualmente llamado outer-wrapper), puede tener la medida que se desee, pero que la suma de las columnas más los espacios que habrá entre ellas no puede superar la del contenedor principal.
0 comentarios:
Redimensionar el blog 1 parte -2- Píxels y porcentajes
Quizá haya demasiada separación entre las columnas, pero, bueno, le añades unos cuantos píxels al ancho de las entradas, digamos 160, unos pocos más a la sidebar y haces vista previa. ¡Perfecto!.
Y si con ese pocentaje una de las dos columnas, habitualmente la sidebar, se cae, reduciremos un punto uno de los dos o ambos haste encontrar el equilibrio que haga que en una pantalla gigante el blog se vea así:
En algunas plantillas cada columna tiene dos medidas, por ejemplo: una en #sidebar-wrapper (que sería el contenedor de la columna lateral) y otra, (casi siempre la misma), en #sidebar (que sería el contenido de ese contenedor).
En este caso se ha de modificar en los dos sitios, ya que de lo contrario, se le está diciendo que ocupe un % de la pantalla, pero también que este tanto por ciento estará ocupado por algo que tiene una medida exacta, con lo que, si el porcentaje resultara menor que la medida fija la columna se caería.
Poniéndole 100% a la medida interior, se logra que el contenido ocupe la totalidad del contenedor.
Se han de encontrar todas las medidas expresadas en % y convertirlas en medidas fijas, recordando que el contenedor principal, (habitualmente llamado outer-wrapper), puede tener la medida que se desee, pero que la suma de las columnas más los espacios que habrá entre ellas no puede superar la del contenedor principal.