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!
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!
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:
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