Olá a todos. Gostei muito do instrutor e desde curso, aprendi bastante coisa, porém tenho ainda algumas dúvidas e por isso venho aqui buscar ajuda da comunidade. Eu estou tentando reproduzir um layout para fins de estudo, segue: http://bit.ly/1PhQMWR
O código HTML da minha página:
<!DOCTYPE html>
<html>
<head lang="pt-br">
<title>Lifetime</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/home.css">
<meta charset="utf-8">
</head>
<body>
<!-- ÁREA SOBRE O CABEÇALHO DO SITE -->
<header class="cabecalho">
<img src="img/logo.jpg" class="logo" alt="Logo">
<nav class="menu">
<div class="botao-home">
<a href="#">Home</a>
</div>
<div class="botao-destaque">
<a href="#">Destaque</a>
</div>
<div class="botao-arquivo">
<a href="#">Arquivo</a>
</div>
</nav>
</header>
<!-- FIM DA ÁREA SOBRE O CABEÇALHO DO SITE -->
<!-- ÁREA SOBRE O MENU LATERAL DO SITE -->
<aside class="menu-lateral">
<img class="imgaside" src="img/savethedate.png" alt="Save The Date">
<h4>Links</h4>
<ul>
<li><a href="#">Lorem ipsun</a></li>
<li><a href="#">Lorem ipsun</a></li>
<li><a href="#">Lorem ipsun</a></li>
</ul>
</aside>
<!-- FIM DA ÁREA SOBRE O MENU LATERAL DO SITE -->
<!-- ÁREA SOBRE O CORPO PRINCIPAL DO SITE -->
<section class="principal">
<h1 class="posts-title">Últimos Posts</h1>
<article>
<h2 class="post">Neque porro quisquam est qui dolorem</h2>
<h3 class="data">São Paulo, SP - 12/11/2010 - 03:45 PM</h3>
<p class="paragrafo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet porta nisl, ornare vehicula massa rhoncus sit amet. Etiam semper finibus elit at scelerisque. Quisque ornare luctus mauris et tempus. Nunc volutpat metus vitae justo consectetur feugiat. Aenean ac aliquet justo. Aliquam neque quam, mattis eget massa vitae, vestibulum dignissim lorem. Maecenas non venenatis velit. Nunc non purus ipsum. Fusce et commodo est. Mauris quis diam vitae massa cursus auctor at semper nisi. Suspendisse consectetur diam in nisi lobortis, vitae bibendum eros cursus. Curabitur convallis suscipit elementum. Mauris ornare, mi a fringilla placerat, ipsum dui tincidunt lorem, et vehicula nisi nulla ac massa. Sed non ante vitae velit commodo placerat vel vel tortor. Aliquam erat volutpat.
</p>
<figure>
<img class="figura" src="img/bike.png" alt="Bicicleta">
<figcaption class="descricao">Neque porro quisquam est qui dolorem.</figcaption>
</figure>
<!-- ÁREA SOBRE OS COMENTÁRIOS -->
<h4 class="comentarios-title">Comentários</h4>
<article class="comentarios-secao">
<img class="avatar" src="img/avatar.png" alt="avatar">
<h5 class="nome-avatar">Maria Vulpulate</h5>
<p class="data-comentario">18/11/2010 - 08:47 PM</p>
<p class="comentario">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam maximus turpis urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas dapibus nulla.
</p>
</article>
<!-- FIM DA ÁREA SOBRE OS COMENTÁRIOS -->
</article>
</section>
<!-- FIM DA ÁREA SOBRE O CORPO PRINCIPAL DO SITE -->
<!-- ÁREA SOBRE O CORPO SECUNDÁRIO DO SITE -->
<section class="secundario">
<h1 class="posts-title">Posts em Destaque</h1>
<article>
<h2 class="post">Neque porro quisquam est qui dolorem</h2>
<h3 class="data">São Paulo, SP - 12/11/2010 - 03:45 PM</h3>
<p class="paragrafo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet porta nisl, ornare vehicula massa rhoncus sit amet. Etiam semper finibus elit at scelerisque. Quisque ornare luctus mauris et tempus. Nunc volutpat metus vitae justo consectetur feugiat. Aenean ac aliquet justo. Aliquam neque quam, mattis eget massa vitae, vestibulum dignissim lorem. Maecenas non venenatis velit. Nunc non purus ipsum. Fusce et commodo est.
</p>
</article>
</section>
<!-- FIM DA ÁREA SOBRE O CORPO SECUNDÁRIO DO SITE -->
<!-- ÁREA SOBRE O RODAPÉ DO SITE -->
<footer class="rodape">
<table>
<tr>
<th>Donec weirus a ribh</th>
<th>Donec weirus a ribh</th>
</tr>
<tr>
<td>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</td>
<td>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</td>
<td rowspan="3">
<p>Like us on Bookface</p>
</td>
</tr>
</table>
</footer>
<!-- FIM DA ÁREA SOBRE O RODAPÉ DO SITE -->
</body>
</html>E o CSS:
body {
margin-left: 30px;
margin-right: 30px;
}
.principal {
float: left;
width: 75%;
clear: left;
line-height: 20px;
box-sizing: border-box;
}
.secundario {
clear: left;
width: 75%;
float: left;
line-height: 20px;
}
.menu {
float: right;
position: relative;
top: 100px;
right: 20px;
}
.menu-lateral {
float: right;
clear: left;
width: 20%;
}
.menu a {
text-decoration: none;
text-transform: lowercase;
margin: 5px;
vertical-align: middle;
font-weight: bold;
color: white;
font-family: sans-serif;
}
.botao-home {
background-color: gray;
height: 20px;
width: 60px;
display: inline-block;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.botao-destaque {
background-color: gray;
height: 20px;
width: 100px;
display: inline-block;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.botao-arquivo {
background-color: gray;
height: 20px;
width: 90px;
display: inline-block;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.logo {
height: 200px;
width: 300px;
float: left;
position: relative;
margin-left: 15px;
margin-top: 20px;
}
.posts-title {
font-size: 30px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 5px;
}
.post {
font-size: 20px;
}
.data {
font-size: 12px;
margin: 5px;
}
.paragrafo {
margin: 15px;
}
figure {
display: inline-block;
}
.figura {
height: 40%;
width: 40%;
}
.imgaside {
height: 200px;
width: 200px;
}
.data-comentario {
font-size: small;
}
.rodape {
clear: both;
background-color: lightgray;
margin-right: 30px;
}
.avatar {
height: 16px;
width: 16px;
float: left;
padding: 5px;
border: solid 1px black;
margin: 3px;
border-radius: 3px;
}
.nome-avatar {
color: dimgray;
font-size: large;
font-weight: bold;
margin: 5px;
}
.comentarios-title {
font-size: 20px;
font-weight: bold;
margin-left: 35px;
margin-top: 10px;
}
.comentario {
margin-left: 35px;
}
.paragrafo {
font-family: sans-serif;
}Minhas dúvidas são:
1 - De que forma eu posso colocar meu menu lateral alinhado ao header?
2 - Sobre alinhamentos: I - Como alinhar aquele figcaption no centro da imagem? E também alinhar a foto no centro de seu box? II - Como alinhar aquele links superiores (home, destaque, arquivo) ao centro de suas divs? III - Como alinhar uma frase no centro de uma célula que é formada por 3 linhas?
3 - A melhor forma de 'descolar' o conteúdo dos limites da página após aplicar o reset do Eric Meyer é usando margin left e right no body?
Como ainda sou leigo no assunto as perguntas podem parecer bobas, portanto peço paciência a quem quiser me ajudar xD. A última pergunta: existe alguma abordagem diferente que eu deveria utilizar no lugar de algum dessas que eu usei? Caso alguém queira baixar a pasta completa e o modelo que eu estou usando, segue download: link
