Entrar Ainda não tem acesso?
2
respostas

O preço do carrinho não fica no centro igual o titulo e o restante

Referente ao curso Java EE parte 2: Sua loja online com HTML, REST e Cache

por Fabio Henrique Cristo Costa
| 49.2k xp | 8 posts
Estagiário desenvolvedor 
    <tr>
            <td class="formularioDoCarrinho-item">
                <a href="#{request.contextPath}/livro-detalhe.xtml?id=#{carrinhoItem.livro.id}">
                    <img class="formularioDoCarrinho-item-imagem" 
                        src="#{request.contextPath}/file/#{carrinhoItem.livro.capaPath}" />
                </a>
            </td>
            <td class="formularioDoCarrinho-item">
                <h2 class="formularioDoCarrinho-item-titulo"> #{carrinhoItem.livro.titulo} </h2>
            </td>
            <td class="formularioDoCarrinho-item-preco"> R$ #{carrinhoItem.livro.preco}</td>
            <td class="formularioDoCarrinho-item">
                <input class="formularioDoCarrinho-item-quantidade"
                       type="number" min="0" value="#{carrinhoCompras.itens[index.loop].quantidade}" />
            </td>
            <td class="formularioDoCarrinho-item formularioDoCarrinho-item-precoTotal" 
                title="Preço unitário: R$ #{carrinhoItem.livro.preco}">R$ #{carrinhoCompras.getTotal(carrinhoItem)} </td>
            <td class="formularioDoCarrinho-item">
                <a href="https://www.casadocodigo.com.br/cart/change?id=18404155847&quantity=0">
                    <img class="formularioDoCarrinho-item-remover-imagem"  
                        src="#{request.contextPath}/resources/imagens/trash.png" alt="X" title="Remover" />
                </a>
            </td>
    </tr>
2 respostas
por Sandro Marcelo Arpi
| 108.1k xp | 37 posts
Analista de Sistemas

Bom dia Fabio,

Tem que olhar o CSS e ver se tem alguma coisa diferente da aula. Veja se está olhando o CSS da classe correta do preço do carrinho. Vi que tem classes para o preço do carrinho diferentes: formularioDoCarrinho-item-preco e formularioDoCarrinho-item-precoTotal. Verifique o CSS, ou poste o código aqui para que possa te ajudar.

por Fabio Henrique Cristo Costa
| 49.2k xp | 8 posts
Estagiário desenvolvedor 
.formularioDoCarrinho {
    width: 110%;
    margin-left: -5%;
}

.formularioDoCarrinho-tabela {
    background-color: #F2F0EE;
    text-align: center;
    width: 100%;
}

.formularioDoCarrinho-cabecalho {
    background-color: #E4E1DE;
    border-bottom: 1px solid #D5D3D1;
    padding-bottom: .35em;
    margin-bottom: .6em;
    font-family: "open-sans", sans-serif;
    font-size: .9em;
    font-weight: 700;
}

.formularioDoCarrinho-cabecalho-item {
    padding: .5em 0;
}

.formularioDoCarrinho-item {
    font-size: .8em;
    font-family: "museo", serif;
    padding: .2em;
    vertical-align: middle;
}

.formularioDoCarrinho-item-imagem {
    width: 35px;
}

.formularioDoCarrinho-item-quantidade {
    max-width: 2.3em;
    text-align: center;
}

.formularioDoCarrinho-item-remover-imagem {
    width: 1.5em;
    height: 1.5em;
}

.formularioDoCarrinho-rodape {
    background-color: #E4E1DE;
    border-top: 1px solid #D5D3D1;
    font-family: "open-sans", sans-serif;
    font-size: .9em;
    font-weight: 700;
}

.formularioDoCarrinho-rodape-item {
    padding: .5em 0;
    vertical-align: middle;
}

.formularioDoCarrinho-finalizar {
    text-align: left;
    padding-left: .5em;
}

.formularioDoCarrinho-finalizar-botao {
    font-family: "open-sans", sans-serif;
    font-size: 1em;
    font-weight: 800;
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
    padding: 0 9px 0 2px;
    border-radius: 2px;
    display: block;
    background-color: #fac459;
    border: none;
    cursor: pointer;
}
.formularioDoCarrinho-finalizar-botao:hover {
    background-color: #E4A830;
}

.formularioDoCarrinho-finalizar-botao::before {
    content: ' ';
    display: inline-block;
    width: 36px;
    height: 36px;
    background-image: url(//cdn.shopify.com/s/files/1/0155/7645/t/212/assets/cart.png?4957467331228196608);
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 50%;
    -webkit-background-size: 80%;
    background-size: 80%;
    vertical-align: middle;
}
.formularioDoCarrinho-finalizar-botao-texto {
    display: none;
}

.formularioDoCarrinho-atualizar {
    background-image: url(../imagens/refresh.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: transparent;
    background-size: 75%;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    font-size: 0;
}

@media screen and (min-width: 381px) {
    .formularioDoCarrinho-finalizar-botao-texto {
        display: inline;
    }
}

@media screen and (min-width: 600px) {
    .formularioDoCarrinho {
        width: 100%;
        margin: 0;
        font-size: 1.2em;
    }
    .formularioDoCarrinho-item-imagem {
        width: 60px;
    }
}