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.
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.