Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
5
respuestas

No encuentro lo que estoy haciendo mal =(

Hola, me ayudan con el código por favor. yo lo voy haciendo junto con la clase que dicta el profe, pero no me sale igual, se me desconfiguró el nav y mis letras en los productos me salen como si fuesen links, no sé que es lo que no estoy viendo =(

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <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="img/logo.png">
            </h1>
            <nav>
                <ul class="productos">
                    <li><a href="index.html"> Home</a></li>
                    <li><a href="productos.html"> Productos</li>
                    <li><a href="contacto.html"> Contactos</li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <ul class="productos">
            <li>
                <h2>Cabello</h2>
                <img src="img/cabello.jpg" alt="">
                <p>Con tijera o máquina, a gusto del cliente</p>
                <p>$10.00</p>
            </li>

            <li>
                <h2>Barba</h2>
                <img src="img/barba.jpg" alt="">
                <p>Corte y diseño profesional de barba</p>
                <p>$8.00</p>
            </li>
            <li>
                <h2>Cabello + Barba</h2>
                <img src="img/cabello+barba.jpg" alt="">
                <p>Paquete completo de cabello y barba</p>
                <p>$15.00</p>
            </li>
        </ul>
    </main>
</body>

</html>
5 respuestas

aqui mi 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;
}


.productos{
    width: 940px;
    margin: 0 auto;
}

.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
}
.productos h2{
    font-size: 30px;
    font-weight: bold;
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Solucione el tema de las letras azules de links, no habia cerrado las etiquetas . Me falta que no aplique todos los cambios de productos li a mi nav li. Es como que a todos los li aplico las modificaciones

Hola! Todavía no alcancé el nivel en el que estás, pero creo que esto te podría ayudar, la pagina no me cargó como la tuya así que no lo pude comprobar, pero el > indicarían los hijos de los contenedores.

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

main > .productos > li { display: inline-block; text-align: center; width: 30%; }

solución!

Muchas gracias Jero! Acabo de ver que puse en el ul del nav la class "productos" tb. Por eso me repite todo. No sé en que momento le puse. Muchas graciiias!!!