Entrar Ainda não tem acesso?
3
respostas

após adicionar with a imagem desce

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 GILDO CHAVES OLIVEIRA FILHO
| 12.3k xp | 16 posts
Aux tecnico

após adicionar o width a imagem sai ao lado da lista de iten e vem para baixo

<!DOCTYPE html>

<html lang= "pt-br">
<head>
    <title> Barbearia Alura</title>
    <meta charset = "UTF-8">
    <link rel="stylesheet" href= "style.css">
</head>
    <body>
            <img id="banner" src="banner.jpg">
        <div class="principal">
            <h1> <big>Sobre a Barbearia Alura </big> </h1>

            ``

            <p><big>Localizada</big> 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><hr>

            <p id="missao"> <em>Nossa missão é:<strong> "Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em> <hr></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>
            <h2><big>  Beneficios</big> </h2>
        <ul>
            <li class="itens">     Atendimento ao Cliente</li> 
            <li class="itens">     Espaço diferenciado   </li>
            <li class="itens">     Profissionais qualificados</li> 
        </ul>
        <img src= "img/beneficios.jpg" class="imagemBeneficio">
</div>
    </body>


</html>

e meu css

body 

#banner {
    width: 100%;
}
.class{
    color: rgb(255,255,255);
}

h1 {
        text-align:center;
}

p {
        text-align: center; 
        color: blue;
}

#missao {
    font-size: 35px;
}

em strong {
        color: red;
}
h2 {
    text-align: center;
    font-style: initial;
    color: rgb(0,0,0)
}
ul {
        display: inline-block;
        vertical-align: top;
        margin-right: 10%;
        width: 20%;

        color: rg(0,0,0);




}
.itens {
    font-style: italic;
}
.imagemBeneficios {
    width: 50%;
}
3 respostas
por BRUNO MARTIN CAPOROSSI WUO
| 353k xp | 2 posts
Instrutor Informatica

Gildo

Corrigir o nome da Classe da tag IMF da linha abaixo: imagemBeneficio, pois no CSS vc declarou com o S * imagemBeneficios*

<img src= "img/beneficios.jpg" class="imagemBeneficio">`


-----------------------------
}
.imagemBeneficios {
    width: 50%;

}

por Higo Ricardo de Oliveira Melo
| 139.8k xp | 104 posts
Técnico

Olá, amigo

Tomei a liberdade de fazer algumas alterações no seu código para melhorar seu aprendizado: 1 - Excluir o body pois não foi atribuído qualquer valor, inclusive sem chaves. 2 - Excluir .class pois essa não foi utilizado no código acima. 3 - Reduzir a ocorrência de alguns atributos no código como, por exemplo, text-align: center; que foi movido para h1,h2{...} (estamos separados antes ) promovendo um código mais enxuto.

#banner {
    width: 100%;
}

h1, h2 {
        text-align:center;
}

p {
        text-align: center; 
        color: blue;
}

#missao {
    font-size: 35px;
}

em strong {
        color: red;
}
h2, ul {
    color: rgb(0,0,0)
}

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

.itens {
    font-style: italic;
}

.imagemBeneficios {
    width: 50%;
}
por Diogo de França Santos
| 32.7k xp | 3 posts
Desenvolvedor jr

Ola pessoas e Gildo.

Estava passando pelo mesmo dilema, contudo, eu reescrevi no css o atributo de ".imagembeneficios" no css e funcionou..

Fiquei confusa com isso, até porque, estava com esse mesmo problema com a ul.

Existe bugs quando utilizamos navegadores diferentes?

Temos que reescrever os atributos ou códigos para que o bug suma?

Eu uso o navegador Vivaldi, por ser mais leve. Isso pode ocasionar alguma interferência?