Testei apenas com div e sem div e claro, vi a diferença, o texto foi centralizado.
Ja na tag "main div" eu nao entendi pra que ela serve, pois ao colocar ela no meu css e atualizar a pagina nao percebi diferença.
Solucionado
Testei apenas com div e sem div e claro, vi a diferença, o texto foi centralizado.
Ja na tag "main div" eu nao entendi pra que ela serve, pois ao colocar ela no meu css e atualizar a pagina nao percebi diferença.
Ivan,
Você se refere ao uso do seletor dessa regra CSS?
main div {
width: 720px;
margin: auto;
}Nesse seletor, você está pegando todas as div dentro de todos os main.
Colocando somente div você acabaria pegando as divs fora do main.
Você verá em algumas aulas outras formas de selecionar elementos via CSS.
Espero ter ajudado,
Abcs!
Na aula 5 da atividade 4 (Texto mais legivel) ele pede pra colocar largura e centralizar o texto.
Aí é usado esse codigo na resposta:
div { width: 720px; margin-left: auto; margin-right: auto; }
main div { width: 720x; margin: auto; }
Eu nao entendi bem se é pra usar um ou outro como resposta, mas se fosse, o "div" fica ok, ele faz a modificação esperada. Já o "main div" nao centraliza o texto e nao notei diferenças.
Ivan,
Acredito ter sido mal expressado no exercício, mas para fins práticos, eles deveriam fazer exatamente a mesma coisa nesse ponto do curso.
Pode manter a segunda regra apenas mas o main div era para funcionar da mesma forma que o outro. Dá uma olhada neste exemplo que fiz com a mesma situação.
Posta seu código para darmos uma olhada? Tanto HTML quanto essas partes do CSS. Quando for colocar usa o botão "Inserir código" que fica acima de onde digitamos as respostas aqui no post.
Abcs!
Codigo 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;
}
main h1 {
text-align: center;
background-color: #851944;
color: #FFF;
padding: 25px;
}
p {
text-align: justify;
}
blockquote {
background-color: #D9E5E3;
}
aside {
background-color: #3C1D3D;
color: #F2FFFC;
}
footer {
background-color: #000;
color: #F2FFFC;
}
nav a {
color: #F2FFFC;
}
main a {
color: #851944;
}
aside a {
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
}
aside, blockquote, footer {
padding: 20px;
}
main div {
width: 720x;
margin: auto;
}Codigo 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>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 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. 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 <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>
</div>
</main>
<img src="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>
<footer>
© João da Silva 2014
</footer>
</body>
</html>Oi Ivan,
Testei seu código aqui. Repara que na width da última regra CSS a unidade de medida está somente x.
Colocando px vai ficar funcionando como deveria.
Abcs!
Nossa que besteira!!! Esta resolvido, agora deu certo!
Mas bem, resumindo entao, tanto faz usar um dos 2 codigos?
Desculpem ressuscitar, mas acho que o Ivan ficou com dúvidas ainda.
Ivan, não é tanto faz. Se usar o main div { width: 720x; margin: auto; } vai aplicar estilo para todas as divs que estiverem dentro da tag main. Já se usar div { width: 720px; margin-left: auto; margin-right: auto; } vai aplicar estilo em todas as divs da página.
É bem comum, também, encontrarmos uma declaração como margin: 0 auto. Neste caso, estamos definindo valores diferentes para as margens: zero para as margens superior e inferior e auto para as margens laterais. De qualquer forma, temos o mesmo efeito: centralizar o elemento.
Olá, será que alguém poderia me explicar melhor esta parte?
Se margin: auto pode ser usado para centralizar um elemento qual é a diferença para o text-align ?
Olá Luiz, o ideal seria ter aberto outro tópico para isso.
Quanto à sua dúvida, tenha em mente que margin é uma propriedade para qualquer elemento HTML, já text-align é para texto. Se você erá text-align: center; no seu <h1> e ele ficar no centro da tela, quer dizer que o texto foi alinhado ao centro do seu elemento que, no caso, não tem tamanho definido e pega a largura inteira da página. Agora, se você definir um tamanho de largura (width) para o seu h1, verá que o texto ficará centralizado de acordo com o tamanho do seu elemento.