0

Hola estoy haciendo el típico ejercicio de copiar la página de Google con HTML y CSS, la cuestión viene cuando intento incorporar la "lupa" de la barra de busqueda como una imagen, genere todo el codigo en html y en css pero no se porque no se me introduce la imagen. Les dejo el codigo: HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta chaarset="UTF=8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Clone</title>
    <!-- Estilos -->
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <header>
        <nav> <!--sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o a otros documentos -->
            <ul class="nav-right-section">
                <li> <a href="">Gmail</a></li>
                <li> <a href="">Imágenes</a></li>
                <li class="menu-icon"> 
                    <a href=""></a></li>
                <li> <a href="">
                    <img src="https://lh3.googleusercontent.com/ogw/AOh-ky3GV4IWHMm328PtmjEflpiUmOzM8iWe58SiWfgJYw=s32-c-mo"></a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="main-logo">
            <img src="https://1000marcas.net/wp-content/uploads/2020/02/logo-Google.png" alt="">
        </section>
        
        <section class="main-input">
            <div class="main-input-container">
                <span class="search-icon"></span> <!--- Classe que le he asignado a la imagen de la lupa --->
                <input type="text">
                <a class="micro-icon" href=""></a>
            </div>
        </section>
           
        <section class="main-buttons">
            <div><button>Buscar con Google</button></div>
            <div><button>Me siento con suerte</button></div>
        </section>
    </main>
    
</body>
</html>

Y ahora les dejo el CSS con el que les estaba dando los atributos y metiendo el link de la imagen:

main .main-input .search-icon{
    background-image: url("https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 18px;
    height: 18px;
}

Asi es como quiero que quede la lupa, es la pagina general de google Asi es como quiero que quede la lupa

Pero no se porque la lupa no aparece, esta es la que yo estoy creando. Pero si os fijais no se porque no se me introduce la imagen

1 respuesta 1

0

Lo que pasa es que un elemento span tiene como default display: inline. Esto hace que el bloque se ajuste al minimo contenido, que en tu caso al estar vacio es un cuadro de 0x0.

La solución?? Poner display:inline-block

main .main-input .search-icon{
    background-image: url("https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 18px;
    height: 18px;
    display:inline-block;
}
3
  • Perfecto mil gracias me ha funcionado correctamente, eso si no entiendo el concepto de "default display: inline" supongo que te refieres a como el elemento span muestra la información por pantalla, es asi? Commented el 28 sept. 2022 a las 10:18
  • @VictorMartorellDosSantos La mayoría (por no decir todos) los elementos HTML tienen propiedades que están previamente seteadas. El span tiene varias, entre ellas el diplay:inline el cual te causaba problemas. Por eso la solución pasa por sobrescribir dicha propiedad a display: inline-block. Por último recuerda aceptar la repuesta como correcta si es que te sirvió. Saludos
    – Yussef
    Commented el 28 sept. 2022 a las 12:24
  • Mil gracias Yussef lo voy entendiendo, ya he votado la respuesta como correcta pero me dice que hasta que no tenga mínimo 15 de reputación no se puede mostrar. Mil gracias de verdad por ayudarme a seguir creciendo en la programación. Commented el 29 sept. 2022 a las 20:18

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.