1
resposta

Barra de navegação não vai para o topo.

Boa noite, eu fiz o código baseado nos exercicios, mas me perdi e não tenho ideia do que fiz errado. Poderiam me ajudar?

h1{
    font-size: 60px;
    background-color: #851944;
    color:#FFF;
    text-align: center;
    font-family:"Open Sans Condensed","Arial", sans-serif;
    padding:25px;
    margin: 0px;
    border: solid 10px;
    border-bottom: 10px solid black;
    text-transform: uppercase;
}

figure{
    background-color: #FAFFFC;
    border: 8px solid black;
    margin: 16px;
    padding: 16px;
    box-sizing: border-box;
    display: inline-block;
}

.uol, .bmw{
    float: left;
}

.g1, .ibm{
    float: right;
}


.foto, .navegacao-site {
    float: right;
    box-sizing: border-box;
    border-left: 10px solid black;
    border-bottom: 10px solid black;

}

.foto {
    width: 250px;
    position: absolute;
    top: 0;
    right: 0;
}

.navegacao-site {
    width: 15%;
    position: relative;
    top: 220px;
   }

.icones-sociais li{
    display: inline-block;
}

footer {   
    background-color: black;
    color: #F2FFFC;
    padding: 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
    }

.clearfix {
    clear: both;
}

aside {  
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
    padding: 20px;
    font-family: "Open Sans Condensed", sans-serif;

    }

aside a {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
}

.github {
    background-image: url(../img/github.png);
}

.twitter {
    background-image: url(../img/twitter.png);
}

.linkedin {
    background-image: url(../img/linkedin.png);
}

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
    <title> Portifólio </title>
    <link rel="stylesheet" href="css/portifolio.css">
    <!-- carrega a fonte Crimson Text nas versões normal, itálico e negrito -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <!-- carrega a fonte Open Sans Condensed na versão negrito, -->
    <!-- que é a única necessária para os cabeçalhos            -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>

<body>
    <main>
        <h1> Portifólio</h1>
        <figure class="uol">
            <img src="img/uol.png" alt="página UOL">
            <figcaption>Página da UOL desenvolvida em HTML por Joao</figcaption>
        </figure>

        <figure class="g1">
            <img src="img/g1.png" alt="página G1">
            <figcaption>Página da G1 desenvolvida em HTML por Joao</figcaption>
        </figure>

        <figure class="bmw">
            <img src="img/bmw.png" alt="Página da BMW">
            <figcaption>Página da BMW desenvolvida em HTML  por  Joao</figcaption>
        </figure>

        <figure class="ibm">
            <img src="img/ibm.png" alt="Página da IBM">
            <figcaption>Página da IBM desenvolvida em HTML por Joao</figcaption>
        </figure>

         <img class="foto" src="img/eu.jpg" alt="Foto de João da Silva">

        <aside class="navegacao-site">
               <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>

                <ul class="icones-sociais">
                    <li> <a class="github" href="http://github.com/joaodasilva"> Github </a></li> 
                    <li> <a class="twitter" href="https://twitter.com/joaodasilva"> Twitter </a></li> 
                    <li> <a class="linkedin" href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508"> Linkedin </a></li>
               </ul>

        </aside>

        <footer class="clearfix"> 
            &copy; João da Silva 2014        
        </footer>

    </main>

</body>

</html>
1 resposta

Você tem que deixar a navegação como a foto, na foto você fez isso:

.foto {
    width: 250px;
    ///AQUI  
    position: absolute;
    top: 0;
    right: 0;
}

.navegacao-site {
    width: 15%;
   // SUA NAVEGAÇÃO DEVE ESTAR DO MESMO JEITO SÒ MUDA O TOP E O WIDTH
    position: absolute;
    right: 0;
    top: 220px;
   }

espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software