Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia pessoal,
Sou novato e estou montando meu primeiro site em html. Cheguei na parte de dispor as imagens dos produtos, legendas e um botão "alugar". A disposição da tela quero algo igual ao site da americanas, extra, ml, ou seja, pequena figura do produto em linha uma ao lado da outra, abaixo de cada figura uma legenda em texto, abaixo de cada legenda um botão "alugar". Formando um bloco de 4 a 5 produtos começa tudo de novo logo abaixo num novo bloco horizontal de produtos..
Olhando esses sites me parece uma Tabela sem bordas sendo utilizada.
Então a pergunta é devo utilizar Tabela no Html ou devo seguir por outro caminho?
Oi Francklyn, tudo bem sim,
Primeiro obrigado pela sua ajuda!!! :) tentei dar um "like" na sua mensagem mas dá erro.
Entendi, sem Tabelas. Eu estou fazendo "aulas online" e já fechou a parte de CSS. Consegui fazer o código abaixo que resulta em 3 figuras lado-a-lado na horizontal e duas linhas de textos abaixo das figuras, mas achei trabalhoso, imagine eu ter 300 produtos e ter que fazer o mesmo linha a linha.... bem como nem finalizei, ainda quero botar um botão "Alugar" abaixo dos textos... enfim... acho que estou fazendo pelo caminho mais trabalhoso.
Bom, se você ou algum outro colega esbarrar em algum tutorial, video-aula ou coisa assim que exemplifique justamente isso posta aqui o link por favor.
Veja o que fiz de teste, até deu certo, mas dezenas de códigos digitados só para colocar 3 produtos apenas, tenho mais 297 para colocar!!!:
HTML
<section id="capas"> <!--INI: Essa seção adiciona as capas dos jogos, lado a lado - Ruy Hoffmann 03/02/2019-->
<div class="capas">
<img src="file:///D:/Ruy/2019/Locadora/HTML/_jogos/PS4Spide-man.jpg" title="Spider-Man" hspace="25">
<p>Homem Aranha</p>
<p>Disponível</p>
</div>
<!--figcaption>
<p>Homem Aranha</p>
</figcaption-->
<div class="capas">
<img src="file:///D:/Ruy/2019/Locadora/HTML/_jogos/PS4TheLastOfUs.jpg" title="The Last of Us" hspace="25">
<p>The Last of Us</p>
<p>Disponível</p>
</div>
<!--figcaption>
<p>The Last Of Us</p>
</figcaption-->
<div class="capas">
<img src="file:///D:/Ruy/2019/Locadora/HTML/_jogos/PS4ResidentEvil2.jpg" title="Resident Evil 2" hspace="25">
<p>Resident Evil 2</p>
<p>Disponível</p>
<!--figcaption>
<p>Resident Evil 2</p>
</figcaption-->
</div>
</section>
CSS
/*CAPAS - Ruy Hoffmann 06/02/2019 */
div.capas
{
width:150px;
display: inline-block;
margin:0px 25px 0px 0px;
padding-bottom:0px;
padding-top:0px;
}
div.capas p
{
padding-bottom:0px;
padding-top:0px;
margin:0px 0px 0px 25px;
font-size:12pt;
font-weight:bold;
}
/* RODAPÉ */
footer
{
background-color:black;
}
footer h6
{
padding:5px;
}
Ruy, tudo bem?
Ao conjunto que você ver nesses sites, é que é utilizado HTML e CSS para fazer a manipulação,
N caso do site Americanas eles não utiliza Tabela e sim utilizam o CSS para manipular a DIV a responder de acordo com a formatação.