I made some changes to my project, and before I knew it, everything fell apart. Since I didn't think it was going to get so messed up, I didn't make a copy, and well, I try to change things and nothing works.
Right now the code is like this:
::-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>
I don't remember now more than adding the one dropdown
in the menu, and maybe trying to fix the one responsive
in the images. I don't know when everything got so weird.
What has been misplaced:
- Navigation menu . Now it's vertical, before horizontal and I can't change it.
- In the menu dropdown , the options that are displayed appear in white, no matter how much I change the color to black in the css to the class, it does not change.
- The text under the images had a white background that I don't know when it disappeared.
- Flexboxes are ignored . The project has the following structure, and it completely ignores it.
For the first point, I tried to redo everything from the beginning. I literally copied all the code that came out right and pasted it, modifying it accordingly, and it was still vertical.
For the second point, I added .dropdown
black to the color. I removed the color: white
one with the class .dropdown, .dropbtn
, but nothing. Like .dropdown-content
, color: black
and nothing.
I don't know what I'm supposed to modify to change that.
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.
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.
El problema lo tienes en el tamaño que le has dado a los
<a>
de tu elemento#menu
. Al darles unwidth: 100%
estás diciéndoles que ocupen la totalidad de lo que ocupe su padre, ocasionando que estos salgan verticalmente.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).No tienes ninguna regla que afecte al
background-color
de ese elemento. Con añadírsela a la regladiv.desc
que tienes definida, te valdría.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.
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.
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.Finally, the complete code looks like this: