Solucionado (ver solução)
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á...