imagem não se posiciona da maneira correta | HTML5 e CSS3 parte 1: crie uma página da Web

3
respostas

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Listas e divisões de conteúdo e atividade Inline e Block

por Leonam Lopes de Medeiros

| 22.9k xp | 4 posts

segui as instruções do professor, mas a minha imagem na fica junto com a lista

 <div class="beneficios">

         <h2>Beneficios</h2> 

     <ul>

         <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>

     </ul>

         <img src="Imagens/beneficios.jpg" class="beneficios">
        </div>


        #banner2 { 
    width: 100%;
}  

.principal { 
    background-color: #CCCCCC;
}

h1 { 
 text-align: center;
}

p { 
    text-align: center;
    padding: 30px
}

#missao { 
    font-size: 20px;
}

em strong {
    color: red;
}

.itens {
font-style: italic;
}

.beneficios {
    background: #FFFFFF;
    padding: 20px;
}   

h2 {
    text-align: center;
} 

ul {
   display: inline-block;
   vertical-align: top;
   width: 20%;
   margin-right: 15%;
} 

.beneficios {
    width: 800PX;
}

3 respostas

por Renan Lima

| 2885.1k xp | 6001 posts

Instrutor Scuba Team

26/10/2022

Olá, Leonam.

Tudo bem?

Tenta diminuir o tamanho da imagem beneficios no caso a largura que é o width: ; pode ser que a imagem está muito grande.

Se não funcionar, compartilha os seus códigos HTML e CSS completos aqui por favor.

Espero ter ajudado. Qualquer dúvida manda aqui.

por Leonam Lopes de Medeiros

| 22.9k xp | 4 posts

26/10/2022

Oi Renan, eu coloquei a imagem beneficio em 800px porque foi um tamanho que ocupa metade da pagina (tentei colocar em width: 50% e ficou muito pequena) ai diminui um pouco a imagem mais ainda não deu certo. Esses são os códigos que usei

 <head> 
     <meta charset="utf-8">
     <title>barbearia alura</title>
     <link rel="stylesheet" href="style.css">
 </head>

 <body>  

    <header>

        <h1 class="titulo-principal">Barbearia Alura</h1>

    </header>

     <img id="banner2" src="Imagens/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">Beneficios</h3> 

 <ul>

     <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>

 </ul>

     <img src="Imagens/beneficios.jpg" class="beneficios">
    </div>
 </body>

body{

}

.titulo-principal { padding-left: 20px; }

#banner2 { width: 100%; }

.principal { background-color: #CCCCCC; }

.titulo-centralizado { text-align: center; }

p { text-align: center; padding: 30px }

#missao { font-size: 20px; }

em strong { color: red; }

.itens { font-style: italic; }

.beneficios { background: #FFFFFF; padding: 20px; }

ul { display:inline-block; vertical-align: top; width: 20%; margin-right: 15%; }

.beneficios { width: 600px; }

por Roniere da Silva Sousa

| 209.1k xp | 3 posts

08/11/2022

Leonam, você colocou o mesmo nome da class para a tag div e img. Renomeie a sua class da img para "imagem-beneficios" e no css você coloca .imagem-beneficios. Desta forma você também poderá alterar o width de 600px para 50%.

1) index.html

<img src="Imagens/beneficios.jpg" class="imagem-beneficios">

2) style.css

.imagem-beneficios {
    width: 50%;
}