Entrar Ainda não tem acesso?
5
respostas

O menu continua errado e com certeza Deus me odeia

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Posicionamento dos elementos e atividade Consolidando o seu conhecimento

por Kellyson Dias de Almeida
| 20.3k xp | 19 posts

Eu literalmente copiei e colei o CSS da aula e minha div continua assim: As margens, que deveriam ser cinza, estão brancas.

Eu tenho certeza que o código tá igual (até porquê eu copiei e colei descaradamente!) mas mesmo assim eu vou deixar o CSS aqui pra vocês darem uma olhada. Me ajudem por favor estou há uma semana sem dormir.

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    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;
}
5 respostas
por Matheus Martins Pazinati
| 269.1k xp | 346 posts
Analista de PCM JR

Posta seu código html referente ao cabeçalho fazendo um favor, e a parte do head também, onde tem os links para o css.

por Kellyson Dias de Almeida
| 20.3k xp | 19 posts

Tá na mão

<!DOCTYPE html>
<html lang="pt-br">

<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>Barbearia Alura - Produtos</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="shortcut icon" href="images/html_css_2.png" type="image/x-icon">
    <link rel="stylesheet" href="produtos.css">
</head>

<body>
    <div class="caixa"> 
            <header>
                <h1></h1><img src="images/logo.png" alt="Barbearia Alura"></h1>
                    <nav>
                        <ul>
                            <li><a href="index.html" target="_blanc">Home</a></li>
                            <li><a href="produtos.html" target="_blanc">Produtos</a></li>
                            <li><a href="contato.html" target="_blanc">Contatos</a></li>
                        </ul>
                </nav>
            </header>
    </div>
</body>

</html>
por Leonardo Israel de Souza
| 24.1k xp | 5 posts
Implantador de Sistemas

Boa Noite, Pelo o que vi a sua Div = "CAIXA" está fora do Header. Vamos pensar assim: Eu tenho um Cabeçalho... dentro do meu cabeçalho eu quero criar uma caixa para guardar todas as informações que eu quiser colocar.

Nesse caso o correto seria:

<header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos </a></li>
                        <li><a href="contato.html">Contato </a></li>
                    </ul>
                </nav>
            </div>
        </header>

Espero ter ajudado.

por Kellyson Dias de Almeida
| 20.3k xp | 19 posts

Cara, deu certo, mas eu não entendi exatamente o por quê haha. Poderia me explicar?

por Matheus Martins Pazinati
| 269.1k xp | 346 posts
Analista de PCM JR

O seu css estava correto, o erro foi na estruturação do html. Olha o código html que você postou, e perceba que primeiro voce criou uma div, e colocou uma classe chamada caixa nela, e logo abaixo, criou o header, e depois todo o restante. Neste caso, você definiu que a div é pai do header ou seja, você criou a caixa div e dentro dela colocou uma caixa chamada header. No seu css, você definiu que o pai, que é a div .caixa, tem que ter 940px de largura, e quando você faz isso, por padrão o filho, neste caso o header, vai herdar esta largura, e também vai ter 940px (Da para alterar isto, mudando o width do filho, mas por padrão é assim). Ai você foi e pintou o fundo do header, que tem 940px, de cinza, e por isso, somente aquela parte ficou cinza.

Por conta disso, o pai deve ser o header, pois ele vai ter a largura de 100% da pagina, já que eu não defini nenhum width pra ele, e o filho, que vai ser a div (.caixa), vai ter 940px. Então, coloco uma cor de fundo no pai, e ai sim ela vai ocupar todo o espaço da página.

Olha a foto abaixo, o código já está corrigido, ou seja, o header é pai da div. Coloquei uma cor de fundo na div só para demonstrar o tamanho de cada um. Insira aqui a descrição dessa imagem para ajudar na acessibilidadeEntão a parte cinza é o pai (header), e o azul a div (filha). Como eu coloquei o fundo azul só no div, então só os 940px do centro ficaram azul. Caso não tenha entendido muito bem ainda, assista alguns videos no youtube a respeito de box-model, que você terá uma base de como funciona os elementos no site, e ficará mais fácil de entender e aplicar estes conceitos. Valeu.