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

Problemas no Css.

<!DOCTYPE html>
<html>
    <meta charset="utf-8"/> 
    <head>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" type="text/css" href ="bio.css"/>
    <link rel="icon" href="favicon.png">
    <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">
    <title> Biografia-João da Silva</title>
    </head>
 <body>
  <main>
   <h1>sobre mim</h1>
   <div>
    <p> Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em
    durabilidade e que agregam valor para meus clientes.</p>
    <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript),<a href="#"> leia mais</a>
    Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

   <h2>Como trabalho</h2>
    <blockquote class="Fiat">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>
    </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="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://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>Comunidade</h2>
     <blockquote class="petrobras">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
    </cite>
    </blockquote>
    <p>Procuro repassar meu conhecimento para a comunidade. Para isso, <a href="portfolio.html">já dei diversas palestras e mantenho um blog.</a></p>   
   </div>
  </main>
   <img src=eu.jpg alt="Foto de João da silva">
   <aside>
    <div>
     <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>
      <ul class="icones-sociais">
    <li>
        <a href="https://github.com/joaodasilva" class="github">
            Github
        </a>
    </li>
    <li>
        <a href="https://twitter.com/joaodasilva" class="twitter">
            Twitter
        </a>
    </li>
    <li>
        <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin">
            LinkedIn
        </a>
    </li>
</ul>
     </nav>
    </div>
   </aside>
   <footer>
    &copy; João da Silva
   </footer>
 </body> 
 </body>
</html>

Css:
body{
    font-family:"Crimson Text", serif;
    background-color:#F2FFFC;
    line-height: 1.5;
    margin:0;

    }
h1,h2{
     font-family: "Open Sans Condensed","Arial", sans-serif;
    } 
main div{
width:720px;
margin:auto;
padding: 30px 0
}
main h1{
    text-align:center;
    background-color:#851944;
    color:#FFF;
    padding:25px;
    border-bottom:10px solid black;
    font-size: 60px;
    margin:0;
    text-transform:uppercase;
   }    
main a{
    text-decoration:none;
}

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

blockquote{
background-color:#d9e5e3;
padding:10px;
margin:0;
border:10px solid #C2CCCA;
box-sizing:border-box;
width:250px;
}



aside{
background-color:#3C1D3D;
color:#F2FFFC;

}

footer{
background-color:#000000;
color:#F2FFFC;
padding:20px;
}
a link{
background-color:inherit;
}
aside  a {
  color: inherit;
  font-family: "Open Sans Condensed", sans-serif;
  padding:20px;
  text-transform:lowercase;
}
aside {
text-align:center;
}

aside h1 {
    font-size: 30px;
    margin-bottom: 25px;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}

.icones-sociais li{
display:inline-block;
}
.icones-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);
}

Estou com problemas no css, pois imagens, do Github,Twitter e linkedin estão repedindo 2 vezes em cima e me baixo.
2 respostas

Rodrigo, no seletor asside a, troca o padding para 0px; Tenho a impressão que com o padding o browser tenta preencher o espaço com a imagem. Se você colocar 0, não haverá espaço e a imagem não se replica.

Veja no inspetor, vai jogando e você verá que conforme aumenta este padding, a imagem começa a se repetir.

aside  a {
  color: inherit;
  font-family: "Open Sans Condensed", sans-serif;
  padding:0px;
  text-transform:lowercase;
}
solução!

muito obrigado, deu certo.