Entrar Ainda não tem acesso?
1
resposta

Não fica igual a do vídeo

Referente ao curso Sass: O CSS com superpoderes, no capítulo Primeiros passos e atividade Estilizando e criando variáveis

por Carlos Gabriel Soares Succi
| 83.2k xp | 33 posts

Aquelas divisões como se fossem "Traçinhos" não aparecem.

CSS:

$purple: #a050ab;
$light-grey: #eaeaeb;
$dark-grey: #464646;

.header {
    font-family: Arial, Helvetica, sans-serif;
}

.header__logo {
    text-align: center;
}

.header__logo 
.header__img {
    max-width: 350px;
}

.header__menu 
.menu__list {
    display: flex;
    justify-content: center;
    border-top: 1px solid $light-grey;
    border-bottom: 1px solid $light-grey;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    padding: 20px 0;
}

.header__menu 
.menu__list 
.menu__links {
    position: relative;
}

.header__menu 
.menu__list 
.menu__links:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3px;
    margin: auto;
    height: 15px;
    width: 1px;
    background-color: $light-grey;
}

.header__menu 
.menu__list 
.menu__links
.menu__link {
    padding: 0 25px;
    color: $dark-grey;

}

.header__menu 
.menu__list 
.menu__links
.menu__link:hover {
    color: $purple;
}

HTML:

<!DOCTYPE html>
<html>
<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>Gatito Petshop</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header class="header">
        <figure class="header__logo">
            <img class="header__img" src="assets/img/logo.png" alt="logo">
        </figure>
        <nav class="header__menu menu">
            <ul class="menu__list">
                <li class="menu__links">
                    <a href="index.html" class="menu__link">Página inicial</a>
                    <a href="index.html" class="menu__link">Sobre nós</a>
                    <a href="index.html" class="menu__link">Cães</a>
                    <a href="index.html" class="menu__link">Gatos</a>
                    <a href="index.html" class="menu__link">Pássaros</a>
                </li>
            </ul>
        </nav>
    </header>

</body>
</html>

Print do cabeçalho

1 resposta
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Carlos, tudo bem?

Primeiramente, peço desculpas pela demora em responder.

Analisando o seu index.html com o index.html do curso, notei uma diferença que está fazendo com que essas divisões não estejam aparecendo.

O que ocorre é que no seu código foi criado apenas um <li>(item da lista) que atuou como pai de todos os (links), enquanto no modelo da aula existe um <li> para cada <a>. Veja:

No seu código:

<ul class="menu__list">
    <li class="menu__links">
        <a href="index.html" class="menu__link">Página inicial</a>
        <a href="index.html" class="menu__link">Sobre nós</a>
        <a href="index.html" class="menu__link">Cães</a>
        <a href="index.html" class="menu__link">Gatos</a>
        <a href="index.html" class="menu__link">Pássaros</a>
    </li>
</ul>

Código da aula:

<ul class="menu__list">
    <li class="menu__links"><a href="index.html" class="menu__link">Página inicial</a></li>
    <li class="menu__links"><a href="about.html" class="menu__link">Sobre nós</a></li>
    <li class="menu__links"><a href="collection.html" class="menu__link">Cães</a></li>
    <li class="menu__links"><a href="collection.html" class="menu__link">Gatos</a></li>
    <li class="menu__links"><a href="collection.html" class="menu__link">Pássaros</a></li>
    <li class="menu__links"><a href="contact.html" class="menu__link">Contato</a></li>
</ul>

Esses "tracinhos" são criados por padrão pelo navegador, para separar um item da lista (<li>) de outro item, porém quando existe apenas um item, não tem o que separar e consequentemente essa divisão não é criada.

Para resolver essa questão, crie um <li> para cada <a>, assim como mostra o modelo.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!