sem alteração nenhuma na pagina, qual o problema? | CSS Grid: simplificando layouts

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

Referente ao curso CSS Grid: simplificando layouts

por Chrysthian Prudencio Ferreira Tavares

| 169.6k xp | 22 posts

boa noite pessoal, então é o seguinte, eu coloquei 50px no cabeçalho e background color no body sem alteração nenhuma, coloquei algo errado?

.app {
    background: #f1f1f1;
    display: grid;
    font-family: Arial, Helvetica, sans-serif;
    grid-template-areas:
        "cabecalho"
        "conteudo"
        "rodape";
    grid-template-columns: auto;
    grid-template-rows: 50px auto auto;

}

.cabecalho {
    background: green;
}

.conteudo {
    background: red;
}

.rodape {
    background: blue;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

5 respostas

por Thiago Prates de Paula

| 65.6k xp | 47 posts

Auxiliar de Informática

08/04/2022

Bom dia Chrysthian, tudo jóia ?

Olha, seria ideal que você tivesse mandado o HTML para podermos acompanhar o HTML junto.

Mas pela saída que apareceu na página, tenho quase certeza que há um problema com o link entre o HTML e o CSS.

Dê uma olhada no seu link, ele tem estar semelhante a esse:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Com as devida alterações ( mudando o href para o caminho que se encontra o seu arquivo .css )

Espero o seu retorno.

por Chrysthian Prudencio Ferreira Tavares

| 169.6k xp | 22 posts

08/04/2022

boa tarde Thiago, está assim olha...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Alura Store | Baixe nossos aplicativos e jogos</title>
    <link href="./assets/css/normalize.css" rel="stylesheet">
    <link href="./assets/css/reset.css" rel="stylesheet">
    <link href="/assets/css/style.css" rel="stylesheet">
</head>
<body class="app">
    <header class="cabecalho">Cabeçalho</header>
    <main class="conteudo">Conteúdo</main>
    <footer class="rodape">Rodapé</footer>
    <script src="./assets/js/fontawesome.all.min.js"></script>
</body>
</html>

solução!

por Thiago Prates de Paula

| 65.6k xp | 47 posts

Auxiliar de Informática

08/04/2022

Notei que na declaração do link css do styles.css você usou o " / " ao invés do " ./ ". Seria proposital ?

Caso não seja, pode ser que seja isso.

Outra dica que você pode usar para conferir se o seu caminho está correto. Usando o VS Code, é dar Ctrl + Click no caminho do seu arquivo. Caso eles esteja correto, o VS Code vai abrir uma aba desse arquivo. Do contrário vai retornar que o arquivo não foi encontrado.

por Chrysthian Prudencio Ferreira Tavares

| 169.6k xp | 22 posts

08/04/2022

*o / foi propósital pq não tava encontrando, eu usei o Ctrl + Click e criei novos arquivos mas mesmo assim sem sucesso, será que o código está quebrado? vou te que verificar isso *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Alura Store | Baixe nossos aplicativos e jogos</title>
    <link href="/assets/css/style.css">
    <link href="/assets/css/reset.css">
    <link href="/assets/css/normalize.css">
</head>
<body class="app">
    <header class="cabecalho">Cabeçalho</header>
    <main class="conteudo">Conteúdo</main>
    <footer class="rodape">Rodapé</footer>
    <script src="/assets/js/fontawesome.all.min.js"></script>
</body>
</html>

.app {
    background: #f1f1f1;
    display: grid;
    font-family: Arial, Helvetica, sans-serif;
    grid-template-areas:
        "cabecalho"
        "conteudo"
        "rodape";
    grid-template-columns: auto;
    grid-template-rows: 50px auto auto;

}

.cabecalho {
    background: #00cc99;
}

.conteudo {
    background: red;
}

.rodape {
    background: blue;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Chrysthian Prudencio Ferreira Tavares

| 169.6k xp | 22 posts

08/04/2022

era questão de posicionamente de pastas, obrigado thiago;