Solucionado (ver solução)

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!

Solucionado
(ver solução)
10
respostas

Exercício: Ajustando nosso layout - Posicionamento mais a fundo

Estou tendo problema com a barra de navegação. Quando uso "float: right" nela, ela fica com a altura certa, mas a largura fica do tamanho da tela. O conteudo da barra de navegação fica posicionado corretamente. E o conteúdo da main fica sobre o fundo da barra de navegação. Já comparei com o projeto de exemplo e aparentemente esta igual.

Ah, e tbm fica com um espaço na imagem e na barra de navegação como se tivesse com margin. Mas ja verifiquei o reset e estava ok...

Será que podem me ajudar? Grato.

10 respostas

Filipe, Bom dia .

por gentileza , poste seu código e seu css para verificar melhor o que está acontecendo .

<!DOCTYPE html>

Sobre mim

Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de qualidade, durabilidade e que agregam valor para meus clientes.

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.

Como trabalho

João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas! José Souza, Fiat

Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. Não trabalho com escopo fechado: o cliente é que decide quando o produto está pronto.

Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.

Experiência

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. Manoel Santos, Petrobrás

Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. 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.

Também já fui contratado para transformar grandes portais, como Terra e G1, 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.

Comunidade

Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.

Foto de João da Silva

João da Silva

© João da Silva 2014

body { font-family: "Crimson Text", serif; background-color: #f2fffc; font-size: 120%; line-height: 1.5; }

.titulo-principal { font-size: 60px; text-align: center; color: #fff; background-color: #851944; padding: 25px; border-bottom: 10px solid #000; text-transform: uppercase; }

.nome-navegacao { font-size: 30px; margin-bottom: 25px; font-family: "Open Sans Condensed", sans-serif; }

.titulo-secundario { font-size: 30px; clear: both; }

.titulo-principal, .titulo-secundario { font-family: "Open Sans Condensed", sans-serif; }

.paragrafo { text-align: justify; padding: 20px 0; }

.texto { width: 720px; margin: auto; padding: 30px 0; }

main strong { font-weight: bold; }

main em { font-style: italic; }

.post { padding: 30px 0 30px 0; border-bottom: 1px solid #ccc; }

.centralizar-link { text-align: center; }

.leia-mais { background-color: #000; color: #f2fffc; font-size: 20px; padding: 10px 30px; margin: 5px 0; display: inline-block; }

cite { margin-top: 25px; display: block; }

.citacao { background-color: #d9e5e3; padding: 20px; border: 10px solid #c2ccca; width: 250px; box-sizing: border-box; padding: 40px 20px; }

.fiat { float: right; }

.petrobras { float: left; }

.navegacao { background-color: #3c1d3d; color: #f2fffc; text-align: center; box-sizing: border-box; clear: right; padding: 20px; }

.navegacao li { text-transform: lowercase; clear: right; }

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

.icones-sociais a { display: block; height: 40px; width: 40px; text-indent: -9999px; }

.icones-sociais .github { background-image: url(github.png); }

.icones-sociais .twitter { background-image: url(twitter.png); }

.icones-sociais .linkedin { background-image: url(linkedin.png); }

main a { color: #851944; }

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

}

.rodape { background-color: #000; color: #f2fffc; padding: 20px; clear: both; }

main { float: left; width: 80%; }

.navegacao .foto-joao { float: right; width: 20%; border-bottom: 10px solid black; }

<!DOCTYPE html>

Sobre mim

Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de qualidade, durabilidade e que agregam valor para meus clientes.

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.

Como trabalho

João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas! José Souza, Fiat

Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. Não trabalho com escopo fechado: o cliente é que decide quando o produto está pronto.

Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.

Experiência

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. Manoel Santos, Petrobrás

Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. 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.

Também já fui contratado para transformar grandes portais, como Terra e G1, 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.

Comunidade

Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.

Foto de João da Silva

João da Silva

© João da Silva 2014

Não consigo postar o código HTML

sem problemas ,

consigo analisar o código com o que postou . ja vou te responder

Filipe,

encontrei um pequeno erro no seu código de css , que está dando a diferença

no seu código css -> na citação em vez de colocar padding: 40px 20px , modifique para margin : 20px 40px;

.citacao { background-color: #d9e5e3; padding: 20px; border: 10px solid #c2ccca; width: 250px; box-sizing: border-box; margin: 40px 20px; }

você pode até deixar com 40px 20px , porém sua citação não ficará na mesma altura do texto .

faça essa mudança que dará certo seu código .

espero ter ajudado , bons estudos

Eu fiz esse ajuste que vc recomendou, mas não resolveu o problema... Será que teria como eu te enviar um print do que esta ocorrendo? Grato.

Filipe,

pode mandar sim , meu e-mail é celsotheodorojr@gmail.com

solução!

me mande seu código também , por gentileza

Enviei lá...