Ejercicio sobre como ocultar cajas con css mediante visibility y/o display

Ejercicio sobre como ocultar cajas con css mediante visibility y/o display

Print Friendly, PDF & Email
Ejercicio sobre como ocultar cajas con css mediante visibility y/o display
Valora esta entrada

En css disponemos de 2 propiedades que nos permiten ocultar una caja. Son las propiedades display:none;visibility:hidden;

A pesar de que las dos sirven para ocultar una caja su relación con las cajas vecinas es distinta.

  • visibility:hidden; hace que el hueco generado por la caja al ser ocultada quede vacío.
  • display:none; hace que el hueco generado sea ocupado por el resto de cajas del documento web.

Sería interesante antes hacer el ejercicio que leyeras esta entrada.

Las propiedades anteriores son útiles por ejemplo en la creación de menús.

Entremos en materia.

Enunciado

Crea un documento web dónde aparezcan 2 contenedores uno al lado del otro.

Cada grupo de cajas debe estar formado por 2 filas de 3 cajas cada una.

Usa las dimensiones y propiedades que consideres oportunas.

enunciado ejercicio visibility y display de css
Ejercicio css sobre la propiedad visibility y display:none

Se recomienda usar la propiedad box-sizing.

Si lo deseas puedes usar las propiedades float, display:inline-block o ambas.

Los colores de la imagen son: #bb00bb, #ccc y #ffff00.

Solución del ejercicio

En la solución presentada los contenedores se han apilado mediante display:inline-block;

Las cajas dentro de cada contenedor se han apilado mediante float:left;

A los contenedores se les ha dado un ancho de 300px y un margin de 20px arriba y abajo y 50px a los laterales.

Cada caja tiene un width de 60px y un margin de 10px en todas las direcciones.

Se ha usado la propiedad box-sizing:border-box;

¿Como queda el documento html?

<!DOCTYPE html>
<html>
<head>
	<title>Ejercicio css visibility:hidden y display:none</title>
	<meta charset="utf-8"/>
	<meta name="author" content="Francesc Ricart"/>
	<style>
		/*Instrucciones CSS*/
	</style>
</head>
<body>

	<div class="izquierda">
		<!-- div.caja-$*6 -->
		<div class="caja-1">1</div>
		<div class="caja-2">2</div>
		<div class="caja-3">3</div>
		<div class="caja-4">4</div>
		<div class="caja-5">5</div>
		<div class="caja-6">6</div>	
	</div>
	<div class="derecha">
		<!-- div.caja-$*6 -->
		<div class="caja-1">1</div>
		<div class="caja-2">2</div>
		<div class="caja-3">3</div>
		<div class="caja-4">4</div>
		<div class="caja-5">5</div>
		<div class="caja-6">6</div>
	</div>

</body>
</html>

¿Como queda el documento css?

*{
			margin:0;
			padding:0;
			box-sizing:border-box;
		}

		.izquierda, .derecha{
			width:300px;
			padding:20px;
			border:1px solid #000;
			margin:20px 50px;
			display:inline-block;
			/*float:left;*/
		}

		.izquierda{
			background-color:#ccc;
		}

		.derecha{
			background-color:#ffff00;
		}

		div[class*="caja-"]{
			width:60px;
			height:60px;
			border:1px solid #000;
			margin:10px;
			background-color:#bb00bb;
			float:left;
			/*display:inline-block;*/

			color:#fff;
			font-weight:bold;
			font-size:18px;
		}

		.izquierda .caja-2{display:none;}
		.derecha .caja-2{visibility: hidden;}

Si juntamos todas las piezas resolvemos el ejercicio.

¡Hola!

Querido lector,

Con este ejercicio hemos practicado la diferencia entre ocultar una caja a partir de visibility y/o a partir de hidden.

El caso más típico es usar display:none;

Sin embargo es oportuno saber que existe visibility:hidden;

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejemplo de centrado horizontal de una caja con CSS
- 593
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Ejemplo de centrado vertical y horizontal con CSS
- 155
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Introducción al CSS. Que significa Cascading Style Sheets.
- 254
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Guía rápida para crear botones personalizados con CSS
- 194
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Mi chuleta de instrucciones css útiles para estilizar table de html
- 16
Comparto mi chuleta de instrucciones css útiles para estilizar table de html. Vemos un ejemplo de aplicación.
La propiedad overflow
- 203
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 615
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 420
Código html y css de como crear un menú vertical con un submenú horizontal.
Unidades de medida absolutas y relativas en CSS
- 418
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Maquetar una página de prestashop 1.6 con bootstrap
- 567
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.