Entrar Ainda não tem acesso?
4
respostas

Alinhamento - Imagem Benefícios

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação

por ANA VIEIRA
| 13.3k xp | 4 posts

Estou tentando editar/mexer no alinhamento da imagem de benefícios, porém não consigo fazer com que a imagem ocupe 50% da tela no rodapé, sem as margens pretas. A ideia é jogar a imagem pra um espaço, e os benefícios + lista ul ao outro.

Ao HTML:

        <div class="beneficios">
                <h3 class="titulo-centralizado">Benefícios</h3>
                <ul>
                    <li class="itens">Atendimento aos Clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                </ul>
                <img src="beneficios.jpg" class="imagembeneficios">
        </div>

Ao CSS:

.beneficios { background: black; }

.titulo-centralizado { text-align: center; width: 40%; color: white; text-transform: uppercase; font-weight: bold; font-size: 27px; }

ul { display: inline-block; width: 40%; }

.itens { text-align: center; font-style: italic; margin: 0 0 10px; color: white; }

.imagembeneficios { width: 50%; text-align: right; }

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas
por GUILHERME WILLMAN
| 52.2k xp | 16 posts

Olá, tudo bem? So não entendii muito bem o que vc quer fazer? Na teoria já está um do lado do outro não?

Sobre a imagem o width é baseado em cima do tamanho da imagem... Então width: 50%: Seria o tamanho de 50% proporcional ao tamanho total da imagem.

Caso vc diminuir o width da imagem ela irá ser menor.

por Gabriel Poton dos Santos
| 57.6k xp | 17 posts

Olá, Ana. Tudo certinho?

É bem provável que sua div "beneficios" esteja dentro de alguma outra tag que está com uma largura (width) definida e centralizada na tela. Caso você esteja utilizando os mesmos nomes de classes que o professor, procure no seu HTML pela div "caixa" e, em seguida, retire toda sua div "beneficios" de dentro dela. Desta forma, sua div "beneficios" passará a ocupar 100% da tela, eliminando essas margens laterais.

A estrutura do seu HTML, atualmente, deve estar mais ou menos assim (com "beneficios" dentro de "caixa"):


<div class="caixa">

    <!--OUTRAS TAGS-->

    <div class="beneficios">
            <h3 class="titulo-centralizado">Benefícios</h3>
            <ul>
                <li class="itens">Atendimento aos Clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais Qualificados</li>
            </ul>
            <img src="beneficios.jpg" class="imagembeneficios">
    </div>
</div>

Para atingir o resultado que você espera, a estrutura deve ficar assim (com "beneficios" fora de "caixa"):


<div class="caixa">

    <!--OUTRAS TAGS-->

</div>

<div class="beneficios">
        <h3 class="titulo-centralizado">Benefícios</h3>
        <ul>
            <li class="itens">Atendimento aos Clientes</li>
            <li class="itens">Espaço diferenciado</li>
            <li class="itens">Localização</li>
            <li class="itens">Profissionais Qualificados</li>
        </ul>
        <img src="beneficios.jpg" class="imagembeneficios">
</div>

Espero ter ajudado.

Bons estudos!

por ANA VIEIRA
| 13.3k xp | 4 posts

Oie!

Então, na verdade essa classe de "caixa" tá na página de produtos, e meu problema é na página do index mesmo. A estrutura do HTML tá assim:

    <body>
        <header>
            <h1 class="titulo-principal"><img src="logo-branco.png">
                <p>Barbearia Alura</p></h1>
        </header>
        <img id="banner" src="banner.jpg">
        <div class="principal">
            <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

            <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

            <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
        </div>

        <div class="beneficios">
                <h3 class="titulo-centralizado">Benefícios</h3>
                <ul>
                    <li class="itens">Atendimento aos Clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                </ul>
                <img src="beneficios.jpg" class="imagembeneficios">
        </div>
    </body>

Será que o problema é na estrutura do HTML ou no CSS?

por Gabriel Poton dos Santos
| 57.6k xp | 17 posts

Olá, Ana. Tudo certinho?

Mexi um pouco no seu código para ver se atinge o resultado que você está buscando.


<div class="beneficios">
      <h3 class="titulo-centralizado">Benefícios</h3>
      <ul>
        <li class="itens">Atendimento aos Clientes</li>
        <li class="itens">Espaço diferenciado</li>
        <li class="itens">Localização</li>
        <li class="itens">Profissionais Qualificados</li>
      </ul>
      <div class="caixa-imagembeneficios">
        <img src="beneficios.jpg" class="imagembeneficios" />
      </div>
    </div>


.beneficios {
  background: black;
}

.titulo-centralizado {
  text-align: center;
  width: 40%;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 27px;
}

ul {
  display: inline-block;
  width: 40%;
  padding: 0;
}

.itens {
  text-align: center;
  font-style: italic;
  margin: 0 0 10px;
  color: white;
}

.caixa-imagembeneficios {
  display: inline-block;
  text-align: right;
  width: 59.6%;
}

.imagembeneficios {
  width: 50%;
}

Note que adicionei um "padding: 0" na "ul", a fim de retirar o "padding" padrão que o navegador adiciona na lista (o que estava aumentando o tamanho do elemento para 40% + padding). Além disso, criei uma "div class= caixa-imagembeneficios" para envolver sua tag "img", a fim de posicionar a sua imagem à direita (você havia colocado "text-align: right" na própria tag "img", o que não surtia nenhum efeito). Caso você queira que a sua imagem ocupe toda a metade direita da tela, basta aumentar o "width" da ".imagembeneficios" para 100%.

Não sei se o resultado que você estava buscando era exatamente esse, mas espero ter ajudado. Caso reste alguma dúvida, é só voltar aqui e perguntar.

Bons estudos!