Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

reset.css não retira as margens branca do header

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produtos.css">
    </head>
    <body>
        <header>
            <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>
        </header>
    </body>
</html>

insira seu código aqui

10 respostas

Oi Leandro como está o código da reset.css?

Olá Francisco,

baixei ele direto do exercício, não precisei editar nenhuma linha.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

Vi aqui! Fiz um teste e deu certo. Os arquivos css estão na pasta raiz também ou em algum subdiretório?

Tudo no mesmo diretório. Fiz um teste no Edge e deu certo. Mas, no chrome não. Vc tá usando qual?

solução!

Qualquer um aqui dá certo! Abri no Mozilla Firefox primeiro!

Tenta limpar o cache!

Segura o CTRL + F5 pra atualizar!

Reinstalei o Chrome e deu certo tb. Fiquei sem entender. Mas agora não tá dando espaço do menu para a anto direito da tela.

Show! Deixa eu ver teu produtos.css

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

.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; }

Fala Francisco.

Então, o problema estava no html mesmo. A

não estava englobando a linha do h1. Por isso dava errado. Obrigado pela ajuda.

Vi aqui! Tá faltando incluir uma DIV em HEADER com a CLASS caixa:

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