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

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

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 Instrutor
| 1137k xp | 1471 posts
Instrutor

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 Instrutor
| 1137k xp | 1471 posts
Instrutor

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

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

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

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

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

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA