Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Estou com dúvida no curso de Introdução a HTML e CSS, no exercício do capítulo Desafios finais.

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Desafios finais e atividade Conferindo o projeto final

por Armando Hilel
| 36.3k xp | 1 posts
Por ter mais linhas de texto a caixa ficou maior que as outras. Alguem teria uma solução simples para isto?
Link com imagem mostrando o problema: 
http://mccacai.com.br/ex1.png

Trecho do html

               <li>
                    <a href="http://www.ibm.com.br">
                        <figure>
                            <img  src="img/ibm.png" alt="Site da IBM">
                            <figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption>
                        </figure>
                    </a>
                </li>

CSS

.portfolio li{
    display: inline-block;
    border: 8px solid black;
    background-color: #FAFFFC;
    width: 45%;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 16px;
    margin-bottom: 16px;

}
.portfolio img {
    width: 100%;
}
5 respostas
solução!
por Luiz Fernando Oliveira Corte Real
| 44.9k xp | 72 posts
Instrutor

Olá, Armando

Esse problema não é simples de arrumar. Existem algumas técnicas para resolver isso e uma delas (o flexbox) é abordada no curso avançado de HTML e CSS, na continuação da trilha de Front-End. Recomendo que você faça esse curso também.

por Rogério de Sousa Andrade
| 535.7k xp | 65 posts
Assistente de Serviços de T.I

percebi que todas as vezes que eu adicionar mais um projeto no portifolio, terei que aumentar o codigo do portifolio.html, com ul,li entres outras tags teria uma forma de fazer isso via js dinamico

por Felipe Ferreira de Abreu
| 57.1k xp | 8 posts
Estagiário

Acho que você pode colocar uma altura fixa no li para que todos fiquem iguais. Por exemplo: .portfolio li{ display: inline-block; border: 8px solid black; background-color: #FAFFFC; width: 45%; box-sizing: border-box; padding: 16px; margin-right: 16px; margin-bottom: 16px; height: 100px; }

Pode ajustar o tamanho para que tudo se encaixe.

por Luiz Fernando Oliveira Corte Real
| 44.9k xp | 72 posts
Instrutor

Rogério, existe uma forma de fazer isso dinamicamente, sim, com JS ou outras linguagens. Podemos fazer isso no próprio navegador usando JS, mas o ideal é fazer usando alguma linguagem do lado do servidor, gerando o HTML a partir de uma base de dados com os projetos cadastrados. Os cursos das trilhas PHP, Java para Web, Ruby e Rails e C# e .NET tratam desse problema usando diversas tecnologias. Vale dar uma olhada!

Felipe, essa solução é válida, também! O problema é que, quando fixamos a altura de um elemento, o texto que vai dentro dele não pode passar dessa altura, ou quebramos o layout. O ideal é deixar a altura dos elementos sempre automática para evitar esse tipo de problema, e aí o flexbox, que comentei acima, permite dizer que queremos que essa altura automática seja igual para todos os elementos dentro de um determinado container.

por Lukasz Izai Torres Fokin
| 71.3k xp | 1 posts
Analista de Sistemas

Armando Hilel, Posso estar "falando" besteira... Mas acredito que utilizando min-height e max-height resolveria em partes seu problema.