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
5
respuestas

Barra en blanco al final de la pagina

Referente al curso HTML5 y CSS3 parte 3: Trabajando con formularios y tablas, en el capítulo Creando una nueva página y actividad Comenzando la página de contacto

por Javier Fernández Segura
| 102.6k xp | 27 posts

Hola colegas,

Les escribo porque al seguir las instrucciones de copiar y pegar el siguiente codigo de productos.html al archivo contacto.html:

<!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="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>

        <main>
            TEST
        </main>

        <footer>
            <img src="imagenes/logo-blanco.png">
            <p class="copyright">&copy Copyright Barbería Alura - 2020</p>
        </footer>
    </body>
</html>

Me despliega la pagina con una seccion en blanco hasta el final Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Saben porque sale esa barra blanca al final de la pagina?

Para referencia productos.html luce asi:

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

5 respuestas
por Gabriel Navarro
| 55.7k xp | 36 posts

revisa el css href="productos.css" , fijate algun estilo de footer

por Javier Fernández Segura
| 102.6k xp | 27 posts

Usan el mismo css las 2 paginas

por Javier Fernández Segura
| 102.6k xp | 27 posts

Les comparto el 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;
}

nav a:hover{
    color: #c78c19;
    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:#c78c19;
}

.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:#FFFFFF;
    font-size: 13px;
    margin:20px;
}
por Javier Fernández Segura
| 102.6k xp | 27 posts

Acabo de notar que esa barra blanca solo se ve cuando el navegador esta en mi monitor externo (un monitor de 24") pero si tengo el navegador en la pantalla de mi laptop la barra blanca no se ve. Sabrían explicarme porque sucede eso?

por Renzo Giraudo
| 54.2k xp | 59 posts

Hola, buenas tardes.

Me sucede lo mismo con mi página. ¿Alguien sabe como solucionarlo?.

Gracias.