Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

No puedo poner padding en el footer

Al colocar padding 40px en el footer, no se establece el cambio.

Que podría estar pasando?

gracias por sus respuestas.

Saludos

3 respuestas

Hola amigo, podrias insertar tu codigo para poder ayudarte? Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

puedes cargarlo con el icono que te muestro en la imagen.

estoy para ayudarte saludos!

Hola Jorge, gracias por tu buena disposición el código CSS es el siguiente:

header {
    background-color: #BBBBBB;
    padding: 300px 0;
}
.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
    padding: 20px 0;
}

nav{
    position:absolute;
    top: 110px;
    right: 0px;
}
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;
}

nav a:hover{
    color: #c78619;
    text-decoration: underline;
}

.productos{
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}
.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;

}

.productos li:hover{
    border-color: #c78619;

}
.productos li:active{
    border-color: #088c19;
}

.productos h2{
    font-size: 30px;
    font-weight: bold;
}

.productos li:hover h2{
    font-size: 33px;
}

.producto-descripcion{
    font-size: 18px;
}

.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

footer{
    text-align: center;
    background: url(imagenes/bg.jpg);
    padding: 40px;
}

.copyright{
    color: #BBBBBB;
    font-size: 13px;
    margin: 20px;
}

Hola amigo, noto 2 cosillas la primera es que agregaste otro padding de 20 px a la caja? y la segunda me falto el HTML para ver como estas declarando las clases jejeje, te dejo mis codigos esperando poder resolver tus dudas

HTML

<!DOCTYPE html>
<html>
    <html lang="es">
            <head>

                <meta charset="UTF-8">
                <title>productos - Barberia Alura</title>
                <link rel="stylesheet" href="reset.css">
                <link rel="stylesheet" href="productos.css">
            </head>

    <body>
        <header>
            <div class="caja">


            <h1><img src="logo.png"></h1>
    <nav>
        <ul>
            <li><a href="Index.html">Inicio</a></li>
            <li><a href="productos.html">Productos</a></li>
            <li><a href="contacto.html">Contacto</a></li>
        </ul>
    </nav>
</div>
        </header>
        <main>
            <ul class = "productos">
                <li>
                    <h2>Cabello</h2>
                    <img src="cabello.jpg">
                    <p class="producto-descripcion">Con tijera o Maquina, a gusto del cliente</p>
                    <p class="producto-precio">$ 10.00 us</p>
                </li>
                <li>
                    <h2>Barba</h2>
                    <img src="barba.jpg">
                    <p class="producto-descripcion">Corte y diseño  profesional de barba</p>
                    <p class="producto-precio">$ 08.00 us</p>    
                </li>
                <li>
                    <h2>Cabello  + Barba</h2>
                    <img src="cabello+barba.jpg">
                    <p class="producto-descripcion">Paquete completo de cabello y barba</p>
                    <p class="producto-precio">$ 15.00 us</p>
                </li>
            </ul>



        </main>
<footer>
    <img src="logo-blanco.png">
    <p class="copyright"> © Copyright Barberia Alura - 2022</p>
</footer>

    </body>

</html>

css

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

}

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

}

nav{

    position:absolute;
    top:110px;
    right: 0px;

}

nav li{

    display: inline;
    margin: 0 0 0 15px;

}

nav a{

    text-transform: uppercase;
    color:black;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;

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

}
.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin:0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius:10px;

}
.productos h2{
    font-size: 30px;
    font-weight: bold;

}

.producto-descripcion{
font-size: 18px;

}

.producto-precio{
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}

nav a:hover{
    color: #c78c19;
    text-decoration: underline;
}

.productos li:hover{
    color: #c78c19;
    border-color: #c78c19;

}

.productos li:active{
   border-color: #088c19;
}

.productos li:hover h2{
    font-size: 33px;
}

footer{
    text-align: center;
    background: url(bg.jpg);
    padding:40px;

}

.copyright{
    font-style: italic;
    color:#FFFFFF;
    font-size: 10px;
}

*NOTA: Recuerda que el archivo reset va antes en el html que tu CSS esto para que no afecte tus estilos *

*Si este post soluciono tu consulta no olvides marcar como solucion!! *

Cualquier otra duda porfavor no olvides en contactarme y lo vemos desde discord compartiendo tu pantalla bye :)