Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Lo aprendido

productos.html

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Producto - Negocio de Omar</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="productos.css">
    </head>
    <body>
        <header>
            <div class="caja">
                <h1><img src="imagenes/logo.png"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="productos.html">Productos</a></li>
                        <li><a href="contacto.html">Contacto</a></li>
                    </ul>
                </nav>
            </div>
        </header>
    </body>
</html>

productos.css

header {
    background-color: #BBBBBB;
    padding: 20px 0;
}

.caja {
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

Salida en el navegador

1 respuesta

¡Hola Omaraugustobautistamora!

En el código que compartiste, veo que estás creando una página de productos con un encabezado que incluye un logotipo y un menú de navegación. La estructura HTML es correcta y el uso de la etiqueta semántica "header" es adecuado.

En cuanto al posicionamiento de los elementos, estás utilizando la propiedad "position" para colocar el menú en la esquina superior derecha de la página. Sin embargo, ten en cuenta que al utilizar posicionamiento absoluto, el elemento se posicionará en relación a su elemento padre, en este caso, la caja que contiene el logotipo y el menú. Por lo tanto, si cambias el tamaño de la ventana del navegador, el menú se moverá junto con la caja, lo que puede no ser lo que deseas.

Una alternativa sería utilizar la propiedad "float" para colocar el menú a la derecha. Por ejemplo, podrías agregar la siguiente regla CSS:

nav {
    float: right;
    margin-top: 40px;
}

Esto hará que el menú se coloque a la derecha de la caja y se ajustará automáticamente al tamaño de la ventana del navegador. La propiedad "margin-top" se utiliza para mover el menú hacia abajo y separarlo del encabezado.

Espero que esta información te sea útil. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)