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