JMiur [E]

La propiedad overflow no la usamos mucho pero ahí está, en casi todas las plantillas de Blogger y se utiliza para determinar qué ocurriía si un elemento es más grande que el objeto que lo contiene.

Parece chino básico pero es simple; siempre hablamos de contenedores y contendidos; un contenedor es una etiqueta como por ejemplo, un DIV al que podemos dimensionar y adentro, colocamos "algo":
<div style="border: 4px solid #B00; margin: 10px auto; height: 100px; width: 150px;">
<img src="una_IMAGEN" />
</div>

Como el contenido que ponemos (una imagen de 128 x 82 pixeles), es más pequeño que el contenedor (el DIV tiene 150 x 100 pixeles), todo se ve bien pero, si en el mismo DIV colocamos una imagen más grande (por ejemplo, de 200 x 128 pixeles), como el contenedor no es lo suficientemente grande, el contenido se desbordará:



Esta es una particularidad de las etiquetas de bloque o contenedores, se adaptan automáticamente al tamaño del contenido entonces, uno podría pensar que no hace falta dimensionarlas y es cierto pero, muchas veces debemos hacerlo ya que ciertas cosas deben tener anchos fijos. Por ejemplo, los rectángulos que conforman nuestra plantilla (el área de entradas, la sidebar, etc) tienen una cierta dimensión que debemos preservar:


Y si en uno de esos contendores, colocamos algo "demasiado grande", nuestro blog colapsará:


Es por eso que en las plantillas vemos cosas como estas:
#main-wrapper {
.......
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
.......
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
La propiedad overflow le indica al navegador que debe hacer cuando ocurren estos desbordameintos y tiene cuatro valores posibles:

visible si el elemento es grande, no se corta sino que aparecen barras de desplazamientos (es el valor por defecto excepto en las etiquetas BODY y TEXTAREA que por defecto tienen el valor auto
scroll se fuerza a que se muestren barras de desplazamiento aunque el contenido sea menor que el contenedor
hidden todo lo que excede es cortado
auto deja que el navegador decida si las barras de desplazamiento son o no son necesarias


Eventualmente, también puede usarse overflow-x o overflow-y que hacen lo mismo pero sólo sobre uno de los ejes, o el horizontal o el vertical.

Esta propiedad es la que nos permite, por ejemplo, crear listas largas en pequeños espacios

Blanco
Marrón
Azul
Amarillo
Verde
Gris
Celeste
Rosa

Siempre es bueno tener definida esta propiedad en todos los contenedores cuyo ancho deseamos controlar pero, siempre es demasaido tiempo y a veces, en ciertas condiciones, esto nos impide hacer determinadas cosas. Por ejemplo, una alternativa interesante que solemos ver en ciertos sitios es que algunos sectores se muestran en alguna clase de etiqueta con barras de scroll pero, cuando colocamos el puntero del ratón encima, el contenedor se expande avanzando hacia la derecha y se superpone a la sidebar para facilitar su lectura.

Podemos hacerlo sólo con CSS si es que eliminamos esa propiedad que restringe el ancho; sino, ocurrirá algo así:

Vivamus ut eros gravida augue suscipit fermentum in et enim? Pellentesque porttitor; nisiet.

También suele hacerse con alguna librería como jQuery pero si buscamos algo simple no hace falta nada de eso, basta usar algún script que quite esa propiedad temporalmente y luego la restaure.

Este es un ejemplo donde se permuta el ancho del contenedor cada vez que hacemos click:

Vivamus ut eros gravida augue suscipit fermentum in et enim? Pellentesque porttitor; niset.

<script>
function demoExpandir(cual) {
var objdemo, estado;
objdemo = document.getElementById(cual);
maindemo = document.getElementById('main-wrapper');
estado = objdemo.style.overflowX;
if(estado=='visible') {
objdemo.style.width = '500px';
objdemo.style.overflowX = 'scroll';
maindemo.style.overflow = 'hidden';
} else {
objdemo.style.width = '865px';
objdemo.style.overflowX = 'visible';
maindemo.style.overflow = 'visible';
}
}
</script>

<style>
#demo {
background-color: #FFF;
border: 1px solid #999;
color: #000;
display: block;
font-size: 20px;
overflow-y: auto;
padding: 15px;
position: relative;
white-space: pre;
width: 500px;
z-index: 100;
}
</style>

<div id="demo" onclick="demoExpandir();"> ....... el contenido ....... </div>

19 comentarios:

sebastian giacobino  

Hola! ya había recurrido a tu ayuda una vez, y fue una muy buena idea, así que ahora vuelvo a hacerlo. Es por el siguiente problema: hice una entrada, pegue un texto de word y del traductor de google, como tengo modificado el color del fondo, sabía que quizas me tiraría un error, y así fue, las letras aparecían con fondo blanco. Me meti para corregir el asunto, reescribí el texto en la edicion de la entrada, y cuando la publiqué se modificó la visualización de las entradas, ahora solo se ve 1 entrada en lugar de todas. Traté de corregir esto pero no pasa nada, supuestamente esta configurado para que se vean 500 entradas, sin embargo aparecen de a una. No toqué ninguna ediciond de html del blog, así que no se por que pasó. Te agradecería mucho la ayuda. Un saludo.
mi blog: www.sebastiangiacobino.blogspot.com

Responder
sebastian giacobino  

solucionado, hice la entrada de nuevo, aunque me parece muy extraño que una etrada afectara todo el blog.
Un saludo.

Responder
JMiur  

Jamás se debe copiar y pegar directamente desde Word o desde ningún otro software similar. Al hacerlo, tambien se copian formatos estilos y una serie de etiquetas HTML que cambiarán completamente las definiciones del blog y el resultado será impredecible.

Cuando se copia desde Word, se debe copiar texto plano y sin formato.

Responder
Gem@  

Esa propiedad junto con visibility:hidden y display:none fue una de las primeras que llamó mi atención precisamente por eso porque aparece en los estilos principales del blog :)

Responder
JMiur  

Es una propeidad misteriosa y a la vez, muy poderosa :)

Responder
Ana  

¡Hola! Esta orden aparece en " 'style media='print'....overflow: visible !important;}'/style'" En "Imprimir"
Puede ser por esto, que sólo me imprima lo que entra en la primera página??? Y el resto no.
Voy a abusar de tu tiempo y conocimientos: Como puedo cambiar el tamaño de la letra del post que van a imprimir, sale muy pequeña y se lee muy mal.
¡Muchas Gracias!
Ana

Responder
JMiur  

Ana:
overflow: visible !important indica exactamente lo contrario, elimina toda restricción del CSS que esté cortando alguna etiqueta impidiendo que se muestre completa así que, dudo que ese sea el problema.

De impresiones se poco y nada pero, me imagino que dentro de esa parte que controla las características de la impresión style media='print', puedes agregar alguna propiedad para controlar el tamaño de las fuentes del mismo modo que se hace en la pantalla.
Por ejemplo:
.post-body {font-size:14pt}

Lo que veo en tu blog (por lo menos en uno de ellos) es que colocas el tamaño de las fuentes directamente en las entradas:
<span style="font-size: small;"> ............ </small>
y eso, sobrescribe las definicions del CSS; deberías evitar utilizar ese tipo de formato salvo situaciones especiales; de esa forma, podrás controlar el tamaño de las fuentes del blog con estilos generales.

Responder
Ana  

@JMiur
¡Hola JMiur! Reescribí los post sin el tamaño de letra, pero sigue imprimiendo pequeño. Si agrando la letra del post (CSS), se ve muy grande y queda muy feo...
Ya conseguí que sólo imprima el texto, con el noprint ....antes de:'/head'
Bueno, seguiré probando lo de la impresora.
¡Muchas Gracias por tu ayuda!
Saludos.
Ana

Responder
JMiur  

Me temo que con la impresión, mucho no puedo hacer porque no uso impresoras así que no puedo probar esas cosas :-)

Responder
Ana  

¡Hola JMiur! Por ahora me voy a olvidar de la impresora, voy a tratar de arreglar otros fallos que me van apareciendo. ¡Qué difícil es cuando no tienes mucha idea! En mi blog "Vamos a Comer Rico", cuando pinchas en: Ver Receta Completa, si es el primer post del día sale bien con la fecha y abajo el Título del Post. Pero, si es uno de los siguientes, se ve sólo la mitad del Título. Y además, veras que te muestra el Post, pero no la parte de arriba, si quieres ver el principio tienes que subir. ¡Qué cosa más rara!
Saludos.
Ana

Responder
JMiur  

No veo que ocurra eso, Ana. Dame un ejemplo porque los que he recorrido se ven normales.

Responder
TheFishWeb  

Hola me gusta mucho tu blog, para mi es el mejor
Me a ayudado mucho, solo que me ha surgido una duda de como puedo arreglar una falla en los comentarios soy nuevo en esto de editar en los blogs y eso asi que si supieras como arreglar este problema te lo agradeceria
El problema es el siguiente: Cuando comentas en mi blog mucho se van las letras del comentario y no se ve lo que dice un ejemplo aqui hasta abajo de lo que sucede:
http://thefishweb.blogspot.com/2010/03/entretenimiento.html
(apenas y aprendo en esto de blogs MUCHAS GRACIAS :))

Responder
JMiur  

Ese es un problema que no sólo ocurrirá ahí sino en cualquier otra parte del blog, incluyendo la entradas.

Las plantillas por defecto contemplan eso y lo evitan; al parecer, al que usas no así que deberías buscar en el CSS la regla del body y agregar esto:

body {
.................
word-wrap: break-word;
}

De ese modo, todo, incuyendo los comentarios se mostrará de modo normal.

Responder
Ana Maria Mendez  

Hola javier. Mi problema es que tengo un blogger de foografía. Cuando lo visito desde el movil la foto sale gigante, no esta adaptado para que se ajute al tamaño de mi pantalla.
Podías ayudarme?
si puedes, contestame a
amenlugo(at)gmail com

JMiur  

No conozco como funcionan las páginas en lso moviles así ique no puedo responderte.

Responder
JhOn Portilla  

Gracias JMiur por responder mi Email xD, y gracias por este post, justo lo que necesito .... bye

JMiur  

Espero que sea útil, John.

Responder
Martin  

Hola, buen días, estuve leyendo tu tutorial y me parecio muy bueno. Pude implementar lo de overflow con un hidden. Ahora bien, tengo una pregunta, en IE, cuando el div del overflow se encuentra dentro de un td, el td se estira y no respeta el overflow:hidden, como puede solucionar eso?

Muchas gracias!

Responder
Martin  

Hola, ya pude solucionarlo!, cree otro div que encerrase al div que tenía la propiedad a la que me refería y le coloque la misma y todo bien :)

Gracias de todas maneras

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