martes, 15 de febrero de 2011

Cuando las cosas se desbordan - Vagabundia


Como toda etiqueta es un rectangulo, tiene un ancho y un alto. Cuando colocamos algo adentro (sea un texto, una imagen, un video, etc), ese "contenedor" se ajusta automáticamente; si el contenido es "más grande" que el contenedor, este último se amplia. Esa es una de las características más interesantes del diseño web, lo que lo hace flexible y hasta sencillo ya que uno no debe preocuparse por detalles tales como calcular tamaños.



Esto es así porque por defecto hay cuatro propiedades CSS que lo indican:
height: auto;
width: auto;
overflow: visible;
word-wrap: normal;
Por lo tanto, a menos que nosotros las cambiemos, esas serán las propiedades que tendrá cualquier etiqueta:



Aenean fringilla lobortis enim id tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut tortor tellus. Nulla ac elit eros. Vestibulum nec dolor purus, vitae accumsan nunc.


Normalmente no las cambiamos aunque solemos establece el ancho así que si le agregamos width con un valor, lo anterior se vería así:



Aenean fringilla lobortis enim id tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut tortor tellus. Nulla ac elit eros. Vestibulum nec dolor purus, vitae accumsan nunc.


El área de entradas, la sidebar, etc, son rectángulos que están dimensionados y en ellos, cuando agregamos algo demasiado grande se genera un problema y por eso, las plantillas originales de Blogger tienen una serie de propiedades agregadas que impiden que esos "errores" afecten al conjunto pero, no todas las plantillas que descargamos tienen en cuenta esto y da la casualidad que varios comentarios preguntan justamente por ese tema.



En el siguiente ejemplo hay una simulación del problema; allí, hay un texto excesivamente largo y claro, se desborda:



Aenean fringilla. LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum, consectetur adipiscing elit. Maecenas ut tortor tellus. Nulla ac elit eros.


Una de las propiedades que parecen obvias para impedir el desborde es overflow que tiene otros tres posibles valores, sin embargo ...



Si usamos overflow: hidden; el contenido se cortará:


Aenean fringilla. LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum, consectetur adipiscing elit. Maecenas ut tortor tellus. Nulla ac elit eros.


Si usamos overflow: scroll; se agregarán barras de desplazamiento en ambas direcciones:



Aenean fringilla. LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum, consectetur adipiscing elit. Maecenas ut tortor tellus. Nulla ac elit eros.


Si usamos overflow: auto; se agregará una barra de desplazamiento donde sea necesario; si el contenido es más ancho que el contenedor, se mostrará la barra horizontal y si es más alto se mostrará la barra vertical:


Aenean fringilla. LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum, consectetur adipiscing elit. Maecenas ut tortor tellus. Nulla ac elit eros.


Cómo manejar esos desbordes depende de cada caso en particular aunque a mi entender hay dos situaciones diferentes, una afecta a los textos y otra afecta al resto (imágenes, videos, etc). Para estos últimos, entiendo que lo razonable, cuando tenemos contenedores de un ancho fijo, es establecer en ellos la propiedad overflow:hidden; ya que de ese modo impediremos que ciertas cosas se solapen o aparezcan ocupando lugares indebidos.



Pero, en el caso de los textos, eso no es del todo bueno ya que si usamos esa propiedad, se cortarán y no podrán leerse; pero existe otra propiedad que deberíamos utilizar y que le indica al navegador que, cuando hay un texto demasiado largo, simplemente, lo "corte" en líneas.




Esa propiedad es word-wrap y el valor a usar es break-word:


Aenean fringilla. LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum, consectetur adipiscing elit. Maecenas ut tortor tellus. Nulla ac elit eros.


Como decía antes, las plantillas de Blogger tienen establecidas esa propiedad por defecto, si se fijan en una plantilla mínima, verán esto:
#main-wrapper {
  .......
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
  .......
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Pero no es cierto que el problema sea de Internet Explorer; es algo que afecta a todos los navegadores y colocándolas allí, en los contenedores principales de nuestro blog, habremos resuelto el problema y ya no tendremos que preocuparnos por definirlas en cada etiqueta.





















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Correo Vaishnava

Mi foto
Correo Devocional

Archivo del blog