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

Dúvidas no main h1

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="site.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>
        <main>
            <h1>Sobre mim</h1>


            <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 que <em>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: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

            <h2>Experiência</h2>
            <blockquote>
                <p>João domina as tecnologias como ninguém</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">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 <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com">G1</a>, 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 <a href="portfolio.html"> diversas palestras</a> e mantenho um <a href="blog.html"> blog</a>.</p>

        <img src="C:\Users\SUPORTE\Documents\LOGICA\HTML e CSS\Projeto Aula 1\eu.jpg" alt="Foto de João da Silva">

        <aside>
            <h1>João da Silva</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="portfolio.html">Portfolio</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>

        </main>

        <footer>

            &copy João da Silva 2014

        </footer>
    </body>
</html>

Esse código acima é o HTML, a tag main está no mesmo local da aula e aparentemente tudo está de acordo.

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

main h1 {
    text-align: center;
    background-color: #851944;
    color: #FFF;
}

p {
    text-align: justify;
}

Esse é o código CSS, eu atribuo ao h1 principal (main) as regras de negócio referente a cor e tal. Porém ele identifica o h1 dentro do aside como um h1 principal. Já fiz vários testes, já tentei ver outros posts aqui no forúm e nada deu certo. Por favor, me ajudem XD

18 respostas

Hugo, você está testando no local certo? as vezes você pode estar vendo um arquivo no navegador mas não é onde você está realizando as alterações.

Olá, Hugo. Você já tentou criar um id para o titulo e aplicar o css só nele? Por exemplo:

Luiz, será de grande ajuda. Meu email é hugonaaman@gmail.com, fica a vontade pra me mandar um email de teste. Te respondo com os arquivos zip

Olá Hugo, ele identifica o H1 no ASIDE, pois o ASIDE também está dentro da Tag Main, logo ambos são H1 de MAIN.

Tente fazer o que o Daniel Sugeriu criando um ID ou CLASSE para o h1 em especifico. Ou retirando o ASIDE de dentro do MAIN, assim também resolve o problema.

Retirei o ASIDE de dentro do MAIN e não funcionou, será algum erro no css?

Mantenha o ASIDE fora do MAIN e tente colocar desta forma no seu CSS:

main > h1 {
    text-align: center;
       background-color: #851944;
        color: #FFF;
}

Bem, é sempre melhor utilizar ID e Classes para isto. De verdade deixa seu Código muito mais organizado. Provavelmente você não foi introduzido a este conceito ainda então dê uma pesquisada no Google mesmo como funciona e tente aplicar.

Não vi nada ainda sobre ID e Classes, por isso não utilizei.

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="site.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>
        <main>
            <h1>Sobre mim</h1>


            <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 que <em>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: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

            <h2>Experiência</h2>
            <blockquote>
                <p>João domina as tecnologias como ninguém</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">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 <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com">G1</a>, 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 <a href="portfolio.html"> diversas palestras</a> e mantenho um <a href="blog.html"> blog</a>.</p>

        <img src="C:\Users\SUPORTE\Documents\LOGICA\HTML e CSS\Projeto Aula 1\eu.jpg" alt="Foto de João da Silva">

        </main>

        <aside>
            <h1>João da Silva</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="portfolio.html">Portfolio</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>
            &copy João da Silva 2014
        </footer>
    </body>
</html>

Fiz todas as alterações possíveis e ainda continua aparecendo da mesma forma :|

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

main > h1 {
    text-align: center;
    background-color: #851944;
    color: #FFF;
}

p {
    text-align: justify;
}

Então Hugo, Testei a solução do José e ela funciona, mas uma segunda opção é:

<h1 id="principal">Titulo</h1>

E no css:

#principal {
      text-align: center;
        background-color: #851944;
        color: #FFF;
}

Não se preocupe com essa sintaxe já que mais para frente ela será explicada detalhadamente no curso, eu escolhi o id mas com o class="principal" também seria uma opção válida. Espero que ajude :)

Eu tô quebrando a cabeça desde ontem pra resolver esse problema e até agora nada. Eu já até pensei que o problema seria o editor de texto que estou usando: Sublime Text. Mas pelo visto não é. Acabei de fazer as alterações propostas pelo Daniel enquanto dou prosseguimento à algumas tarefas do curso, porém no momento quase nada que eu faço no CSS é aplicado na minha página HTML. Segue os respectivos códigos abaixo.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="site.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>
        <main>
            <h1 id="principal">Sobre mim</h1>


            <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 que <em>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: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

            <h2>Experiência</h2>
            <blockquote>
                <p>João domina as tecnologias como ninguém</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">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 <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com">G1</a>, 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 <a href="portfolio.html"> diversas palestras</a> e mantenho um <a href="blog.html"> blog</a>.</p>

        <img src="C:\Users\SUPORTE\Documents\LOGICA\HTML e CSS\Projeto Aula 1\eu.jpg" alt="Foto de João da Silva">

        </main>

        <aside>
            <h1>João da Silva</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="portfolio.html">Portfolio</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>
            &copy João da Silva 2014
        </footer>
    </body>
</html>

CSS:

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

#principal{
    text-align: center;
    background-color: #851944;
    color: #FFF;
}

p {
    text-align: justify;
}

blockquote{
    background-color: #D9E5E3;
}

aside{
    background-color: #3C1D3D;
    color:#F2FFFC ;
}

footer{
    background-color: #000;
    color:#F2FFFC;
}
nav a{
    color: #F2FFFC;
}

Você verificou se existe algum erro na especificação do caminho que aponta para o seu css?

Olha eu já coloquei até referenciando o disco local na hora de chamar o arquivo site.css e não funcionou.

        <link rel="stylesheet" href="C:\Users\SUPORTE\Documents\LOGICA\HTML e CSS\site.css">

Não entendi muito bem sua sugestão, Daniel.

Tente deixar só

        <link rel="stylesheet" href="site.css">

Isso é, caso não tenha colocado seu arquivo css dentro de uma pasta epecifica, por exemplo:

<link rel="stylesheet" href="css/site.css">

Boa tarde Hugo,

Fiz um teste no CodePen e bastou alterar o main h1 para main > h1 ;)

MAAAAAAAAS semanticamente o <h1> geralmente é único, então o ideal é que o restante dos cabeçalhos utilizem os outros <h2>, <h3>, <h4> ...

Espero ter ajudado!

Abraços!

Daniel, deixei só o caminho pro arquivo site.css. Continua da mesma forma. Luiz Fernando já havia feito isso, não funcionou. Fiz de novo agora e não funcionou também. O que eu acho estranho é que mesmo aplicando novas regras de negócio ao código, como cor do footer, cor do menu de navegação e etc... o código ainda assim, não aplica essas novas alterações.

Luiz Fernando o Sublime Text, editor de texto que to usando, me proporciona a opção de ao clicar com o botão direito, abrir no navegador o arquivo html. Logo, não tem como eu estar abrindo um arquivo diferente.

Hugo,

Alterei no CodePen pra deixar igual ao segundo bloco de código que você disponibilizou, e ele está pegando o valor do #principal normalmente, por aqui no fórum será um pouco complicado a gente conseguir te ajudar já que aparentemente é algo que está acontecendo só na sua máquina, se quiser tentar me mandar os arquivos zipados e eu vejo aqui na minha máquina.

Responde ai que eu passo meu e-mail.

Como o Luiz disse é possível que seja algo na sua máquina, mas só por desencargo tente usar um comando inline no html.

<style type="text/css">
h1 {
    text-align: center;
    background-color: #851944;
    color: #FFF;
}
</style>

Só por desencargo acho que vale a pena tentar, embora eu não goste desse estilo já que dificulta a compreensão.

solução!

Prezado Hugo,

Conforme conversamos via e-mail, verificamos que houve apenas um erro de estrutura do CSS, segue a explicação:

Você tem 2 <h1> na sua página, uma fica no <main> e outro no <aside>.

No seu CSS estava apenas h1 {...}, sendo assim o CSS aplica esses atributos para TODOS OS <h1> , se você colocar main h1 {...} ele irá aplicar os atributos APENAS PARA OS <h1> DENTRO DO <main>, o do <aside> ficará sem esses atributos.

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