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

estilo del encabezado

Referente al curso CSS Grid: Simplificando layouts, en el capítulo Aplicar estilo al encabezado, menú y pie de página y actividad Aplicando estilo al encabezado

por Soledad Mayra Barrionuevo
| 98.9k xp | 13 posts

`en los ultimos videos el contenido no es el mismo yo copue todo talcual esta y no puedo hacesr q funcione el estilo del encabezado incluso tuve q cambiar :grid-template-rows: 50px auto 50px; proque el pie de pagina me quedo a la mitad....



.app {
    background: #f1f1f1;
    display: grid;
    grid-template-areas: 
    "encabezado"
    "contenido"
    "rodapie";
    grid-template-columns: auto;
    grid-template-rows: 50px auto 50px;
}

.menu__link{
    color: #333333;
    padding: 5rem 1rem;
}

.menu__link:hover, .menu__link:activo {
    border-bottom: 2px solid #0073e6;
}

.encabezado {
   align-items: center;
   display: flex;
   grid-area: encabezado;
   padding: 0 2rem;
}
.contenido {
grid-area: contenido;
padding: 0 2rem;
}

.rodapie { 
    background: #fdfdfd;
    color: #333333;
    grid-area: rodapie;
    padding: 1rem;
    text-align: center;
}
3 respuestas
por Rafaela Rocha
| 2876.2k xp | 8758 posts
Alura Scuba Team Scuba Team

Hola Soledad, espero que estés bien! ¡Muchas gracias por su contribución! ¡Para cualquier duda, estoy disponible! ¡Vamos juntos! ¡No desanimes! :)

Si este post te ayudó, por favor, marca como solucionado ✓.
por Idania De Jesús Guerrero Fonseca
| 116.3k xp | 26 posts

Hola Soledad, tienes un error (al igual que lo tiene el profesor en el video), la sintaxis correcta es: .menu__link:active, no .menu__link:activo... aparte tienes un padding de 5rem en .menu__link en vez de 0.5rem, es decir que aunque corrijas el error de activo seguirá sin aparecer tu border porque el padding es demasiado largo y se oculta detrás de las imágenes de la sección de "destacados".

Espero haberme dado a entender, saludos :)

por Idania De Jesús Guerrero Fonseca
| 116.3k xp | 26 posts

Soledad, me corrijo a mí misma, el primer elemento con la clase .menu__link, tiene otra clase llamada .activo, lo que el profesor quiso hacer es que ese elemento por default tuviera su border-bottom azul, tal como aparece en la página modelo. Es decir que debería quedar así: 

.menu__link:hover,
.activo {
    border-bottom: 2px solid #0400ff;
}