Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Aula 3: Aplicando gradientes. O background da sessão principal não deixa de cobrir apenas os 940px?

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS

por Mayara Faustino Vieira
| 80.7k xp | 13 posts

Então, nessa aula o professor coloca um background praticamente branco (#FEFEFE) na sessão principal e, após retirar do 'main' a largura de 940px, ele coloca o mesmo comando na classe dessa sessão:

.principal {
    padding: 3em 0;
    background: #FEFEFE;
    width: 940px;
    margin: 0 auto;
}

Acredito que, nessa sessão principal, essa substituição não alterou o comportamento do background (a cor só ocupar a largura de 940px da página) como dá a entender no vídeo. Como a cor é quase branca, não dá pra perceber no resultado final a diferença. Estou certa ou viajando?

No meu código, criei uma div com o conteúdo da principal e a classe 'principal-conteudo' (assim como foi feito na sessão 'mapa'), aplicando a largura e margem a ela, e resolveu:

.principal{
    padding: 3em 0;
    background: #FEFEFE;
}
.principal-conteudo{
    width: 940px;
    margin: 0 auto;
}
2 respostas
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá May, tudo bem?

Exatamente! Seu raciocínio está correto. Não conseguimos ver essa diferença do width: 940px na cor em si, pois a utilizada no background é branca, mas é possível visualizarmos melhor através da ferramenta do desenvolvedor. Assim:

  • Com o width: 940px

section

  • Sem o width: 940px

section-2

Como o background é branco, não há necessidade de criarmos uma classe principal-conteudo, pois o efeito visual seria o mesmo. Dessa forma:

  • Exemplo 1
    .principal {
  padding: 3em 0;
  background: white;
}
.principal-conteudo{
  width: 940px;
  margin: 0 auto;
}
  • Resultado:

arquivofinal

  • Exemplo 2
.principal {
    padding: 3em 0;
    background: white;
    width: 940px;
    margin: 0 auto;
}
  • Resultado:

arquivofinal

Caso o background fosse de outra cor, a classe principal-conteudo seria muito importante ser criada, pois se as configurações de largura estivessem no .principal junto com o background, a cor do fundo iria ocupar só 940px e ficaria com as laterais da margem em branco. Veja no exemplo a seguir com a utilização da cor cinza:

corzicnaha

Ao separar em classe principal e classe principal-conteudo como você fez, resolveríamos essa questão.

coeeeee

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

por Mayara Faustino Vieira
| 80.7k xp | 13 posts

Perfeito. Muito obrigada!