Cómo crear desplazamiento horizontal usando Pantalla: Table-Cell
Los diseños horizontales de todo tipo me han intrigado desde que te descubrí podría Haz eso. No sé exactamente por qué estoy fascinado con ellos … tal vez sea solo mi rebelde interior hablando. Cualquiera sea la razón, estoy a punto de declarar que el desplazamiento vertical está obsoleto, pasado de moda y muuuucho del último milenio.
De acuerdo, eso no es realmente a lo que me refiero. Aún así, con el repentino aumento en la cantidad de pantallas táctiles por ahí, se vuelve más difícil afirmar que «arriba y abajo» son nuestras mejores opciones. «Derecha e izquierda» se han convertido en direcciones viables para la ubicación del contenido, siempre que no se trate de volúmenes sustanciales de texto.
Sin embargo, nunca me molesté en construir diseños horizontales. Los problemas técnicos y las limitaciones siempre parecían superar cualquier beneficio estilístico o de navegación que pudiera haber. Sin embargo, eso fue antes; y esto es ahora …
Me encontré con la técnica descrita en este artículo de la forma en que suelo encontrar las cosas: tratando de hacer algo completamente diferente. Estaba intentando (te puedes reír) crear un marco de cuadrícula CSS basado en display: table-cell (está bien, deja de reír ahora).
Bueno, por razones que ahora parecen obvias, no funcionó. Intenta hacer una cuadrícula de imagen receptiva con la propiedad table-cell. Adelante, esperaré.
En pocas palabras, las celdas de la tabla están diseñadas para formar una sola fila horizontal. (¡Dije que dejes de reír!) Eso es lo que hacen, y no les gusta cuando tratas de obligarlos a hacer otra cosa. Renuncié a ese proyecto. Sin embargo, unas semanas más tarde, estaba considerando volver a diseñar mi cartera.
Pensé que sería bueno poner todos mis proyectos en una página. Consideré varias soluciones organizativas para mostrar mis proyectos web, de redacción y de fotografía, y se me ocurrió esto: quiero mostrar estas tres categorías como filas de miniaturas que se desplazan horizontalmente.
Fue entonces cuando me di cuenta: “Las celdas de tabla serían perfectas para eso. Además, ¡puedes centrar las cosas verticalmente dentro de ellas! ¡Soy tan inteligente que duele! » [Some dramatization here.]
Todavía no he rediseñado mi sitio; en cambio, codifiqué los dos ejemplos de mi técnica que se encuentran en el archivo .zip vinculado al final de este artículo.
Haciendo que funcione
Entonces, para darle una imagen, aquí hay una demostración en la que he trabajado.
Así es como se marca cada fila:
<div class="horizontal">
<div class="table">
<article>
<h3>Project Title</h3>
</article>
<!-- Repeat this part as many times as necessary. -->
</div>
</div>A partir de ahí, el CSS necesario para que funcione es bastante simple:
// This container element gives us the scrollbars we want.
div.horizontal {
width: 100%;
height: 400px;
overflow: auto;
}
// table-layout: fixed does a lot of the magic, here. It makes sure that the "table cells" retain the pixel dimensions you want.
.table {
display: table;
table-layout: fixed;
width: 100%;
}
// Arranging your content inside the "cells" is as simple as using the vertical-align and text-align properties. Floats work, too.
article {
width: 400px;
height: 400px;
display: table-cell;
background: #e3e3e3;
vertical-align: middle;
text-align: center;
}
// Some styling for contrast.
article:nth-child(2n+2)
{
background: #d1d1d1;
}Algunas técnicas de disposición horizontal requieren el elemento contenedor (div.horizontal, en este caso) para tener un ancho de píxel definido igual al ancho combinado de los elementos que contiene. Otras técnicas requieren visualización: bloque en línea; No soy fanático de esta técnica. Con table-cell, siga agregando elementos siempre que lo necesite, y estará listo para comenzar: es perfecto para usar con un CMS.
Haciéndolo a pantalla completa
De acuerdo, el otro tipo de diseño horizontal es el diseño horizontal de pantalla completa. Creando esto con el celda de tabla La propiedad requiere algo de JavaScript. Usé jQuery para acelerar las cosas. El requisito de JS puede hacer que esta técnica sea más útil para la situación, pero sigue siendo genial.
Aquí hay una demostración funcional.
El marcado es similar:
<div class="horizontal">
<div class="table">
<section>
<h1>Full-Screen Horizontal Layouts</h1>
<p>Made with <code>display: table-cell;</code></p>
<p>By Ezequiel Bruni</p>
</section>
<!-- Repeat this part as necessary. -->
</div>
</div>Aquí, sin embargo, es sólo una «fila» que se ha hecho para ajustarse al tamaño de la ventana del navegador. Cada
Aquí está el CSS:
// Don't touch this part. It helps.
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
// In this case, I didn't want a scrollbar, so I used overflow: hidden. The container element is more essential than ever, though. The body element will not do.
div.horizontal {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
position: static;
}
.table {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.table > section {
width: 1600px; // The width is based on my monitor. It's replaced by jQuery anyway. Percentage widths do not work.
height: 100%;
display: table-cell;
background: #e3e3e3;
vertical-align: middle;
text-align: center;
}Como se indicó anteriormente, los anchos porcentuales no funcionan. Se requieren anchos de píxel. Si desea que cada sección se ajuste a las dimensiones de su ventana, deberá hacerlo con JavaScript:
$(window).load(function() {
var vWidth = $(window).width();
var vHeight = $(window).height();
$('.table > section').css('width', vWidth).css('height', vHeight);
});
$(window).resize(function() {
var vWidth = $(window).width();
var vHeight = $(window).height();
$('.table > section').css('width', vWidth).css('height', vHeight);
});Notarás que también agregué la altura. Bueno, eso es para Firefox. Firefox no juega bien con las alturas porcentuales en los elementos de la celda de la tabla (por cierto, Firefox también produce un silbido si coloca las celdas en una posición relativa y coloca elementos absolutamente posicionados dentro de ellas).
Bueno, esa es mi técnica para colocar contenido horizontalmente. Puede descargar los archivos fuente aquí.
¿Ha diseñado un sitio horizontal? ¿Ha utilizado una técnica diferente para el desplazamiento horizontal? Háznoslo saber en los comentarios.
Imagen destacada / miniatura, imagen de lado a través de Shutterstock.
