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

Dúvida: display inline-block

To com uma dúvida... agradeço quem puder ajudar! Do jeito que está meu HTML/CSS so consigo ajustar os icones sociais usando

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

ao inves de

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

Por que o promeiro seletor nao funciona? Segue meu codigo... HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>João da Silva - Biografia</title>
    <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>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>, <em>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 <strong>acessibilidade, responsividade e web semântica</strong>, sem descuidar da qualidade de código.</p>
            <h2>Como trabalho</h2>
            <blockquote>
                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                <cite>José Souza, Fiat</cite>
            </blockquote>
            <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>Experiência</h2>
            <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>
                <cite>Manoel Santos, Petrobrás</cite>
            </blockquote>
            <p>Já desenvolvi projetos para grandes empresas como <a href="http://bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="http://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 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.</p>
            <h2>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>
        </div>
    </main>
    <img src="eu.jpg" alt="Minha foto">
    <aside class="navegacao">
        <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="icones-sociais">
            <li><a href="http://www.github.com/joaodasilva" class="github"> Github </a></li>
            <li><a href="http://www.linkedin.com/joaodasilva" class="linkedin"> Linkedin </a></li>
            <li><a href="http://www.twitter.com/joaodasilva" class="twitter"> Twitter </a></li>

        </ul>
    </aside>
    <footer>
        &copy; João da Silva 2014
    </footer>
</body>
</html>

CSS


a{
    text-decoration: none   
}

strong{
    font-weight: 500   
}

em{
    font-style: italic   
}

body{
    font-family: "Crimson Text, serif;
    background-color: #F2FFFC; 
    line-height: 30px
}

h1,h2 {
    font-family: "Open Sans Condensed", sans-serif;

}

main div {
    width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 0 30px 0;
}

main h1 {
    text-align: center;
    font-size: 60px;
    color: #FFFFFF;
    background-color: #851944;
    padding: 25px;
    border-bottom: 10px solid #000000;
    text-transform: uppercase;
}

main h2{
    font-size: 30px;
}

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

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

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

}


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

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

.navegacao {
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 20px;
    width: 250px;
    text-transform: lowercase;
}
.github{
    background-image: url(github.png);
    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
}
.linkedin{
    background-image: url(linkedin.png);
    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
}
.twitter{
    background-image: url(twitter.png);
    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
}

aside h1{
    font-size: 30px;
    padding-bottom: 25px;
}


footer{
    background-color: #000000;
    color: #F2FFFC;
    padding: 20px;
    height: 15px;
    width: 400px;
}
.rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
}
article{
    padding-bottom: 30px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

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

Use assim:

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

Fernando, assim as imagens sumiram... e continuam um em cada linha

Acho que é mais facil alguem postar os codigos certinhos e eu achar o erro comparando! Alguem poderia postar?

Acho q sei qual era o problema... tinha colocado a classe github (e as outras) na tag . Se colocar no

  • os seletores funcionam de boa
  • Mas fazendo isso nao consigo clicar nos links!!! Desisto!

    solução!

    Oi, Edesiomorais

    A solução é colocar o display inline-block nos li mesmo. Os links já têm esse display por causa das classes que você colocou em cada um deles. Só precisa colocar nos li também para que eles tenham o tamanho correto.

    Deu para entender?

    Sim! Aproveitando... vc utiliza alguma outra ferramenta pra examinar melhor seus CSS fora o depurador do chrome/ff? Mais uma vez obrigado, Luiz.

    :)

    Não, Edesiomorais, uso só o depurador do navegador, mesmo. Acho esse tipo de ferramenta bem completo, já.