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

posicionamento das imagens fica no formato de coluna

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo A tag section e atividade Reforçando o inline-block

por WELLINGTON DOS SANTOS KAISER
| 55.7k xp | 7 posts
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Produtos - TenenShop</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produto.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img class="img" src="teen Logotipo.jpg"></h1>
                    <nav>
                        <ul>
                            <li><a href="index.html">Inicio</a></li>
                            <li><a href="produto.html">Produtos</a></li>
                            <li><a href="contato.html">Fale conosco</a></li>
                        </ul>
                    </nav>
            </div>
        </header>

        <main>
            <ul class="venda">
                <li>
                    <h2>chapeus/boné</h2>
                    <img src="bone.png" style="width: 50%;">
                    <p>Para o frio ou para o sol</p>
                    <p>Apartir de R$50,00</p>
                </li>

                <li>
                    <h2>moletom</h2>
                    <img src="moletom.png" style="width: 50%;">
                    <p>Para não congelar</p>
                    <p>Apartir de R$70,00</p>
                </li>

                <li>
                    <h2>Blusas</h2>
                    <img src="blusa.png" style="width: 50%;">
                    <p>Para combinar com o dia a dia</p>
                    <p>Apartir de R$70,00</p>
                </li>

                <li>
                    <h2>calças</h2>
                    <img src="calcas.png" style="width: 50%;">
                    <p>Para seu estilo e conforto</p>
                    <p>Apartir de R$60,00</p>
                </li>
            </ul>
        </main>
    </body>
</html>
header {
    background: #5f9ea0;
    padding: 19px 0;
}

.caixa {
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 127px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

.img {
    height: 255px;
}

.venda {
    width: 940px;
    margin: 0 auto;
}

.venda li {
    display: inline-block;
}

https://drive.google.com/file/d/17liajar6yUkHM-Wj5OpOjr90w6nYZQ_V/view?usp=sharing

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

3 respostas
por Tálison Miguel Amancio
| 122.1k xp | 90 posts

Olá amigo, peguei seu codigo e teste e achei o errol, voce definiu cada imagen pra 50% de largura, pra arrumar é so voce tirar esse width assim: 

    <main>
        <ul class="venda">
            <li>
                <h2>chapeus/boné</h2>
                <img src="bone.png">
                <p>Para o frio ou para o sol</p>
                <p>Apartir de R$50,00</p>
            </li>

            <li>
                <h2>moletom</h2>
                <img src="moletom.png">
                <p>Para não congelar</p>
                <p>Apartir de R$70,00</p>
            </li>

            <li>
                <h2>Blusas</h2>
                <img src="blusa.png">
                <p>Para combinar com o dia a dia</p>
                <p>Apartir de R$70,00</p>
            </li>

            <li>
                <h2>calças</h2>
                <img src="calcas.png">
                <p>Para seu estilo e conforto</p>
                <p>Apartir de R$60,00</p>
            </li>
        </ul>
    </main>
</body>

Assim ficara um do lado do outro :)

por WELLINGTON DOS SANTOS KAISER
| 55.7k xp | 7 posts

o erro perssiste. A definição serve para dimunuir o tamanho das imagens para 50%.

solução!
por Tálison Miguel Amancio
| 122.1k xp | 90 posts

Olhei novamente e percebi, voce vai ter que definir uma largura pra cada li:

.venda li {

display: inline-block;
width: 232px;

}

coloquei 232px mais pode colocar menos se quiser que funcionara :)