Hola! Alguien me puede decir cómo posiciono mi logo en el header en la parte superior izquierda? He tratado de muchas formas y no he podi...

Byron Felipe Narváez Granda

Pregunta

student•hace 3 años

Hola!

Alguien me puede decir cómo posiciono mi logo en el header en la parte superior izquierda?

He tratado de muchas formas y no he podido.

Este es mi código

Byron Felipe Narváez Granda

student•hace 3 años

Yo creo que el problema era mi VS Code, porque intenté de muchas formas y no funcionaba. Pero bueno, ahora ya está. Mil gracias. We are moving forward.

Bramucci Candela

student•hace 3 años

Perfecto! Me alegra ver que te sirvió :) Te animo a comparar ambos códigos y averiguar cual era el problema. Keep learning 💪

Byron Felipe Narváez Granda

student•hace 3 años

Bramucci Candela te agradezco muchísimo. Ahora si conseguí lo que necesitaba. Muchas gracias por tu valiosa ayuda! Así me quedó!

Bramucci Candela

student•hace 3 años

Hice un ejemplo rápido que debería funcionarte

Index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <header>
            <nav>
                <div>
                    <img src="./image.jpg" alt="logo" />
                    <!--Asegurate de poner tu imagen  -->
                </div>
                <ul>
                    <li><a href="">Acerca de</a></li>
                    <li><a href=""></a>Servicios</li>
                    <li><a href=""></a>Blog</li>
                    <li><a href=""></a>Cotización</li>
                </ul>
            </nav>
        </header>
    </body>
</html>

index.css

nav{
    background-color: rgb(86, 79, 193);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em;
}

img{
    width: 2rem;
    overflow: hidden;
}

ul{
    display: flex;
    gap: 1em;
    list-style: none;
}

Byron Felipe Narváez Granda

student•hace 3 años

Es que se la quité porque me aparece la imagen por fuera del header, por eso no la tengo allí. Eso es lo que quiero saber, porque me sale así. No sé si es mal diseño o mal insertada.

Bramucci Candela

student•hace 3 años

Estás seguro que en tu etiqueta <img> el src tiene algún valor? En la primera imagen que mandaste aparece vacío.

Byron Felipe Narváez Granda

student•hace 3 años

Mira, esto es lo que tengo y lo he intentado con flexbox, pero me aparece la imagen de mi logo en la parte superior izquierda, fuera del contenedor de mis otros enlaces.

Bramucci Candela

student•hace 3 años

Podés usar cosas como flexbox, pero te podría ayudar mejor si me mandas un ejemplo de como te gustaría que quedara tu nav completo.

Hola! Alguien me puede decir cómo posiciono mi logo en el header en la parte superior izquierda? He tratado de muchas formas y no he podi...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]