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

IMAGEM BENEFICIOS AO LADO DOS ITENS

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS

por NETO
| 143.4k xp | 145 posts

Pessoal, a minha imagem e a lista de benefícios não fica um lado do outro. 

.beneficios {
    display: block;
    padding: 25px;
}

.conteudo-beneficios {
    width: 640px; 
    margin: 0 auto;
}

.lista-beneficios {
   width: 40%;
   display: inline-block;
}

.imagem-beneficios {
    width: 30%;
}

.itens {
    line-height: 2.5;
    font-weight: bold;
}
    <section class="beneficios">
            <h3 class="titulo-principal">Benefícios</h3>
                <div class="conteudo-beneficios">
                    <ul class="lista-beneficios">
                        <li class="itens">Atendimento ao Cliente</li>
                        <li class="itens">Espaço diferenciado</li>
                        <li class="itens">Localização</li>
                        <li class="itens">Profissionais Qualificados</li>
                        <li class="itens">Limpeza</li>
                    </ul>
                </div>
                <img class="imagem-beneficios" src="beneficios.jpg" alt="Beneficios da Barbearia">
        </section>
11 respostas
por Felipe Moreno Borges
| 1130.9k xp | 1471 posts
Instrutor Desenvolvedor Android/iOS

Neto, boa tarde!

.conteudo-beneficios está ocupando todo o espaço disponivel, altere o display dele para inline, e retire seu width para que ele ocupe só o necessário, a imagem subirá automaticamente.

Espero ter ajudado e bons estudos!

por NETO
| 143.4k xp | 145 posts

Felipe, Obrigado Mais uma dúvida, agora para movimentar os elementos na posição correta posso utilizar o margin ?

por Felipe Moreno Borges
| 1130.9k xp | 1471 posts
Instrutor Desenvolvedor Android/iOS

Pode usar um margin-right no .conteudo-beneficios

por NETO
| 143.4k xp | 145 posts

Felipe, não entendi de como movimentar a lista para a direita e superior para ficar alinhado com a imagem.

http://prntscr.com/qehrlf

beneficios {
    display: block;
    padding: 25px;
}

.conteudo-beneficios {
    display: inline;
    padding: 170px;
}

.lista-beneficios {
    display: inline-block;
    vertical-align: center;
}

.imagem-beneficios {
    width: 35%;
}

.itens {
    line-height: 2.5;
    font-weight: bold;
}
por André Ferraz de Almeida
| 384.9k xp | 200 posts
Front-end Pleno

Boa tarde Neto, beleza? Então eu dei uma olhada no seu código e no que você deu de descrição na pergunta e eu alinhei o texto com uma imagem +- como você falou. Vê se é isto: https://imgur.com/a/zdktJB8

Você quer deixar igual ao link que você mandou ou quer mudar a posição do texto com a imagem e alinhá-los na mesma linha?

Abraços

por NETO
| 143.4k xp | 145 posts

André, boa noite!É isso mesmo como na imagem que me mandou. Só consigo deixar alinhado se eu diminuir a imagem, e mesmo assim a imagem fica muito pequena.

por André Ferraz de Almeida
| 384.9k xp | 200 posts
Front-end Pleno

Então amigo, eu estou utilizando o comando position para ajustar as imagens no site! Como vc criou já criou uma div para a classe .conteudo-beneficios experimenta aumentar o tamanho da largura e da altura desta div e posicioná-la com o position: absolute (o que usei foi isto): 

.conteudo-beneficios {
       display: inline-block; 
       position: absolute;
       width: 700px;
       height: 200px;
       top: 250px;
}

O position: absolute fará com que sua div se movimente em relação a sua herança-pai (que no caso é o próprio <body>)

Depois, zere a margem da class="lista-benefinicios" para não ter nenhuma informação do navegador, e ajuste a imagem usando o mesmo comando position: absolute como foi ajustado a classe .conteudo-beneficios :D 

.imagem-beneficios {
    width: 35%;
    /** use o comando position aqui **/
    /** tente posicionar como achar melhor e dps manda aqui :D **/
}

A Alura aconselha não dar a resposta de cara, mas se tiver qualquer dúvida pode me perguntar que posso te auxiliar no que eu puder

por NETO
| 143.4k xp | 145 posts

André, boa noiteEu fiz dessa forma. Está errado ou é válido?

http://prntscr.com/qeyh7h

.beneficios {
    display: block;
    padding: 25px;
}

.conteudo-beneficios {
    width: 640px; 
    margin: 15px 280px;
}

.lista-beneficios {
   width: 40%;
   display: inline-block;
}

.imagem-beneficios {
    width: 60%;
}

.itens {
    font-weight: bold;
    margin-top: 40px;
}
solução!
por André Ferraz de Almeida
| 384.9k xp | 200 posts
Front-end Pleno

Fala Neto, beleza? Está perfeito! A imagem que vc usou tem um tamanho específico para o que você quer então só corrigindo a margem já ficou show de bola, parabéns :)

Vc pode usar também o position: absolute ou relative sempre que precisar dimensionar e reposicionar! Só é indicado usá-los dentro de uma div pois fica mais fácil mover os conteúdos em relação a uma própria div do que do navegador inteiro.

Espero ter ajudado! Feliz Natal pra ti!

por NETO
| 143.4k xp | 145 posts

André, tudo beleza....Muito obrigado pelas dicas.Feliz Natal pra você e sua família

por André Ferraz de Almeida
| 384.9k xp | 200 posts
Front-end Pleno

Que isso, no que eu puder ajudar só postar a dúvida que eu responderei :D

Feliz Natal pra ti e tua família também! Boas festas

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