Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haz lo que hicimos en el aula

Referente al curso HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación, en el capítulo Posicionamiento de los elementos y actividad Haz lo que hicimos en el aula

por Charles Hugo Huaringa Valverde
| 111.6k xp | 61 posts
<!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>Productos - Barbería Alura</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" alt="logo"></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>
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;
}
1 respuesta
por Rafaela Rocha
| 2875.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Charles!

Por lo que veo en tu código, estás haciendo referencia a dos archivos CSS: "reset.css" y "productos.css". Es importante que verifiques que ambos archivos estén en la misma carpeta que tu archivo HTML, de lo contrario, no se aplicarán los estilos.

En cuanto al código CSS que has mostrado, estás aplicando estilos al encabezado (header) y a la clase "caja". En la clase "caja" estás definiendo un ancho de 940px y una posición relativa, lo que significa que se posicionará en relación a su posición original en el documento. En la etiqueta "nav" estás definiendo una posición absoluta, lo que significa que se posicionará en relación a su elemento padre que tenga una posición relativa o absoluta. En este caso, el elemento padre es la clase "caja".

En la etiqueta "nav" estás definiendo una posición en la parte superior (top) de 110px y en la parte derecha (right) de 0px. Además, estás definiendo que los elementos de la lista (li) se muestren en línea (display: inline) y tengan un margen de 15px a la izquierda. Finalmente, estás definiendo que los enlaces (a) tengan un tamaño de fuente de 22px, negrita y sin subrayado.

Espero que esta información te sea útil para replicar lo que hicimos en el aula. Si tienes alguna otra duda, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!

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