overflow CSS. scroll. overflow-x, overflow-y. Propiedad visibility (visible, hidden, collapse). Ejemplos (CU01038D)

Resumen: Entrega nº38 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01038D

 

 

VISIBILITY Y OVERFLOW CSS

En apartados anteriores hemos visto cómo a través de la propiedad display podíamos hacer que un elemento “desapareciera” de una página web estableciendo su valor en “none” (el elemento no se muestra; el efecto es como si no existiera, por lo que su espacio es ocupado por otros elementos). La propiedad visibility permite crear un efecto similar, pero en este caso el elemento permanece ocupando su espacio, aunque no se muestra.

css

 

PROPIEDAD CSS visibility
Función de la propiedad Permite ocultar elementos sin que su espacio sea ocupado por otros y también colapsar filas o columnas de una tabla.
Valor por defecto visible
Aplicable a Todos los elementos (excepto valor collapse, sólo para filas o columnas de tablas).
Valores posibles para esta propiedad visible (el elemento es visible)
hidden (el elemento es transparente, no es visible).
collapse (aplicable a filas o columnas de tablas las colapsa haciendo que sean no visibles).
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com #content1 {visibility: hidden;}
tr.filaColapsada {visibility: collapse;}

 

 

Un aspecto importante a tener en cuenta es que esta propiedad se hereda directamente por parte de todas las cajas hijas de una dada, de modo que ninguna caja hija se mostrará (excepto si tiene establecida la propiedad como visible). Esto tiene cierto interés, pues nos permite ocultar completamente una parte de una página web excepto algunos elementos específicamente señalados.

Nos podemos preguntar: ¿para qué vamos a querer tener en nuestra web un elemento que no se muestra? Pueden existir varios motivos. Uno de ellos, que queramos reservar un espacio que no sea ocupado por ningún  otro elemento. Otro motivo puede ser que a través de un lenguaje de programación como PHP, Javascript, etc. queramos alterar el valor de la propiedad visibility para que el elemento en algunos casos se muestre y en otros no.

El valor collapse puede no responder correctamente en algunos navegadores.

Veremos código para aplicar esta propiedad después de explicar la propiedad overflow.

 

 

PROPIEDAD OVERFLOW CSS

Una caja dentro del box-model de una página web puede tener unas dimensiones limitadas y el contenido exceder esas dimensiones. A eso se le llama “desbordamiento” (overflow en inglés). La propiedad overflow sirve para controlar cómo debe actuar el navegador en caso de que el contenido (por ejemplo texto) de una caja exceda las dimensiones de la misma.

PROPIEDAD CSS overflow
Función de la propiedad Permite definir cómo debe comportarse el navegador en caso de que el contenido de una caja exceda su tamaño.
Valor por defecto visible
Aplicable a Elementos tipo block
Valores posibles para esta propiedad visible (el contenido no se corta, se sale de su contenedor y se superpone con los elementos adyacentos que puedan existir)
hidden (el contenido que se muestra es sólo el que cabe en la caja contenedora y el resto queda no visible).
scroll (el contenido que se muestra es sólo el que cabe en la caja contenedora y el navegador muestra barras de scroll que permiten acceder al contenido no visible; el scroll se muestra incluso si el contenido no excede la caja).
auto (el comportamiento es el que establezca el navegador por defecto para casos de desbordamiento, normalmente mostrar scroll)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com #content1 {overflow: hidden;}
.elementoExpress {overflow: scroll;}

 

 

Crea un documento HTML con este contenido:

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilosCU01038DA.css">
</head>
<body>
<div id="caja1">Caja 1 aprenderaprogramar.com web de didáctica y divulgación de la programación cursos humor y más
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
<div id="caja2">Caja 2 aprenderaprogramar.com web de didáctica y divulgación de la programación cursos humor y más
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
<div id="caja3">Caja 3 aprenderaprogramar.com web de didáctica y divulgación de la programación cursos humor y más
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
<div id ="caja4">Caja 4 aprenderaprogramar.com web de didáctica y divulgación de la programación cursos humor y más
El tutorial css desde cero permite aprender sin tener conocimientos previos</div>
<div class="limpiador"></div>
</body>
</html>
 

 

Y un archivo de hoja de estilos con estas reglas (pon el nombre de archivo adecuado) que nos permitirán ver el resultado de aplicar los distintos valores de overflow:

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {width:507px; border-style: dotted; border-width: 2px;}
div {border-style: solid; border-width:2px; margin:56px 0px 7px 7px;
padding:7px; background-color: #FFEFD5; width:100px; height:200px; }
#caja1{ border-color:red; float:left; overflow: visible;}
#caja2{  border-color:blue;  float:left; overflow: hidden;}
#caja3{  border-color:green;  float: left; overflow: scroll;}
#caja4{ border-color:orange; float: left; overflow: auto;}
.limpiador {clear:both; padding:0; width:0; height:0; border-style:none; }
 

overflow css

 

 

En la caja 1 con la propiedad overflow: visible; comprobamos cómo el contenido se sale de la caja tanto hacia la derecha como hacia abajo. No obstante hay una diferencia: hacia la derecha el texto se encuentra otro elemento y queda “tapado”, mientras que hacia abajo no encuentra otros elementos, y a pesar de salirse de la caja contenedora (incluso se sale del elemento body) se muestra.

Prueba ahora a establecer la propiedad visibility para distintas cajas con distintos valores, e incluso para el elemento body, y comprueba los resultados.

 

 

PROPIEDADES OVERFLOW-X Y OVERFLOW-Y CSS

Las propiedades overflow-x y overflow-y son completamente análogas a la propiedad overflow, sólo que en vez de controlar tanto el desbordamiento horizontal como vertical, únicamente controlan el horizontal (overflow-x) o el vertical (overflow-y). De esta manera, se pueden especificar distintos comportamientos en horizontal y en vertical.

Estas propiedades pueden no funcionar correctamente en algunos navegadores por lo que son menos usadas que la propiedad overflow. También tienen definidos algunos valores como no-display y no-content que no son reconocidos por algunos navegadores.

En algunos casos, al establecer valores visible o hidden para estas propiedades en sentido horizontal o vertical el navegador introduce barras de scroll en el otro sentido, aún no habiéndose especificado nada al respecto.

 

 

EJERCICIO

Crea un contenedor div con las siguientes características definidas a través de CSS: ancho y alto 200 píxeles, color de fondo amarilo, borde color azul de 2 píxeles de ancho tipo sólido, un texto de tamaño 30 píxeles y con un largo suficiente para exceder la capacidad del div contenedor, y mediante la propiedad overflow haz que aparezcan scrolls horizontal y vertical que permitan visualizar todo el texto. Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MARZO - ABRIL 2017

1. Java / J2EE
2. Entornos Oracle
3. JavaScript, jQuery
4. .NET, C#
5. Entornos SQL Server
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación