Responsive table con scroll en el Tbody y encabezado fijo en puro Css

Por 0 Comentarios

Hace ya un tiempo publiqué un artículo recopilatorio de técnicas para hacer nuestras tablas con el encabezado Thead fijo y el cuerpo Tbody con scroll o desplazamiento en caso de superar cierto número de filas: tablas con scroll y encabezado fijo en puro Css

Métodos que requieren de ajustes complejos y finos para adaptarlos a las necesidades de cada caso. Adaptaciones que a muchos usuarios hacen desistir de lograrlo.

A la vez, estos últimos días me han llegado algunas consultas relativas a cómo hacer responsive tables. Esto es, que además de adaptarse al viewport se mantengan visibles los valores del encabezado thead de la tabla en tamaños pequeños para saber qué es cada dato.

Leer: Responsive table con scroll en el Tbody y encabezado fijo en puro Css

Estudio de banner centrado, responsive y no intrusivo puro Css

Por 0 Comentarios

La necesidad de integrar los banrers publicitarios en el contenido del sitio y hacerlo de tal forma que no sean percibidos por los usuarios como molestos o intrusivos es de vital importancia tanto para el dueño de la web como para sus visitantes.

No siempre es fácil de lograr dicha integración. Y hay circunstancias más problemáticas que otras. Una particularmente difícil sería el caso de tener un sólo bloque de contenido variable y pretender colocar el banner en medio de él sin que haya solapamientos.

Como por ejemplo la página de inicio de este blog.

Leer: Estudio de banner centrado, responsive y no intrusivo puro Css

Width y Height. Los nuevos valores "condicionados" por el contenido

Por 4 Comentarios

¿A que estaría bien en muchos casos no tener que echar cuentas de antemano para los tamaños (width&height) de los elementos?. Porque hasta ahora excepto el max/min, poco más había.

Sin embargo, como apuntaba en el artículo previo sobre "Centrar elementos flotados..." los nuevos valores para los tamaños traen novedades para controlar el tamaño en función del contenido del elemento, no de su naturaleza.

Leer: Width y Height. Los nuevos valores "condicionados" por el contenido

Z-index en Css: el apilamiento de cajas y sus valores negativos

Por 4 Comentarios

Z-index es esa propiedad que nos permite colocar los elementos encima/sobre unos de otros cuando hay superposiciones.

Pero recuerda que por el modelo de cajas de Css, por definición, los elementos del html ocupan su lugar y fuerzan al resto a que lo respeten. Muy educados ellos. Así que para haya solapamientos hay que modificar dicho comportamiento desplazando alguno de ellos.

Lo que dicen las especificaciones es muy sencillo: se aplica a cualquier elemento posicionado (position≠static), los valores posibles admitidos son auto | Nº entero | inherit (por defecto: auto) y que no se hereda.

Leer: Z-index en Css: el apilamiento de cajas y sus valores negativos