Não estou conseguindo colocar a barra de navegação abaixo da foto na parte do portfólio. Sendo que nos outros arquivos como bio.html e blog.html a barra fica exatamente a 300 px abaixo da imagem.
Meu html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/stylo.css">
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<title>Portifólio - João da Silva</title>
</head>
<body>
<h1 class="titulo-principal">Portifólio</h1>
<p class="projetos">Veja abaixo a lista dos meus projetos mais relevantes: </p>
<ul class="portfolio">
<li>
<figure>
<img src="css/img/bmw.png" alt="Site da BMW">
<figcaption>
<a href="http://www.bmw.com.br/pt/index.html" target="_blank">BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</a></figcaption>
</figure>
</li>
<li>
<figure>
<img src="css/img/uol.png" alt="Site da UOL">
<figcaption>
<a href="https://www.uol.com.br/>" target="_blank">UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="css/img/ibm.png" alt="Site da IBM">
<figcaption>
<a href="https://www.ibm.com" target="_blank">
IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="css/img/g1.png" alt="Front-page do portal G1">
<figcaption>
<a href="http://g1.com.br" target="_blank">G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</a>
</figcaption>
</figure>
</li>
</ul>
<img src="css/img/eu.jpg" alt="Foto do João da Silva"class="minha-foto">
<aside class="barra-navegacao">
<nav>
<ul>
<li><h1>João da Silva</h1></li>
<li><a href="home.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</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<ul class="icones-sociais">
<li ><a class="github" href="https://github.com/joaodasilva" >GitHub</a></li>
<li><a class="twitter" href="https://twitter.com/joaodasilva" >Twitter</a></li>
<li><a class="linkedin" href="https://www.linkedin.com/joaodasilva" >Linkedin</a></li>
</ul>
</aside>
<footer class= "rodape-paginas">
© João da Silva 2014
</footer>
</body>
</html>CSS Geral
body{
font-family: "Crimson Text", serif;
background-color: #F2FFFC;
font-size: 120%;
line-height: 1.5;
}
.container {
width: 720px;
text-align: center;
margin: auto;
margin-bottom: 30px;
margin-top: 30px;
}
body a {
color:#851944;
text-decoration: none;
}
.titulo-principal{
font-family: "Open Sans Condensed", sans-serif;
background-color: #851944;
color: #FFF;
text-align: center;
padding: 25px;
border-bottom: 10px solid black;
font-size: 60px;
text-transform: uppercase;
}
.subtitulo-texto{
font-family: "Open Sans Condensed", sans-serif;
font-size: 30px;
text-align: left;
margin-left: 20px;
clear: both;
margin-top: 40px;
}
p {
text-align: justify;
font-family: "Crimson Text", serif;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
/*blockquote {
background-color: #D9E5E3;
box-sizing: border-box;
border: 10px solid #C2CCCA;
width: 250px;
margin: 0px;
border-top: 5px dashed black;
border-bottom: 5px dashed black;
border-right: 5px dashed black;
border-left: 5px dashed black;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 40px;
padding: 20px;
}
.citacao-fiat{
float: right;
}
.citacao-petrobras{
float: left;
}
cite{
font-style: italic;
}
*/
.barra-navegacao{
background-color:#3C1D3D;
color:#F2FFFC;
font-size: 30px;
font-family: "Open Sans Condensed", sans-serif;
padding: 20px;
text-align: center;
box-sizing: border-box;
text-decoration: none;
}
nav a{
color:#F2FFFC;
font-size: 25px;
text-transform: lowercase;
}
.icones-sociais li{
display: inline-block;
}
.icones-sociais a {
display: inline-block;
width: 40px;
height: 40px;
text-indent: -99999px;
}
.github{
background-image: url(img/github.png);
}
.twitter{
background-image: url(img/twitter.png);
}
.linkedin{
background-image: url(img/linkedin.png);
}
/*article{
padding-bottom: 30px;
border-bottom: 5px solid #ccc;
margin-bottom: 30px;
}
article .leia-mais{
padding: 1px;
margin: 16px;
display: block;
font-size: 25px;
text-align: center;
background-color: #E6E7E8;
}
*/
.barra-navegacao, .minha-foto{
float: right;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black
}
.rodape-paginas{
background-color: black;
color:#F2FFFC;
padding: 20px;
clear: both;
position: fixed;
bottom: 0px;
left: 0px;
width:100%;
box-sizing: border-box;
}
main{
float: left;
width: 85%;
padding-bottom: 100px;
}
.minha-foto {
position: absolute;
width: 300px;
top: 0px;
right:0px;
}
.barra-navegacao{
position: relative;
top: 300px;
width: 15%;
}CSS portfolio
.portfolio{
display: inline-block;
}
.portfolio li{
display: inline-block;
border: 1px dashed black;
background-color: #FAFFFC;
width: 35%;
box-sizing: border-box;
padding: 8px;
margin-top: 60px;
margin-right: 16px;
margin-left: 30px;
}
.portfolio img{
width: 50%;
}
.projetos{
font-size: 25px;
}
