JMiur [E]

En CSS hay propiedades especiales que permiten:
  • recortar una parte de un elemento
  • determinar qué debe hacer el navegador si el contenido de un elemento es mayor que su tamaño
  • provocar que un elemento sea invisible
Por lo general, cuando colocamos un elemento (un texto, una imagen) dentro de un bloque, dimensionamos el bloque para que el elemento se mantenga dentro de los límites de ese bloque, pero, puede suceder que el contenido desborde esos límites y quede parcial o totalmente fuera de él.

Por ejemplo, esto ocurrirá si el bloque tiene definidas las propiedades width y height, y su contenido resulta demasiado grande o si utilizamos márgenes negativos o posiciones absolutas para el elemento.

Esto provoca lo que se llama un desbordamiento. La propiedad overflow nos permite controlar el comportamiento de estos elementos:
overflow: [ visible | hidden | scroll | auto ]
donde:

visible: el contenido no es recortado (es el valor por defecto)
hidden: el contenido es recortado y los usuarios no tendrán acceso al contenido recortado
scroll: el contenido es recortado y el navegador mostrará barras de desplazamiento
auto: depende del navegador, por lo general es similar a scroll

Ejemplos utilizando una imagen de 120x116 pixeles dentro de la siguiente estructura:
<div style="
border: 1px solid #BBCCDD;
width: valor; height: valor;
overflow: valor;">
<img src="URL_imagen" />
</div>
DIV sin propiedades
width: 200px; height: 150px;
En todos los casos width: 100px; height: 100px;
overflow: visible;
overflow: hidden;
overflow: scroll;

Cuando se produce un desbordamiento y con la propiedad overflow se especificó algún tipo de recorte, la propiedad clip nos permite establecer el tamaño y la forma de ese recorte:
clip: [ rect | auto ]
donde:

auto: la zona de recorte tiene el mismo tamaño y ubicación que el bloque
forma: rect(top right down left) que pueden automáticas (0), positivas o negativas

Para los establecer los valores top, right, down, left se debe considerar 0,0 al ángulo superior izquierdo del elemento, de tal manera, un valor en top "cortará" todo lo que esté por encima, uno en botoom, todo lo que esté por debajo, un valor en left todo lo que esté a la izquierda y un valor en right todo lo que esté a la derecha.

Hay dos condiciones necesarias para usar esta propiedad:
  • el elemento debe ser visible (propiedad visibilty)
  • la posición debe ser absoluta (propiedad position:absolute;)
Actualmente, en CSS, las zonas recortadas siempre son rectangulares pero se estima que en el futuro admitirá otro tipo de "recortes",

Por último, la propiedad visibility especifica si los bloques son mostrados, pero hay que tener en cuenta que, aunque el elemento sea invisible sigue afectando la composición de la página, es decir, continúa ocupando su espacio:
visibility: [ visible | hidden | collapse ]
donde:

visible: el elemento es visible
hidden: el elemento es invisible (transparente)
collapse: si se usa en otros elementos que no sean filas o columnas de una tabla, collapse tiene el mismo significado que hidden

3 comentarios:

Iria Maza  

Son magníficas todas tus aportaciones, pero observo que algunos están enfocados hacia personas con al menos una pizca más de idea que yo... así que te puedes imaginar que esto del CSS me suena bastante a chino...
Lo cierto es que creo que por aquí va mi problemilla con el visionado de mi blog en las diferentes resoluciones, pero no sé ni por dónde empezar.
Tengo un fondo estático (fixed no-repeat, etc...) el cual veía estupendamente desde mi resolución (1280x800), pero probé en otras, dado que esta que yo utilizo es probablemente la menos común, y se descuadra todo por completo. He modificado por tanto el fondo, para que más mal que bien, se ajuste el texto a cualquier resolución. Pero es sólo un apaño provisional (o eso espero), me gustaría encontrar la solución al problemilla.
He encontrado poca información en español acerca del tema, sólo en tu página veo que se toca el tema a fondo. He echado un vistazo también al artículo en el que propones el que la página pueda optimizarse para una u otra resolución, "a gusto del consumidor", pero creo que la cosa va más por este otro camino; modificar la hoja de estilos para que la imagen no sea variable... Ufff, no tengo ni idea, me resulta terrible tener que pedir ayuda, pero no encuentro otro modo de solucionarlo... Espero que puedas echarme una mano...
Saludos.

Responder
Iria Maza  

Al ver mi comentario publicado me he llevado las manos a la cabeza... ¡¡menudo sermón!! Lo siento.

Responder
JMiur  

Primero que nada, esta es mi dirección de correo, la dejo porque el tema que planteas es complicado y habría que ver cada detalle en particular para lograr un resultado aceptable: vagabundia@gmail.com

Digo aceptable porque eso es lo mejor que podría conseguirse. Tu blog está muy bien diseñado por lo menos para el tipo de resolución de pantalla que utilizo.

Hay dos posibilidades, que una página web sea diseñada con anchos variables (usando porcentajes) o fijos (usando pixeles). Ninguna de ellas es perfecta, cada una tiene sus problemas y limitaciones.

Al tener anchos fijos y sobre todo un fondo fijo, al cambiar el ancho de la pantalla, la página se descuadra, si es una resolución más grande, queda un área vacía pero si es menor, puede pasar cualquier cosa (sobran pixeles y las cosas se amontonan).

La tendencia, es lograr una página que se vea bien en 800x600 como la resolución más pequeña y en 1074x768 como la más grande. Basándome en esto es que puse esa opción de "al gusto del consumidor" que, lo único que hace es poner un estilo diferente, con imágenes de fondo diferentes, según la resolución.

El tema excede bastante las posibilidades de un comentario así que te repito, comunícate por mail y vemos qué se puede hacer.

Saludos.

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