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

Margem superior do H1 ficou grande

Ao substituir o reset pelo normalize apareceu um espaço na margem superior do h1.

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="projeto/favicon.png">
        <link rel="stylesheet" href="Normalize.css">
        <link rel="stylesheet" href="bio.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>
    <body>
        <header>
        </header>
        <main>
            <h1>Sobre mim</h1> 

                <div>
                    <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e <em>que agregam valor</em> para meus clientes.</p>
                    <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

                    <h2>Como trabalho</h2>

                    <blockquote>
                        <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                        <cite>José Souza, Fiat</cite>
                    </blockquote>


                    <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

                    <p>Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.</p>

                    <h2>Experiência</h2>

                    <blockquote>
                        <p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
                        <cite>Manoel Santos, Petrobrás</cite>
                    </blockquote>

                    <p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="http://www.ibm.com.br">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>
                    <p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

                    <h2>Comunidade</h2>

                    <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas <a href="portifolio.html">palestras</a> e mantenho um <a href="blog.html">blog</a>.</p>

                        <img src="eu.jpg" alt="Foto de João da Silva">
                </div>
        </main>
        <aside>
                <h1>João da Silva</h1>
                <nav>
                    <ul>
                        <li><a href="home.html">Home</a></li>
                        <li><a href="Portifolio.html">Portifólio</a></li>
                        <li><a href="bio.html">Sobre mim</a></li>
                        <li><a href="blog.html">Blog</a> </li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </aside>
        <footer class="mainfoot">
            &copy; João da Silva 2014
        </footer>
    </body>
</html>
3 respostas

Opa Júlio, td bem?

É normal um reset ser diferente do outro.

Tenta dar um inspect element e ver a quantidade de margin. Depois disso vc pode no seu CSS sobreescrever essa margin para se adequar ao que vc precisa (:

Abração, espero ter ajudado!

Olá Júlio! A função do reset é padronizar a sua página para que em qualquer navegador que você abra ela seja vista da mesma maneira.

Existem diversos arquivos de reset que você pode utilizar. O reset do Eric Meyer, que é o utilizado no curso, praticamente zera todas as propriedades básicas do seu CSS, ou seja, deixa o seu estilo "cru". Ele é o ideal para quem está começando pois você tem controle total de como sua página será estilizada, você vai saber porque aquela fonte está com esse tamanho, porque aquele título aparece em negrito e porque aparece um espaço na margem do h1. Você vai saber porque foi você que colocou aquela propriedade lá, não foi o padrão do navegador que decidiu, porque você zerou todas com o reset, ok?

Agora existem outros arquivos de reset, como o Normalize. Você pode utilizar ele também, pois a função é a mesma, padronizar a sua página para que em qualquer navegador que você abra ela seja vista da mesma maneira. Só que o Normalize, ao contrário do reset do Eric Meyer já coloca algumas propriedades para você ao invés de zerar todas elas. Então, algumas propriedades que você realmente vai ter que mexer ele já deixa preparado para você. Isso é bom pois faz com que você seja mais ágil na construção da sua página. Mas, por outro lado, para quem está começando não é legal, pois você vai ter que pesquisar o arquivo para saber porque aconteceu isso ou aquilo.

Minha recomendação é, começe pelo reset do Eric Meyer e depois teste o Normalize. Alguns preferem ficar com o primeiro, mesmo sendo desenvolvedores experientes, aí vai do gosto e da adaptação de cada um, mas para facilitar no começo deixe o Normalize para depois.

Abraços e sucesso nos estudos!

solução!

Olá Júlio, o normalize determina uma margem superior ao elemento H1 de 0.67EM, algo em torno de 10PX. Como o Yuri disse você pode sobreescrever essa propriedade em seu CSS com o código:

h1 {
    margin-top: 0;
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software