Como eu faria para deixar a foto do lado direito da página (onde está agora) e a barra de navegação do lado esquerdo preenchendo do Topo até a Base?
Ficaria algo como:
Barra de Navegação | Título (SOBRE MIM) | Foto João da Silva
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!
Solucionado
Como eu faria para deixar a foto do lado direito da página (onde está agora) e a barra de navegação do lado esquerdo preenchendo do Topo até a Base?
Ficaria algo como:
Barra de Navegação | Título (SOBRE MIM) | Foto João da Silva
``` use a propriedade float, ela é exatamente para isso.
uma dica:
Tente deixar cada elemento da página em uma div, deixando sua página numa hierárquia de divs pai e filhas. mesmo que dentro de uma mesma div existam mais 3 divs.
Tomei essa decisão e me ajudou muito na organização da estrutura em si, me ajudou a reduzir conflitos. Geralmente iniciantes como eu ainda sou, sofre com conflitos do tipo, coloco float e o objeto não obedece.
Aconteceu muito comigo, por eu não saber estabelecer o ponto de se definir altura e largura com pixels ou %, para manter uma fuidez. Eu assisti um americano fazendo desta maneira e adotei em meus projetos também, e até hoje tirou muita dor de cabeça minha.
E ae Roger, tranquilo? Cara, eu ja estou usando a propriedade float =/ O problema é que como eu tenho o float na tag main tbm, então n importa se eu boto right na foto e left na barra, ambas sempre vao pro mesmo lado. O que eu queria era deixar uma de cada lado da página, saca? Sendo que a barra preenchesse toda a lateral esquerda. Sobre as divs, poderia me dar um exemplo? eu sou totalmente novato com front-end e realmente é outro mundo pra mim isso aqui hahaha.
Vlw e muito obrigado pelo help.
e ai cara tudo bem?
O que posso dizer a respeito de dois elementos estarem "grudados" é que, você pode definir uma posição absoluta para o elemento que está do lado esquerdo da tela, o navegado faz a leitura da página do topo para baixo, da esquerda para direita, então se você definir a posição absoluta para esta div elas consequentemente vão se afastar, é possível até que o elemento com a posição absoluta fuja do container principal recebendo todos os resets feito no css, mas é uma solução, então eles soltas na página é mais facil de movimenta-la, lembrando que se fizer isso as posições terão que ser em % pra que tenha uma maior fluidez quando diminuir a janela do navegador.
Falando a respeito de alocar os objetos em divs, vou dar um exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="_view/index.css"/>
</head>
<body>
<p>Incluindo dois elementos na página uma imagem e um texto</p>
<!-- Coloque a imagem em uma div, e o texto em outra div, mesmo que os dois conteudos ja estejam em uma unica div não tem problema-->
<div id="container-exemplo">
<div id="image">
<img src="../exemplo/image.png">
</div>
<div id="text-main">
<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica.</p>
</div>
<div>
</body>
</html>vou dar um exemplo no css agora
*{
margin:0;
padding:0;
}
//definindo a div que segura as outras duas divs
//nesse momento você defini o espaço total, somando o //espaço da imagem que precisa e o espaço do texto que //precisa, espaço total esse que vai ocupar a tela do //navegador, lembrando em %
#container-exemplo{
width:80%;
height:400px;
}
//o container-exemplo apesar de ser definido ocupando 80% da tela, para as duas divs, no momento de definir a altura e a largura, continua sendo considerado 100% então essas duas divs você defini com 45%,
somando as 2 divs da 90%, sobrando 10%,
então você pode dar um margem-left de 10% na div que esta do lado direito deixando esse espaço de 10% entre as duas divs pra não ficar algo espremido.
#image{
width:45%;
height: //o tamanho que quiser respeitando o
//tamanho maximo definido no container pai
}
#texto-main{
width:45%;
height://o tamanho que quiser respeitando o tamanho
//máximo definido no container pai
margin-left: 10%;
float: right;//posicionando para o lado direito
}Sei que ficou extendido mas espero ter te ajudado, precisar to aê !!!
Roger, desculpe a demora em retornar, mas assim cara, tentei testar o que você indicou e não tenho certeza se seria isso mais ou menos:
o HTML:
<!DOCTYPE html>
<html>
<head>
<title>Biografia - João da Silva</title>
<meta charset="utf-8">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="site.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main>
<h1 class="titulo-principal">Sobre mim</h1>
<div class="container">
<p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>
<p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>
<h2 class="subtitulo-texto">Como trabalho</h2>
<blockquote class="citacao-bio fiat">
<p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
<cite>José Souza, Fiat</cite>
</blockquote>
<p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>
<p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>
<h2 class="subtitulo-texto">Experiência</h2>
<blockquote class="citacao-bio petrobras">
<p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
<cite>Manoel Santos, Petrobrás</cite>
</blockquote>
<p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="http://www.ibm.com.br">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>
<p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com">G1</a>, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>
<h2 class="subtitulo-texto">Comunidade</h2>
<p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei <a href="portfolio.html">diversas palestras</a> e mantenho um <a href="blog.html">blog</a>.</p>
</div>
</main>
<div>
<div>
<img src="eu.jpg" alt="Foto de João da Silva" class="minha-foto">
</div>
<div>
<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-redes-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://br.linkedin.com/pub/joão-da-silva/32/4/508">
LinkedIn
</a>
</li>
</ul>
</aside>
</div>
</div>
<footer class="rodape-pagina">
© João da Silva 2014
</footer>
</body>
</html>e o CSS:
body {
font-family: "Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
font-size: 120%;
line-height: 1.5;
}
h1, h2 {
font-family: "Open Sans Condensed", "Arial", sans-serif;
}
.titulo-principal {
text-align: center;
background-color: #851944;
color: #FFF;
padding: 25px;
border-bottom: 10px solid black;
font-size: 60px;
text-transform: uppercase;
}
p {
text-align: justify;
margin: 20px 0;
}
.citacao-bio {
background-color: #D9E5E3;
border: 10px solid #C2CCCA;
width: 250px;
box-sizing: border-box;
margin: 20px 40px;
}
.navegacao-site {
text-align: center;
background-color: #3C1D3D;
color: #F2FFFC;
}
.rodape-pagina {
background-color: #000;
color: #F2FFFC;
clear: both;
}
main a {
color: #851944;
}
.navegacao-site a {
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
}
.citacao-bio, .navegacao-site, .rodape-pagina {
padding: 20px;
}
.container {
width: 720px;
margin: auto;
padding: 30px 0;
}
.navegacao-site h1 {
font-size: 30px;
margin-bottom: 25px;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
.subtitulo-texto {
font-size: 30px;
clear: both;
}
.icones-redes-sociais li {
display: inline-block;
}
.artigo {
padding-bottom: 30px;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
.leia-mais {
padding: 8px;
margin: 16px;
display: block;
font-size: 24px;
text-align: center;
background-color: #E6E7E8;
}
nav a {
text-transform: lowercase;
}
.icones-redes-sociais a {
width: 40px;
height: 40px;
display: block;
text-indent: -99999px;
}
.github {
background-image: url(github.png);
}
.twitter {
background-image: url(twitter.png);
}
.linkedin {
background-image: url(linkedin.png);
}
.fiat {
float: right;
}
.petrobras {
float: left;
}
main {
float: left;
width: 85%;
}
.minha-foto, .navegacao-site {
width: 15%;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
.minha-foto {
float: left;
}
.navegacao-site{
float: left;
}
cite {
font-style: italic;
float: right;
}De qualquer forma, desse jeito também não funcionou minha ideia =/
vou te passar um link de um desenho pra voce entender o que eu quis dizer:
segue o link============
http://www.webmaster.pt/wp-content/uploads/2010/05/layout.jpg
esse link vai te enviar pra uma imagem de um site, olha a area com o titulo destaque que tem a imagem do lado esquerdo e o texto do lado direito, agora quando for olhar pra esse local imagine dois quadrados dentro daquela area destaque um com o texto dentro alinhado justificado, e no outro quadrado a imagem alinhada no centro, esses dois quadrados seriam as divs, dentro da div destaque que poderia ser um header.
Certo, saquei agora... Muito obrigado cara!
