10 Mar Ejercicio sobre como ocultar cajas con css mediante visibility y/o display
En css disponemos de 2 propiedades que nos permiten ocultar una caja. Son las propiedades display:none;y 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.
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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
¿Cómo emparejar tipografías en una página web sin morir en el intento? Pocas decisiones en el mundo web causan tanta controversia. ¿Necesitas herramientas para acertar?
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Ejercicio css dónde se calcula el width real de dos cajas con y sin box-sizing y el espacio real ocupado. Incluye solución.
Ejercicio en que se practica con la llamada e implementación de tipografías css desde distintos recursos web. Incluye solución.
Ejercicio visual dónde se debe indicar que tipo de posicionamiento se ha usado para desplazar una caja. Incluye solución y explicación.
No hay comentarios