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

não consigo ajustar o layout

eu fiz os exercícios de acordo com o que e pedido está estranho, não consigo mudar o layout

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;}


main h1 {
    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;
    font-family: "Crimson Text"
margin:20px;
}
blockquote {
    background-color: #D9E5E3;
padding:20px;
border: 10px solid #C2CCCA;
width:198PX;
box-sizing:border-box;
margin:20px 40px;
}



aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
}

footer {
    background-color: #000;
    color: #F2FFFC;
}

nav a {
    color: #F2FFFC;

    text-transform: lowercase}
main a {
    color: #851944;
}
.icones-redes-sociais a {
    width: 40px;
    height: 40px;
    display: inline-block;
    text-indent: -99999px;
}

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

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

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


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



blockquote, aside, footer {
    padding: 20px;}

main div {
    width: 720px;
    margin: auto;
padding:30px 0;
}
aside h1 {
    font-size: 30px;
    margin-bottom: 25px;
}
strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

h2 {
    font-size: 30px;
}
 aside li{
    display: block;
}
 .icone-rede-social li   {
    display:inline-block;
}
.leia-mais {
    padding: 8px;
    margin: 16px;
    display: block;
    font-size: 24px;
    text-align: center;
    background-color: #E6E7E8;
}
.fiat{
    float:right;
}
.petrobras{
    float:left;
}

cite {
    font-style: italic;
    float: right;
}
.subtitulo-texto {
    clear: both;
}
main {
    width: 85%;
}

.minha-foto, .navegacao-site {
    float: right;
    width: 15%;
    box-sizing: border-box;
    border-left: 10px solid black;
    border-bottom: 10px solid black;
}

esse e o css

7 respostas

Oi Edmundo tudo bem?

Eu abri o arquivo baixado da aula e com ajuda do recurso inspecionar do navegador (F12) eu obtive o CSS esperado encima do aside.

O CSS esperado encima do aside é este abaixo, dá uma comparada com seu css e veja o que falta:

.minha-foto, .navegacao-site {

    float: right;
    width: 15%;
    box-sizing: border-box;
    border-left: 10px solid black;
    border-bottom: 10px solid black;

}
.citacao-bio, .navegacao-site, .rodape-pagina {

    padding: 20px;

}
.navegacao-site {

    text-align: center;
    background-color: #3C1D3D;
    color: #F2FFFC;

}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

    display: block;

}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

    margin: 0;
    padding: 0;
    border: 0;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: 0px;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: 0px;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

}

Espero ter ajudado!!!

olha eu comparei e do arquivo minha foto para baixo não tinha isso eu coloquei e não adianta nada fica piorada e o layout não muda.

Ok, de fato não adiantou.

Esse css que mandou é o site.css né, vou precisar ver seu html do bio.html e o reset.css .

aqui está a bio.

<!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>
        <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade, 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= "fiat">
            <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas! -- <cite>José Souza, Fiat</cite></p>
            </blockquote>
<p> João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>


        <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= "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. --<cite>Manoel Santos, Petrobrás</cite></p>
            </blockquote>
<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>


        <p>Já desenvolvi projetos para grandes empresas como <a href = "http://www.bmw.com">BMW</a>a, <a href = "http://www.uol.com.br">UOL</a> e <a href = "http://www.IBM.com">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://wwwg1.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>
        <img src="eu.jpg" alt="Foto de João da Silva">
            </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="icone-rede-social">
        <li>
        <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>
        <footer class="rodape-pagina">
        &copy; João da silva 2014
      </footer>
        </main>
    </body>
    </html>

html

e aqui o reset

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
solução!

Então encontrei vários errinhos de digitação e teve alguns que não consegui encontrar.

Dá uma comparada do seu bio.html e site.css com o do arquivo do professor e vai arrumando.

Por exemplo

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

está com uma chave fechando o bloco do body logo após o background-color.

não achei a classe navegacao-site no css

no html das citações falta colocar a classe citacao-bio

O notepad++ possui um plugin para comparar dois arquivos mostrando a diferença linha a linha, seria interessante instalar ele para analisar melhor. Estou em um notebook Linux e infelizmente não tem o notepad++.

Mas compara visualmente os dois arquivos ( o seu e o do professor) com a janela lado a lado ou com o notepad++ para ver onde estão os erros.

Obrigado pela ajuda mais uma vez.