Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

15
respostas

Sobre uma aula mau explicada

No curso que estou fazendo de engenheiro front end, a aula um pouco de posicionamento, tem no começo uma página, que ele n explica na aula anterior, e eu estou querendo aprender como faz para aquela página ficar igual a q ele mostra no vídeo!

15 respostas

Fala aí Geovane, tudo bem? Poderia me dizer certinho qual é a dúvida/problema? Qual a diferença da página? O que você quer aprender a fazer que não foi mostrado?

Manda seu email q eu mando o print screan do q eu quero aprender

Pode postar diretamente aqui, primeiro você pega o print e sobe em algum hospedador de imagens, recomendo o Cloudinary:

https://cloudinary.com/

Depois, você pega o link da imagem e no editor, use a seguinte sintaxe:

![Nome_da_imagem](Link_da_imagem)

Mas, se preferir mandar no meu email, pode mandar:

matheus.castiglioni@caelum.com.br

Fico no aguardo.

Enviei no e-mail!

Estou esperando a explicação!

Bom, vamos lá, desculpe a demora, geralmente minha passado pelo fórum ocorre todos os dias no período da noite.

Eu não sei como está seus códigos e resultado até o momento, então irei tentar explicar como atingir o resultado esperado.

O que você precisa fazer para chegar no layout conforme o email, seria:

O primeiro passo será definir a tag aside, no caso o seu .navegacao-site com position: relative e flutuá-lo á esquerda:

aside {
    background-color: #3C1D3D; /* definir a cor de fundo */
    clear: right; /* limpar todos os itens flutuados a direita com float: right */
    color: #F2FFFC; /* definir cor do texto */
    text-align: center; /* centralizar conteúdo ao centro */
    top: 310px; /* definir a posição do topo, no caso deve estar 310px em relação a altura do navegador */

}

.navegacao-site {
    border-bottom: 10px solid black; /* definir borda abaixo do elemento */
    border-left: 10px solid black; /* definir borda esquerda do elemento */
    box-sizing: border-box; /* dizer para o navegador levar em consideração as dimensões (altura e largura) no cálculo do elemento*/
    float: right; /* flutuar elemento a direita */
    position:relative; /* se posicionar de forma relativa aos demais */
    width: 15%; /* possuir largura mediante a 15% de px total da tela */
}

Com isso, você já vai conseguir quase atingir o resultado, seu HTML:

<aside class="navegacao-site">
    <nav> 
        <h1>João da Silva</h1>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="Portafolio.html">Portafolio</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-redes-sociais">
        <li><a class="github" href="http://github.com/git-joaodasilva">Github</a></li>
        <li><a class="twitter" href="http://twitter.com/twitter-joaodasilva">Twitter</a></li>
        <li><a class="linkedin" href="http://br.linkedin.com/pub/linkedin-joão-da-silva/32/4/508">LinkedIn</a></li>
    </ul>
</aside>

Mas, ainda vai ser preciso alguns ajustes para deixar os ícones a direita um do outro:

nav a {
    color: #F2FFFC; /* definir a cor dos textos do menu */
    font-family: "Open sans condensed"; /* definir qual fonte será utilizada no menu */
    text-transform: lowercase; /* deixar todos os textos do meno minúsculo */
}

.icones-redes-sociais li {
    display: inline-block; /* alinhar icones a direita (em linha) */
}

.icones-redes-sociais a {
    display: inline-block; /* alinhar icones a direita */
    font-size: 0; /* esconder os textos dos icones */
    height: 40px; /* definir altura dos icones */
    width: 40px; /* definir largura dos icones */
}

.github {
    background-image: url(github.png); /* definir icone do github*/
}

.twitter {
    background-image: url(twitter.png); /* definir icone do twitter*/
}

.linkedin {
    background-image: url(linkedin.png); /* definir icone do linkedin*/
}

Com isso, já deve estar parte do esperado.

Caso ainda tenha algum problema, poste o código do seu CSS e HTML, assim que consigo simular o jeito atual e verificar o que pode estar errado ou diferente.

Obs: Expliquei cada medida do CSS e porque do seu uso.

Espero ter ajudado, novamente desculpa a demora e problemas.

Bom obg depois eu vou ver se deu certo, n que isso, é porque eu estou gostando muito do curso e estava dependendo da explicação para continua-lo, mais n tem problema, depois vou ver se deu certo obg!

é para ficar do jeito q eu mandei no seu email?

mateus pra falar a verdade eu n estou entendendo nd!

Bom dia Geovane, tudo bem? Vou te mandar um email para marcarmos uma call, o que acha?

Abraços

pode ue!

Mateus eu preciso dos pré requisitos litados no começo do cusso para prosseguir com o mesmo?

porque eu n fiz eles !

Bom, te mandei meu telegram e gmail, me chama para a gente bater um papo, fica melhor para resolver esses problemas.

mandei la