Solucionado
Cara podem por favor revisar o meu código, eu acho que tem algo de errado, porque quando eu troco o float: right pelo float:left a minha imagem com a navegação do site não troca de lado, e minhas bordas não estão ficando com o resultado final. Segue meu código CSS.
main{
float: left;
width: 85%;
}
.minha-foto, .navegacao-site{
float: right;
width: 15%;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
Renato, cola o HTML também pra gente testar tudo direitinho de acordo com o seu projeto?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biografia - João da Silva</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="site.css">
</head>
<body>
<main>
<h1>Sobre mim</h1>
<div class="texto-central">
<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 <strong>acessibilidade, responsividade e web semântica</strong>, sem descuidar da qualidade de código.</p>
<h2 class="subtitulo-texto">Como trabalho</h2>
<blockquote class="direita">
<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, FiatSatisfazer</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 class="esquerda">
<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.oul.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.globo.com.br">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 class="subtitulo-texto">Comunidade</h2>
<p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho <a href="blog.html">um blog</a>.</p>
</dir>
</main>
<img src="eu.jpg" alt="Foto de João da Silva" class="minha-foto">
<aside class="navegacao-site">
<h1>João da Silva </h1>
<nav>
<ul>
<li><a href="index.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>
<ul class="icones-sociais">
<li>
<a class="github" href="http://www.github.com/git-joaodasilva">Github</a>
</li>
<li>
<a class="twitter" href="http://www.twitter/twitter-joaodasilva">Twitter</a>
</li>
<li>
<a class="linkedin" href="http://www.linkedin.com/linkedin-joao-da-silva/32/4/508">Linkdin</a>
</li>
</ul>
</aside>
<footer class="claerfix">
© João da Silva 2014
</footer>
</body>
</html>CSS
body{
font-family:"Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
font-size: 100%;
line-height: 1.5;
}
h1, h2{
font-family:"Open Sans Condensed","Arial", sans-serif;
}
h1{
margin-bottom: 20px;
margin-top: 30px;
margin-left: 40px;
margin-right: 40px;
}
h2{
font-size: 40px;
font-family:"Open Sans Condensed", sans-serif;
clear: both;
}
main h1{
text-align: center;
background-color: #851944;
color: #FFF;
padding: 25px;
margin: 0px;
border-bottom: 10px solid black;
font-size: 60px;
text-transform: uppercase;
}
strong{
font-weight: bold;
}
em{
font-style: italic;
}
p{
text-align: justify;
margin: 20px 0;
}
main{
float: left;
width: 85%;
}
.minha-foto, .navegacao-site{
float: right;
width: 15%;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
.texto-central{
width: 720px;
margin-left: auto;
margin-right: auto;
padding: 30px;
}
.navegacao-site{
background-color: #3C1D3D;
color:#F2FFFC;
padding: 20px;
text-align: center;
}
.icones-sociais li{
display: inline-block;
}
.icones-sociais a {
width: 40px;
height: 40px;
display: inline-block;
text-indent: -9999px;
}
.subtitulo-texto{
clear: both;
}
.clearfix{
clear: both;
}
.github{
background-image: url(github.png);
}
.twitter{
background-image: url(twitter.png);
}
.linkedin{
background-image: url(linkedin.png);
}
.direita{
float: right;
}
.esquerda{
float: left;
}
blockquote{
background-color: #D9E5E3;
padding: 20px;
border: 10px solid #C2CCCA;
width: 250px;
margin: 20px 40px;
box-sizing: border-box;
float: right;
}
cite{
font-style: italic;
float: right;
}
footer{
background-color: #000;
color: #FFF;
padding: 20px;
clear: both;
}
nav a {
color: #F2FFFC;
text-transform: lowercase;
}
ul{
color: #FFF;
}
ul li a{
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
}
aside, img {
float: right;
width: 15%;
}
aside{
clear: right;
box-sizing: border-box;
}Renato, duas observações.
Coloca a imagem da foto do João da Silva dentro da tag aside.
Reajusta o tamanho da imagem, ela vai ficar bem pequena depois que você fizer esse reajuste.
Provável que ainda tenha outros problemas por causa desse ajuste. Olha esse outro tópico em que mostro alguns exemplos de solução para um problema relacionado ao seu.
A solução aplicada lá, vai te ajudar a entender algumas coisas.
Link: https://cursos.alura.com.br/forum/topico-icones-das-redes-sociais-muito-pequenos-62455
Wanderson, tudo bem ?!
Cara coloquei a imagem dentro da tag aside, até ai OK, e consegui colocar a imagem no tamanho correto, porém, a imagem não ficou colada totalmente no cando direito da tela, e caixa lateral (onde estão os ícones de navegação e as imagens do github e etc.) não está na dimensão correta.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biografia - João da Silva</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="site.css">
</head>
<body>
<main>
<h1>Sobre mim</h1>
<div class="texto-central">
<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 <strong>acessibilidade, responsividade e web semântica</strong>, sem descuidar da qualidade de código.</p>
<h2 class="subtitulo-texto">Como trabalho</h2>
<blockquote class="direita">
<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, FiatSatisfazer</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 class="esquerda">
<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.oul.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.globo.com.br">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 class="subtitulo-texto">Comunidade</h2>
<p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho <a href="blog.html">um blog</a>.</p>
</dir>
</main>
<aside class="navegacao-site">
<img src="eu.jpg" alt="Foto de João da Silva" class="minha-foto">
<h1>João da Silva </h1>
<nav>
<ul>
<li><a href="index.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>
<ul class="icones-sociais">
<li>
<a class="github" href="http://www.github.com/git-joaodasilva">Github</a>
</li>
<li>
<a class="twitter" href="http://www.twitter/twitter-joaodasilva">Twitter</a>
</li>
<li>
<a class="linkedin" href="http://www.linkedin.com/linkedin-joao-da-silva/32/4/508">Linkdin</a>
</li>
</ul>
</aside>
<footer class="claerfix">
© João da Silva 2014
</footer>
</body>
</html>CSS
body{
font-family:"Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
font-size: 100%;
line-height: 1.5;
}
h1, h2{
font-family:"Open Sans Condensed","Arial", sans-serif;
}
h1{
margin-bottom: 20px;
margin-top: 30px;
margin-left: 40px;
margin-right: 40px;
}
h2{
font-size: 40px;
font-family:"Open Sans Condensed", sans-serif;
clear: both;
}
main h1{
text-align: center;
background-color: #851944;
color: #FFF;
padding: 25px;
margin: 0px;
border-bottom: 10px solid black;
font-size: 60px;
text-transform: uppercase;
}
strong{
font-weight: bold;
}
em{
font-style: italic;
}
p{
text-align: justify;
margin: 20px 0;
}
main{
float: left;
width: 85%;
}
.minha-foto, .navegacao-site{
float: right;
width: 15%;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
.texto-central{
width: 720px;
margin-left: auto;
margin-right: auto;
padding: 30px;
}
.navegacao-site{
background-color: #3C1D3D;
color:#F2FFFC;
padding: 20px;
text-align: center;
}
.icones-sociais li{
display: inline-block;
}
.icones-sociais a {
width: 40px;
height: 40px;
display: inline-block;
text-indent: -9999px;
}
.subtitulo-texto{
clear: both;
}
.clearfix{
clear: both;
}
.github{
background-image: url(github.png);
}
.twitter{
background-image: url(twitter.png);
}
.linkedin{
background-image: url(linkedin.png);
}
.direita{
float: right;
}
.esquerda{
float: left;
}
.minha-foto{
width: 202px;
height: 202px;
}
blockquote{
background-color: #D9E5E3;
padding: 20px;
border: 10px solid #C2CCCA;
width: 250px;
margin: 20px 40px;
box-sizing: border-box;
float: right;
}
cite{
font-style: italic;
float: right;
}
footer{
background-color: #000;
color: #FFF;
padding: 20px;
clear: both;
}
nav a {
color: #F2FFFC;
text-transform: lowercase;
}
ul{
color: #FFF;
}
ul li a{
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
}
aside {
float: right;
width: 15%;
}
aside{
clear: right;
box-sizing: border-box;
}Cara, consegui resolver na base da gambiarra braba, hardcore mesmo. Obtive o resultado final do vídeo, porém, não consigo usar absolutamente nada de position, e os testes não são nada iguais ao do instrutor #chateado :(
Segue CSS
body{
font-family:"Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
font-size: 100%;
line-height: 1.5;
}
h1, h2{
font-family:"Open Sans Condensed","Arial", sans-serif;
}
h1{
margin-bottom: 20px;
margin-top: 30px;
margin-left: 40px;
margin-right: 40px;
}
h2{
font-size: 40px;
font-family:"Open Sans Condensed", sans-serif;
clear: both;
}
main h1{
text-align: center;
background-color: #851944;
color: #FFF;
padding: 25px;
margin: 0px;
border-bottom: 10px solid black;
font-size: 60px;
text-transform: uppercase;
}
strong{
font-weight: bold;
}
em{
font-style: italic;
}
p{
text-align: justify;
margin: 20px 0;
}
main{
float: left;
width: 85%;
}
aside, .minha-foto{
float: right;
width: 15%;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
.texto-central{
width: 720px;
margin-left: auto;
margin-right: auto;
padding: 30px;
padding-bottom: 80px;
}
.navegacao-site{
background-color: #3C1D3D;
color:#F2FFFC;
padding: 0;
text-align: center;
}
.icones-sociais li{
display: inline-block;
}
.icones-sociais a {
width: 40px;
height: 40px;
display: inline-block;
text-indent: -9999px;
}
.subtitulo-texto{
clear: both;
}
.clearfix{
clear: both;
position: fixed;
}
.github{
background-image: url(github.png);
}
.twitter{
background-image: url(twitter.png);
}
.linkedin{
background-image: url(linkedin.png);
}
.direita{
float: right;
}
.esquerda{
float: left;
}
.minha-foto{
width: 120%;
height: 120%;
}
blockquote{
background-color: #D9E5E3;
padding: 20px;
border: 10px solid #C2CCCA;
width: 250px;
margin: 20px 40px;
box-sizing: border-box;
float: right;
}
cite{
font-style: italic;
float: right;
}
footer{
background-color: #000;
color: #FFF;
padding: 20px;
clear: both;
}
nav a {
color: #F2FFFC;
text-transform: lowercase;
}
ul{
color: #FFF;
}
ul li a{
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
}
aside{
float: right;
width: 15%;
}
aside{
clear: right;
box-sizing: border-box;
}Oi Renato, teve um detalhe que você deixou passar, olha esse trecho no seu código:
aside, .minha-foto{
float: right;
width: 15%;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}Tá definindo um tamanho pra imagem e pro aside, sendo que usando porcentagem, o aside terá o tamanho baseado na tela enquanto a imagem terá seu tamanho baseado no aside, ai ela fica pequena, fazendo com que você precise escrever esse outro trecho:
.minha-foto{
width: 120%;
height: 120%;
}A dica aqui é separar as coisas, no aside, deixe só o que é pro aside:
aside{
float: right;
width: 15%;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}E pra imagem não ficar passando do tamanho do aside, a gente só precisa definir o tamanho dela como 100%.
.minha-foto{
width: 100%;
}Não entendi a questão da dimensão que você falou no outro post. Tem como você me mandar um link de um print, você pode subir a imagem no https://pasteboard.co
Essa parte do curso realmente precisa revisada, ela tem alguns problemas. Vou rever com o pessoal. Mas não fica chateado não tá? Vamos resolver isso. Qualquer dúvida, vai me dizendo que a gente vai solucionando cada uma delas.
Fala Wanderson, tudo bem cara. Brow consegui resolver aqui. agora vou rever o ultimo vídeo para refazer as propriedades position, como eu sou inexperiente tem horas que bate uma bad, mas, e com os erros que vamos aprendendo ;)
Com relação a dimensão da foto era quando eu usava o position: absolut; ele pegava quase a tela inteira, mais com esse seu esclarecimento voltou a funcionar.
Qualquer coisa eu grito vocês aqui.
Boa Renato! Pode gritar!! rsrs, estamos aqui pra garantir que você aprenda tudo certinho, sem dúvida alguma.