Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Capitulo 10, o resultado com o css não fica parecido com o da aula

Olá, fiz o css conforme segue o video, porém não fica igual, parece que meu aside, tem um tamanho muito grande.

body{ font-family: "Crimson Text"; background-color: #F2FFFC; font-size: 20px; line-height: 1.5;

}

main h1{ font-size: 60px; font-family: "Open Sans Condensed"; text-align: center; color:#F2FFFC; background-color: #851944; border-bottom: 10px solid #000; padding: 20px; margin: 0px; text-transform: uppercase;

}

main a{ color: # 851944; font-family: "Open Sans Condensed"; }

h2{ font-family: "Open Sans Condensed"; clear: both; }

p{ text-align: justify; margin: 20px 0;

}

blockquote{ background-color: #D9E5E3; padding: 16px; border: 10px solid #C2CCCA; width: 250px; margin: 20px 40px; box-sizing: border-box;

}

.rodape-pagina{ background: #000000; color: #3C1D3D; padding: 20px; }

aside{ background-color: #3C1D3D; color: #F2FFFC; text-align:center; font-size: 30px; margin-bottom: 25px; text-transform: lowercase; text-indent: -600px;

}

.rede-github{ Github

}

aside a{ color: inherit;

}

blockquote, aside, footer { padding: 20px; } main h1 { padding: 25px; font-size: 60px;

}

div{ padding: inherit; width: 720px; margin-left: auto; margin-right: auto; }

main div{ padding: 30px; }

strong{ font-weight: bold; }

em{ font-style: italic; } .icones-sociais li{

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

}

.github{ background-image: url(github.png); } .twitter{ background-image: url(twitter.png); } .linkedin{ background-image: url(linkedin.png); }

article{ padding-bottom: 30px; border: 1px solid #ccc; margin-bottom: 20px;

}

.leia-mais{ padding: 8px; margin: 16px; display: block; font-size: 24px; text-align: center; background-color: #E6E7E8; }

.fiat{ float: right; }

.petrobras { float: left; }

aside, img{ float: right; width: 15%; } aside{ clear: right; box-sizing: border-box; }

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

footer{ clear: both; }

9 respostas
solução!

Ele está grande porque você está usando uma fonte de 30px no aside

aside{ background-color: #3C1D3D; color: #F2FFFC; text-align:center; font-size: 30px; margin-bottom: 25px; text-transform: lowercase; text-indent: -600px;}

Altere o valor para 20px que já melhora essa problema de altura do aside. Outra coisa, o campo text-indent: -600px; não é necessário e ele, além de esconder o menu, possui um valor muito baixo.

JOrge, você está numa parte crucial de webdesign se não houver o entendimento do que está aplicando refaça as aulas, não tenha pressa pois lá na frente isto pode pesar. Eu já passei por isso, muitas coisas eu acabava criando códigos imensos para situações simples pois não havia compreendido determinadas coisas.Fica ai a dica Bons estudos

Outra dica, Jorge: todo exercício tem um gabarito, mostrando o código esperado para aquela solução. Sempre dê uma conferida para garantir que você entendeu os conceitos daquele exercício e para ver se há diferenças entre o seu código e o gabarito.

Acredito que o problema seja a fonte do aside, que está grande.

Oi, Jorge. Você ainda tem dúvidas nesse exercício? Se as respostas resolveram seus problemas, marque uma delas como solução da sua dúvida. Caso contrário, não deixe de resolvê-las! Estamos aqui pra isso :)

Abraço

Olá amigo Jorge, bem podemos observar em seu código que o body está com font-size 20px, e seu aside está com 30px, por isso seu site parece grande remova estes font-size e teste novamente, Qualquer dúvida favor não hesite em perguntar.

Abraços

Acredito também ser o tamanho do font-size no .aside{}! Pessoal observou bem!

Luiz Fernando. Também estou com problema. Meu layout depois do cap 10 esta todo bagunçado. Tem como você upar o codigo final do site em algum lugar? Assim eu posso enxergar melhor onde eu errei.

Eu cheguei a copiar seu css. A técnica do image replace usando text-indent não foi usada corretamente. Vc Pode usar também a técnica de colocar font-size: 0px

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software