3

Hice unos cambios en mi proyecto, y cuando me quise dar cuenta, todo se descolocó. Como no pensé que se iba a liar tanto, no hice copia, y bueno, intento cambiar cosas y nada funciona.

Ahora mismo está así el código:

::-moz-selection { /* Code for Firefox */
  color: white;
  background: #8d33ff;;
}

::selection {
  color: white;
  background: #8d33ff;;
}

body {
	font-family: Verdana;
	background-image: url("https://image.flaticon.com/icons/png/128/1206/1206290.png");
	width: 100%;
	background-size: 100px 80px;
}

/* Redimensión */

* {
	box-sizing: border-box;
}
#menu {
	float:left;
	width:100%;
	text-align:center;
}
#menu a {
	background-color: none;
	padding:10px;
	margin-top:0px;
	display:block;
	text-align: center;
	width:100%;
	color:white;
}

#portada {
	float:left;
	width:100%;
	padding:0 20px;
}
#lateral {
	background-color:none;
	float:left;
	width:100%;
	padding:15px;
	margin-top:7px;
	text-align:center;
}

#contenido2 {
	background-color:none;
	float:left;
	width:100%;
	padding:15px;
	margin-top:7px;
	text-align:center;
}

/* Estructura flex */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
}

.flex-container > div {
  background-color: none;
  color: black;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}

/* Nav bar */

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #4CAF50;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}

/* Galería */

img {
  max-width: 100%;
  height: auto;
}

div.img {
  border: 1px solid #ccc;
  background-color: white;
  overflow: hidden;
}

div.img:hover {
    border: 1px solid #777;
}

div.desc {
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 31%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 30%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

/* Dropdown */

.dropdown {
  float: left;
  overflow: hidden;
  color: black;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
   overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#myInput {
  box-sizing: border-box;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.show {display: block;}

/* Otros */

.lateral {
	background-color: FloralWhite;
}

p {
    background: rgba(236, 223, 255, 0.5);
}

a {
    display: flex;
    align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>
<body>

<div class="flex-container" id="portada">
  <div style="flex-grow: 10">
		<img src="https://image.freepik.com/vector-gratis/fondo-banner-gatos-lindos-dicen-hola_45130-353.jpg"
		width="100%" height="300px;">
  </div>
</div>
<!-- class="active" -->

<div class="navbar" id="menu">
  <a class="active" href="./index.php">
      <i class="material-icons" style="font-size:24px; color: white">home</i>Inicio</a>
      
  <a href="">Gato1</a>
      
  <a href="">Gato2</a>
      
  <a href="">Gato3</a>
     
      <div class="dropdown" style="float: right;">
    <button onclick="myFunction()" class="dropbtn">Buscar 
      <i class="material-icons" style="font-size:24px; color: white; vertical-align:middle">search</i>
    </button>
    <div id="myDropdown" class="dropdown-content">
      <input type="text" placeholder="Buscar..." id="myInput" onkeyup="filterFunction()">
            <a href="#gato1">Gato1</a>
            <a href="#gato2">Gato2</a>
            <a href="#gato3">Gato3</a>
            <a href="#gato4">Gato4</a>
            <a href="#gato5">Gato5</a>
            <a href="#gato6">Gato6</a>
            <a href="#gato7">Gato7</a>
    </div>
    
  </div> 
</div>

<div class="flex-container" id="lateral">	
	<div style="flex-grow: 1">
	    	
	<p>Somos unos gatos adorables de prueba :D</p>
            
    </div>
  
  </div>	
    
	<div style="flex-grow: 9"> 

    <div class="responsive">
		<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
		<div class="desc">Hola soy otro gato</div>
	</div>

	   	<div class="responsive">
		<a href="gato2.jpg">
		<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
    </a>
		<div class="desc">Hola soy otro gato</div>
	</div>
  </div>

	<div class="responsive">
		<a href="gato3.jpg">
		<img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
    </a>
		<div class="desc">Y otro gato</div>
	</div>
	
	<div class="responsive">
		<a href="gato3.jpg">
		<img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
    </a>	
		<div class="desc">Y otro gato</div>
	</div>
  
  <div class="responsive">
		<a href="gato.jpg">
		<img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
    </a>
		<div class="desc">Hola soy un gato</div>
		</div>
	
	<div class="responsive">
		<a href="gato2.jpg">
		<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
    </a>
		<div class="desc">Hola soy otro gato</div>
	</div>
</body>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>

</html>

No recuerdo ahora más que añadir el dropdown del menú, y quizá intentar arreglar el responsive de las imágenes. No sé cuando se puso así de raro todo.

Lo que se ha descolocado:

  • Menú de navegación. Ahora está vertical, antes horizontal y no logro cambiarlo.
  • En el dropdown del menú, las opciones que hay al desplegar aparecen con color blanco, por mucho que cambio a color negro en el css a la clase, no cambia.
  • El texto que hay debajo de las imágenes tenía un fondo blanco que no sé cuándo desapareció.
  • Las flexbox son ignoradas. El proyecto tiene la siguiente estructura, y la ignora completamente.

estructura web

Para el primer punto, intenté volver a hacer todo desde el principio. Literalmente copié todo el código que salía bien y lo pegué, modificando lo correspondiente, y aún así seguía en vertical.

Para el segundo punto, añadí al .dropdown color negro. Quité el color: white que tenía la clase .dropdown, .dropbtn, pero nada. Al .dropdown-content igual, color: black y nada.
No sé que se supone que tengo que modificar para cambiar eso.

El tercer punto probablemente haya sido el causante de todo. Me hago un lío intentando que las imágenes sean responsive sin conseguir del todo el punto deseado que se consigue en los tutoriales que veo, siempre terminan deformándose o saliéndose el texto o cualquier otro problema.

4
  • Hola Lucía. Visita CodePen. Allí te coloqué un ejemplo con tus gatos para que puedas hacer una cuadrícula totalmente Responsive. Tanto de la forma antigua como de la forma moderna. No te lo coloco en las respuesta por el momento porque puede resultar muy extensa la explicación. Lo revisas y me comentas. Commented el 5 feb. 2020 a las 12:01
  • Si hayas útil la solución que encuentres en CodePen puede considerar copiar el código y explicarlo en una pregunta y respuesta que te puedas plantear. Commented el 5 feb. 2020 a las 12:02
  • 1
    Voy a probarla y ahora te digo, ¡muchas gracias!
    – Lucía
    Commented el 5 feb. 2020 a las 12:07
  • 1
    Otra cosa, puedes desarrollar cada parte de la página en forma de componentes. Es decir, que las cabeceras, que es donde debe ir el banner y el menú de navegación el contenido, las secciones y el pie de página las desarrolles como componentes independientes para que te sea más fácil. Commented el 5 feb. 2020 a las 12:09

2 respuestas 2

4

Cuando suceden este tipo de cosas no hay que ponerse nervioso y, aunque cueste, tratarlo como una oportunidad para aprender o reforzar el conocimiento que se tiene sobre lo que estás maquetando.

Trataré de responderte punto por punto, desglosándolos para finalmente colocar un snniped con todo los puntos arreglados.

  1. El problema lo tienes en el tamaño que le has dado a los <a> de tu elemento #menu. Al darles un width: 100% estás diciéndoles que ocupen la totalidad de lo que ocupe su padre, ocasionando que estos salgan verticalmente.

  2. Este se trata de un problema de pura especifidad de CSS. Estás tratando de afectar a un elemento con la regla .dropdown-content a que ya está siendo afectado por otra regla que prevalece sobre esa #menu a. En la especifidad llamar a un elemento por la ID tiene más peso que hacerlo por la clase, por lo que para afectar correctamente al elemento con tu regla la cambie por #myDropdown a (te recomiendo que leas sobre la especifidad CSS).

  3. No tienes ninguna regla que afecte al background-color de ese elemento. Con añadírsela a la regla div.desc que tienes definida, te valdría.

  4. A mi juicio este solo punto requería una análisis aparte debido a su longitud. Yo abriría una sola pregunta solamente con este.

::-moz-selection { /* Code for Firefox */
  color: white;
  background: #8d33ff;;
}

::selection {
  color: white;
  background: #8d33ff;;
}

body {
	font-family: Verdana;
	background-image: url("https://image.flaticon.com/icons/png/128/1206/1206290.png");
	width: 100%;
	background-size: 100px 80px;
}

/* Redimensión */

* {
	box-sizing: border-box;
}
#menu {
	float:left;
	width:100%;
	text-align:center;
}
#menu a {
	background-color: none;
	padding:10px;
	margin-top:0px;
	display:block;
	text-align: center;
	color:white;
}

#portada {
	float:left;
	width:100%;
	padding:0 20px;
}
#lateral {
	background-color:none;
	float:left;
	width:100%;
	padding:15px;
	margin-top:7px;
	text-align:center;
}

#contenido2 {
	background-color:none;
	float:left;
	width:100%;
	padding:15px;
	margin-top:7px;
	text-align:center;
}

/* Estructura flex */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
}

.flex-container > div {
  background-color: none;
  color: black;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}

/* Nav bar */

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #4CAF50;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}

/* Galería */

img {
  max-width: 100%;
  height: auto;
}

div.img {
  border: 1px solid #ccc;
  background-color: white;
  overflow: hidden;
}

div.img:hover {
    border: 1px solid #777;
}

div.desc {
  padding: 5px;
  text-align: center;
  font-size: 12px;
  background-color: white;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 31%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 30%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

/* Dropdown */

.dropdown {
  float: left;
  overflow: hidden;
  color: black;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
   overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#myDropdown a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#myInput {
  box-sizing: border-box;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.show {display: block;}

/* Otros */

.lateral {
	background-color: FloralWhite;
}

p {
    background: rgba(236, 223, 255, 0.5);
}

a {
    display: flex;
    align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>
<body>

<div class="flex-container" id="portada">
  <div style="flex-grow: 10">
		<img src="https://image.freepik.com/vector-gratis/fondo-banner-gatos-lindos-dicen-hola_45130-353.jpg"
		width="100%" height="300px;">
  </div>
</div>
<!-- class="active" -->

<div class="navbar" id="menu">
  <a class="active" href="./index.php">
      <i class="material-icons" style="font-size:24px; color: white">home</i>Inicio</a>
      
  <a href="">Gato1</a>
      
  <a href="">Gato2</a>
      
  <a href="">Gato3</a>
     
      <div class="dropdown" style="float: right;">
    <button onclick="myFunction()" class="dropbtn">Buscar 
      <i class="material-icons" style="font-size:24px; color: white; vertical-align:middle">search</i>
    </button>
    <div id="myDropdown" class="dropdown-content">
      <input type="text" placeholder="Buscar..." id="myInput" onkeyup="filterFunction()">
            <a href="#gato1">Gato1</a>
            <a href="#gato2">Gato2</a>
            <a href="#gato3">Gato3</a>
            <a href="#gato4">Gato4</a>
            <a href="#gato5">Gato5</a>
            <a href="#gato6">Gato6</a>
            <a href="#gato7">Gato7</a>
    </div>
    
  </div> 
</div>

<div class="flex-container" id="lateral">	
	<div style="flex-grow: 1">
	    	
	<p>Somos unos gatos adorables de prueba :D</p>
            
    </div>
  
  </div>	
    
	<div style="flex-grow: 9"> 

    <div class="responsive">
		<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
		<div class="desc">Hola soy otro gato</div>
	</div>

	   	<div class="responsive">
		<a href="gato2.jpg">
		<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
    </a>
		<div class="desc">Hola soy otro gato</div>
	</div>
  </div>

	<div class="responsive">
		<a href="gato3.jpg">
		<img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
    </a>
		<div class="desc">Y otro gato</div>
	</div>
	
	<div class="responsive">
		<a href="gato3.jpg">
		<img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
    </a>	
		<div class="desc">Y otro gato</div>
	</div>
  
  <div class="responsive">
		<a href="gato.jpg">
		<img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
    </a>
		<div class="desc">Hola soy un gato</div>
		</div>
	
	<div class="responsive">
		<a href="gato2.jpg">
		<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
    </a>
		<div class="desc">Hola soy otro gato</div>
	</div>
</body>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>

</html>

Para finalizar, te daría un consejo.: El inspector de elementos de las herramientas de desarrollador del navegador es tu amigo. Aprender a usarlo es clave para aprender a maquetar.

2
  • ¡Muchas gracias por tu respuesta! La aplicaré y a ver si doy con solucionar de nuevo el flexbox, si no, ya recurriré a preguntar por aquí
    – Lucía
    Commented el 5 feb. 2020 a las 11:50
  • 1
    Faltaban algunos cierres de divs y eso causaba la descolocación de todo, los añadí ¡y ya está todo solucionado!
    – Lucía
    Commented el 5 feb. 2020 a las 11:58
1

Gracias a la respuesta de @phpMyGuel y el comentario de @David E. Luna M., he conseguido resolver todo lo que tenía pendiente.

Haciendo uso de los grid logré algo incluso mejor que lo que tenía, modificando así el tamaño que se quiera y haciendo que no se distorsionen.

Finalmente ha quedado así el código completo:

::-moz-selection { /* Code for Firefox */
  color: white;
  background: #8d33ff;;
}

::selection {
  color: white;
  background: #8d33ff;;
}

body {
	font-family: Verdana;
	background-image: url("https://image.flaticon.com/icons/png/128/1206/1206290.png");
	width: 100%;
	background-size: 100px 80px;
}

/* Redimensión */

* {
	box-sizing: border-box;
}

a {
    display: flex;
    align-items: center;
}

#menu {
	float:left;
	width:100%;
	text-align:center;
}
#menu a {
	background-color: none;
	display:flex;
	text-align: center;
	color:white;
  }

#portada {
	float:left;
	width:100%;
	padding:0 20px;
}
#lateral {
	background-color:none;
	float:left;
	width:100%;
	padding:15px;
	margin-top:7px;
	text-align:center;
}

#contenido2 {
	background-color:none;
	float:left;
	width:100%;
	padding:15px;
	margin-top:7px;
	text-align:center;
}

/* Estructura flex */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
}

.flex-container > div {
  background-color: none;
  color: black;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}

/* Nav bar */

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 14px 16px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #4CAF50;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}

/* Galería */

img {
  max-width: 100%;
  height: auto;
}

div.img {
  border: 1px solid #ccc;
  background-color: white;
  overflow: hidden;
}

div.img:hover {
    border: 1px solid #777;
}

div.desc {
  padding: 5px;
  text-align: center;
  font-size: 12px;
  background-color: white;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 31%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 30%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

/* Dropdown */

.dropdown {
  float: left;
  overflow: hidden;
  color: black;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
   overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#myDropdown a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#myInput {
  box-sizing: border-box;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.show {display: block;}

/* Otros */

.lateral {
	background-color: FloralWhite;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.grid {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(var(--columnas), 1fr);
  
  width: calc(100% - 20px);
  max-width: 1200px;
  gap: 10px;
}

.grid__item {
  padding-top: 85%;
  position: relative;
  border: 1px solid;
}

.grid__img {
  --object-fit: cover;
  --object-position: center center;
}

.grid__img {
  display: block;
  top: 0;
  bottom: 0;
  object-fit: var(--object-fit);
  object-position: var(--object-position);
  height: 100%;
  width: 100%;
}

.grid__img,
.caption {
  position: absolute;
  margin: auto;
  left: 0; right: 0;
}

/* Cantidad de columnas en función
de la pantalla: */
@media screen and (min-width: 600px) {
  .grid {
    --columnas: 3;
  }
}

@media screen and (min-width: 400px) and (max-width:599px) {
  .grid {
    --columnas: 2;
  }
}

@media screen and (max-width: 399px) {
  .grid {
    --columnas: 1;
  }
}

.caption {
  background-color: rgba(255, 255, 255, 0.5);
  top: auto;
  bottom: 0;
  min-height: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.limpiar {
  clear: both;
}

p {
    background: rgba(236, 223, 255, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<div class="flex-container" id="portada">
  <div style="flex-grow: 10">
		<img src="https://image.freepik.com/vector-gratis/fondo-banner-gatos-lindos-dicen-hola_45130-353.jpg"
		width="100%" height="300px;">
  </div>
</div>
<!-- class="active" -->

<div class="navbar" id="menu">
  <a class="active" href="./index.php">
      <i class="material-icons" id="icono" style="font-size:24px; color: white">home</i>Inicio</a>
      
  <a href="">
      <i class="material-icons" style="font-size:24px; color: white">home</i>Gato1</a>
      
  <a href="">
      <i class="material-icons" style="font-size:24px; color: white">home</i>Gato2</a>
           
  <a href="">
      <i class="material-icons" style="font-size:24px; color: white">home</i>Gato3</a>
     
      <div class="dropdown" style="float: right;">
    <button onclick="myFunction()" class="dropbtn">Buscar 
      <i class="material-icons" style="font-size:24px; color: white; vertical-align:middle">search</i>
    </button>
    <div id="myDropdown" class="dropdown-content">
      <input type="text" placeholder="Buscar..." id="myInput" onkeyup="filterFunction()">
            <a href="#gato1">Gato1</a>
            <a href="#gato2">Gato2</a>
            <a href="#gato3">Gato3</a>
            <a href="#gato4">Gato4</a>
            <a href="#gato5">Gato5</a>
            <a href="#gato6">Gato6</a>
            <a href="#gato7">Gato7</a>
    </div>
    
  </div> 
</div>

<div class="flex-container" id="lateral">	

	<div style="flex-grow: 1">
	    	
	<p>Somos unos gatos adorables de prueba :D</p>
            
  </div>
    
	<div style="flex-grow: 9"> 
    
		<div class="grid">
  <div class="grid__item">
    <img  class="grid__img" src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="">
    
    <div class="caption">
      Texto a colocar
    </div>
  </div>
  
  <div class="grid__item">
    <img  class="grid__img" src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="">
    
    <div class="caption">
      Texto a colocar
    </div>
  </div>
  
  <div class="grid__item">
    <img  class="grid__img" src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="">
    
    <div class="caption">
      Texto a colocar
    </div>
  </div>
  
  <div class="grid__item">
    <img  class="grid__img" src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="">
    
    <div class="caption">
      Texto a colocar
    </div>
  </div>
  
  <div class="grid__item">
    <img  class="grid__img" src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75">
    
    <div class="caption">
      Texto a colocar
    </div>
  </div>
  
  <div class="grid__item">
    <img  class="grid__img" src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg">
    
    <div class="caption">
      Texto a colocar
    </div>
    <div class="limpiar"></div>
  </div>
</div>

</div>
</div>
</body>

<script>

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.