Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Colocar display:inline-block não funcionou

Na solução CSS da página portfolio foi usado a função inline-block para deixar as caixas lado a lado, mas mesmo colocando o width de 45% elas não ficaram da maneira desejada e eu gostaria de saber o porquê. Na minha solução eu deixei as caixas como float e funcionou perfeitamente mas não sei se está correto.

Segue meu código CSS:

.projeto {
    width:45%;
    border:8px solid black;
    background-color:#FAFFFC;
    padding:16px;
    margin-right:16px;
    margin-bottom:16px;
    box-sizing:border-box;
    float:left;
}
.img-projeto {
    width:100%;
}
4 respostas

Olá Leonardo!

Poderia me passar o seu código inteiro (HTML e CSS) por favor?

Segue o código HTML e o "site.css".

<!DOCTYPE html>
<html>

    <head>
        <meta charset='UTF-8'>
        <title>Portifólio-João da Silva</title>
        <link rel='stylesheet' href='C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\css\reset_meyer.css'>
        <link rel='stylesheet' href='C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\css\site.css'>
        <link rel='stylesheet' href='C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\css\portifolio.css'>
        <link rel='icon' href='C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\img\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">
    </head>    

    <body>
        <main>
            <h1 class='titulo'>Portifólio</h1>
            <div class='conteudo'>

                <p>Veja abaixo a lista dos meus projetos relevantes:</p>

                <ul>
                    <li>
                        <figure class='projeto'>
                            <img class='img-projeto' src='img/bmw.png' alt='Trabalho na BMW'>
                            <figcaption><a href='http://bmw.com'>BMW.com: reformulação do design e implementação de HTML, CSS, JAVASCRIPT.</a></figcaption>
                        </figure>
                    </li>

                    <li>
                        <figure class='projeto'>
                            <img class='img-projeto' src='img/uol.png' alt='Trabalho na UOL'>
                            <figcaption><a href='http://uol.com.br'>UOL.com.br: reformulação do design e implementação de HTML, CSS, JAVASCRIPT.</a></figcaption>
                        </figure>
                    </li>

                    <li>
                        <figure class='projeto'>
                            <img class='img-projeto' src='img/ibm.png' alt='Trabalho na IBM'>
                            <figcaption><a href='http://ibm.com'>IBM.com: aplicação de progressive enhacement em conjunto com aplicação back-end.</a></figcaption>
                        </figure>
                    </li>

                    <li>
                        <figure class='projeto'>
                            <img class='img-projeto' src='img/g1.png' alt='Trabalho no G1'>
                            <figcaption><a href='http://g1.com.br'>G1.com.br: reformulação do design e implementação de HTML, CSS, JAVASCRIPT</a></figcaption>
                        </figure>
                    </li>

                </ul>

            </div>
        </main>

        <img class='foto' src='img/eu.jpg' alt='Foto de João da Silva'>

        <aside class='navegação'>
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href='index.html'>Home</a></li>
                    <li><a href='portifolio.html'>Portifólio</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>
        </aside>

        <footer id='rodape'>
            © João da Silva 2014
        </footer>
    </body>
</html>
body{
    font-family: 'Crimson Text', 'Times New Roman', serif;
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
}
main{
    float: left;
    width:85%;
    padding-bottom:80px;
}
.titulo {
    text-align: center;
    color: rgb(255,255,255);
    background-color: #851944;
    padding: 25px;
    border-bottom: 10px solid #000;
    font-size: 60px;
    text-transform:uppercase;
}
h1, h2 {
    font-family: 'Open Sans Condensed', 'Arial', sans-serif;
}
h2 {
    font-size: 30px;
    clear:both;
}
p{
    text-align: justify;
    margin:20px 0;
}
.navegação {
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
    float: right;
    box-sizing: border-box;
    border: 10px solid black;
    width: 15%;
    position:relative;
    top:300px;    
}
.foto {
    float: right;
    border-bottom:10px solid black;
    border-left:10px solid black;
    box-sizing:border-box;
    position:absolute;
    top:0;
    right:0;
}
.navegação a {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
}
.navegação h1 {
    font-size: 30px;
    margin-bottom:25px;
}
.icones-sociais li {
    display:inline-block;
}
.icones-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    font-size:0px;
}

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

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

.linkedin {
    background-image: url("../img/linkedin.png");
}
#rodape {
    color: #F2FFFC;
    background-color: rgb(0, 0, 0);
    padding:5px;
    clear:both;
    position:fixed;
    bottom:0;
    width:100%;
}

.navegação {
    padding: 20px;
}
nav a {
    color: #F2FFFC;
}

main a {
    color: #851944;
}
.conteudo {
    width: 720px;
    padding:30px 0;
    margin:auto;
}
em {
    font-style: italic;
}
strong {
    font-weight: bold;
}
cite {
    float:right;
    font-style: italic;
    display: block;
}

Olá Leonardo!

Primeiramente, desculpe a demora. Eu fiquei avaliando aqui o seu código com o do instrutor pra ver quais as diferenças. Notei alguns erros no seu código:

Você colocou navegação como nome de classe e o navegador não consegue interpretar acentuações e caracteres especiais.

Algumas classes não são chamadas no CSS e algumas classes estão faltando no HTML.

Uma coisa que não é um erro, é que na hora de colocar o caminho das imagens, CSS (e futuramente JavaScript), você não precisa colocar o caminho todo. Ex css/porfolio.css

Outra coisa também é usar nomes mais semânticos para as suas classes, que te ajudam a identificar problemas mais facilmente.

Confira esses erros e dicas e depois diga se ajudou!

Olá Matheus, tranquilo com demora. Arrumei a classe navegação igual você disse retirando os caracteres especiais. Em relação as classes que estão no portfolio.htlm, ou elas estão na pasta site.css ou no portfolio.css, em que as que fazem parte apenas do portfolio.html estão no portfolio.css e as que fazem parte das outras páginas também estão no site.css. Já as classes que você viu no css mas não viu no html é porque elas fazem parte das pastas bio.html e blog.html que eu não coloquei aqui. Em relação as outras dicas eu vou modificar o código para torna-lo mais semântico. Porém ao colocar display:inline-block as caixas que ficam os projetos relevantes não ficam uma ao lado da outra de duas em duas como era de se esperar, mesmo com essas modificações. Na minha solução eu deixei as caixas comofloat e funcionou perfeitamente mas não sei se está correto.

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