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

Outra solução?

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Desafios finais e atividade Desenvolvendo a página de portfolio

por Jonas Agnezi
| 99k xp | 15 posts
Desenvolvedor Front-End Pleno 
<main>
            <h1 class="titulo-principal">Portfolio</h1>
            <div class="container-portfolio">
                <p>Veja abaixo a lista dos meus projetos mais relevenates</p>
            <figure class="cards card1">
                <img src="img/bmw.png" alt="layout do site da BMW">
                <figcaption>
                    <a href="#">bmw.com: reformulação de design e implementação de <abbr title="HyperText Markup Language">HTML</abbr>,<abbr title="Cascading Style Sheets">css</abbr> e JavaScript</a>
                </figcaption>
            </figure>
            <figure class="cards card2">
                <img src="img/uol.png" alt="layour do site da UOL">
                <figcaption>
                    <a href="#">UOL.com.br: reformulação de design e implementação de <abbr title="HyperText Markup Language">HTML</abbr>,<abbr title="Cascading Style Sheets">css</abbr> e JavaScript</a>
                </figcaption>
            </figure>
            <figure class="cards card3">
                <img src="img/ibm.png" alt="layour do site da IBM">
                <figcaption>
                    <a href="#">IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</a>
                </figcaption>
            </figure>
            <figure class="cards card4">
                <img src="img/g1.png" alt="layour do site da G1">
                <figcaption>
                    <a href="#">G1.com.br: reformulação de design e implementação de <abbr title="HyperText Markup Language">HTML</abbr>,<abbr title="Cascading Style Sheets">css</abbr> e JavaScript</a>
                </figcaption>
            </figure>
            </div>
        </main>

E o arquivo portfolio.css

.container-portfolio{
    width: 782px;
    margin: auto;
}
.cards {
    border: solid 8px black;
    background-color: #FAFFFC;
    padding: 16px;
    margin: 16px;
    width: 311px;
}

.card1 {
    float: left;
}

.card2 {
    float: right;
}

.card3 {
    float: left;
}

.card4{
    float: right;
}
4 respostas
solução!
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Jonas,

Isso que você fez é bem bacana, tentar outros modos de se chegar no mesmo objetivo, isso é validar conhecimento!

Com relação a opção de ir colocando float, lembre-se que ele pode ser perigoso uma vez que interfere no fluxo do documento, permitindo elementos subirem e ficarem em volta desses. Você teria que aplicar uma técnica como clearfix muito provavelmente.

Outro problema é se tivesse 17 cards, muito trabalho ter que ficar criando seletores pra cada um. Algo a fim de facilitar seria juntar esses seletores, algo assim:

.card1,
.card3,
.card5 {
  float: left
}

Porém perceba o trabalho!

Outra coisa que poderia ser feito é usar um .card:nth-of-type(2n), mas acho que já estou entrando em um loop aqui.

Enfim, colocar o inline-block soluciona com eficiência essas issues, mas é interessante sempre ir tentando fazer de outras formas a fim de praticar.

Espero ter ajudado e keep studying,

Abcs!

por Jonas Agnezi
| 99k xp | 15 posts
Desenvolvedor Front-End Pleno

ao invés de usar os floats então, seria interessante eu criar uma lista ? também é interessante fazer tudo isso com position-absolute ? O que é mais semântico ?? Essa minha alternativa está semântica também ?

por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Jonas,

Voce poderia, já que semanticamente é uma lista de cards tambem, mas nao precisa ficar focado somente nisso pois daqui a pouco iriamos fazer de todo elemento uma lista, ja que ele é um item de informacao na tela.

Qual o problema de usar position absolute em varios itens? Voce sabe exatamente quais coordenadas precisaria colocar neles a fim de deixa-los da forma que está no layout? Com inline-block fica mais fácil pois o browser vai calcular tudo e voce nao precisa setar positions acima desses elementos.

"Semântica" é mais relacionado ao significado que você está tentando por no seu codigo. Uma caixinha no meio do site tem função de botão, então em vez de usar uma genérica <div> mais semântico usar o elemento <button>.

Agora qual é a melhor propriedade CSS? Nenhuma, tudo depende do que você precisa fazer! As vezes o float casa melhor numa situação, as vezes o inline-block, etc. Todas estrategias tem suas particularidades, com vantagens e desvantagens. Prova disso é que existem umas 10 técnicas para fazer image replacement, assunto esse que você vai ver em algumas aulas.

Comentei no post acima sobre o seu código, ok?

Espero ter ajudado e bons estudos,

Abcs!

por Jonas Agnezi
| 99k xp | 15 posts
Desenvolvedor Front-End Pleno

Obrigado pela ajuda !