JMiur [E]

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.

19 comentarios:

Orlando Francisco Menéndez  

Siempre es grato leer tus artículos muy docentes, explicados con claridad y bien ilustrados. Gracias.

Responder
JMiur  

Gracias, Orlando, ojala sea útil.

Responder
Graciela  

Muy útil Jmiur :P

Responder
Mica  

hola JMiur tu sabes un layout o plantilla porque yo ya tengo como el diseño que quiero y eso pero no se como subirlo o lo que haya que hacer

Responder
Karla  

Hola JMiur, muy buena tu explicación, es muy común que pase eso es las cajas como los blockquotes, ya que cuando el texto es preformateado, algunas veces se sale el texto hacia la derecha si no alcanza el ancho del contenedor y eso es notorio en IE y me parece que en Chrome también, aunque no en FF; a mi me paso y precisamente lo solucioné con overflow:scroll; esto lo veo mucho sobre todo en blogs que muestran código y a veces en las columnas laterales, pero se puede arreglar como lo explicas.

Saludos Jmiur y que tengas un estupendo día.

Responder
Fabio De Minicis  

Hola JMiur, otra vez por aquí intentando solucionar un problemilla que tengo. Cuando se carga la página principal de mi blog, aparece por un instante la imagen del footer en la cabecera...y luego se va a su sitio. Tu sabes porqué ocurre esto? Te dejo el link para que puedas ver si hay algún error de códigos. Muchas gracias.
http://fabiobook.blogspot.com/

Responder
JMiur  

Graciela: Ojalá lo sea :D

Mica; No entiendo. Si tienes un diseño armado como pagina web, deberás crear la plantilla porque Blogger no es una página web sino un sistema de blogs que requiere códigos específicos.

Karla: En los códigos, cuando se utiliza PRE por ejemplo, ocurre algo similar. Efectivamente, se ve en muchos sitios que muestran códigos y es espantoso :D
Una solución es esa que has utilizado, otra, apra esos casos,es utilizar la propiedad:
white-space: pre-wrap;
que hará algo similar a word-wrap, si el texto es largo, lo mistrará en diferentes líneas.

Fabio De Minicis: No he notado eso pero, es muy probable que ocurra porque la imágenes que se usan de fondo sean muy grandes y como las imágenes se cargan simultáneamente, haya alguna que aparezca primero y otra después pero no en orden; tal vez, si le das a content-wrapper o outer-wrapper una altura mínima, eso ayude a que los rectángulos se dimensionen antes. Le das altura mínima con:
min-height: valorpx;

Responder
Administrador  

Hola Jmur veras yo tengo una duda sobre las entradas, se puede establecer que cuando se vaya a una categoria(etiqueta) NO se muestren todas las entradas que hay en esa etiqueta sino solo las que se deseen? es decir si voy a "cuentos" y hay 30 entradas pero quiero que se vean de a 10 y los demas pasar a otra pagina como en la principal.
saludos.

Responder
JMiur  

Si. Fíjate en esta entrada

Responder
Administrador  

Jmur no he podido, encuentro esto:
a expr:href='data:label.url' rel='tag'>

lo pongo asi:
a expr:href='data:label.url + "?max-results=5"' rel='tag'>

o asi:
a expr:href='data:label.url"?max-results=5"' rel='tag'>

y ninguna de las dos formas me funciona.

Responder
JMiur  

No veo colocado eso en tu plantilla, probablemente, tienes un error de sintaxis. Para las etiquetas de los posts, el código es:

<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a>

y para el elemento Label de la sidebar:

<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a>

Responder
Administrador  

Ya esta, gracias JMur. aunque en el elemento label del sidebar el mismo codigo aparece mas o menos seguido dos veces, cambio los dos ;-)

Responder
JMiur  

Aparece varias veces porque en el gadget hay códigos distintos según sean las opciones que le hayas colocado así que debes cambiar todas.

Responder
Fabio De Minicis  

gracias Jmiur, creo que ha quedado solucionado.

Responder
keko  

ola jmiur, como s epodria aplicar este elemento a una web en wordpress para evitar el desbordamiento en lso comentarios?? Hay alguna forma de solucionar ese problema?? salu2

Responder
JMiur  

Sí, hay que hacer lo mismo, en principio, agregar las propiedades:

word-wrap: break-word;
overflow-y: hidden;

pero, no sabría decirte a que elemento ya que depende del tema en uso que tengas.

Responder
keko  

pero se agrega en el css o en el html el css que tengo hay estas partes:
/* The Comments */

.comments {
}

.comments form {
}

.comments textarea {
width:90%;
height:156px;
background:#382F2A;
border:1px solid #403630;
color:#ddd;
padding:10px;
overflow:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

#commentform {
padding-left:23px;
}

#commentform input {
background:#382F2A;
border:1px solid #403630;
color:#ddd;
padding-left:10px;
}

.comments input#submit {
padding:0;
width:72px;
height:29px;
}

.comments h2 {
font-size:19px;
line-height:30px;
margin:24px 0 0 23px;
padding:0;
font-weight:normal;
}

.comments ol li p {
padding:0;
margin:10px 0;
color:#ddd;
}

.comments h4 {
font-size:19px;
line-height:32px;
margin:14px 10px 0px 10px;
padding:0px 0 0 10px;
font-weight:normal;
background-image: -moz-linear-gradient(100% 100% 90deg, rgba(32, 32, 32, 0), #6F584C);
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(32, 32, 32, 0)), to(#404951));
}

No se si será aki¿?

Responder
Martin Rocha  

Hola Jmiur te queria comentar sibre esto mismo, si quiero que solo limite el alto o sea que solo se muestre la barra a la derecha como puedo hacerlo?
Desde ya muchas gracias

Responder
JMiur  

En ese caso, sería algo así como:

.miclase {
overflow-x: hidden;
overflow-y: scroll;
}

y la propiedad word-wrap deberia tener el valor break-word porque sino, se cortaría horizontalmente (es la propiedad por defecto).

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