[Resolvido] Galeria de imagens

[Juste 0]

Boa tarde pessoal,

 

Eu tenho uma lista de quadros com suas respectivas descrições dentro de uma div que é o contêiner para esta parte da página. Estou tendo dificuldade em posicionar estes quadros de forma que eles fiquem um ao lado do outro, especificamente deve ficar três quadros por linha.

 

<div id="galery">

<ul>
   <li><img src="http://placehold.it/70x110" alt="Quadro" /><li>
   <li class="subtitle">Nome do autor</li>
   <li class="description">Descrição genérica</li>
   <li class="description">preço</li>

   <li><img src="http://placehold.it/70x110" alt="Quadro" /><li>
   <li class="subtitle">Nome do autor</li>
   <li class="description">Descrição genérica</li>
   <li class="description">preço</li>

   <li><img src="http://placehold.it/70x110" alt="Quadro" /><li>
   <li class="subtitle">Nome do autor</li>
   <li class="description">Descrição genérica</li>
   <li class="description">preço</li>

   <li><img src="http://placehold.it/70x110" alt="Quadro" /><li>
   <li class="subtitle">Nome do autor</li>
   <li class="description">Descrição genérica</li>
   <li class="description">preço</li>

   <li><img src="http://placehold.it/70x110" alt="Quadro" /><li>
   <li class="subtitle">Nome do autor</li>
   <li class="description">Descrição genérica</li>
   <li class="description">preço</li>

   <li><img src="http://placehold.it/70x110" alt="Quadro" /><li>
   <li class="subtitle">Nome do autor</li>
   <li class="description">Descrição genérica</li>
   <li class="description">preço</li>
</ul>


</div>

[NetBoy16 72]

só colocar uma largura fixa na div e dar float:left pra cada li(li { float: left; })

[William Bruno 1501]

faça a marcação assim:

 

 

    <li><img src="http://placehold.it/70x110" alt="Quadro" />
   <spanclass="subtitle">Nome do autor</span>
   <span class="description">Descrição genérica</span>
   <span class="description">preço</span></li>

 

agora cada LI é um quadro.

 

Ai sim, você conseguirá fazer float left com os LIs.

[Teteu Six 4]

faça a marcação assim:

 

 

    <li><img src="http://placehold.it/70x110" alt="Quadro" />
   <spanclass="subtitle">Nome do autor</span>
   <span class="description">Descrição genérica</span>
   <span class="description">preço</span></li>

 

agora cada LI é um quadro.

 

Ai sim, você conseguirá fazer float left com os LIs.

 

 

Seguindo o exemplo que o William Bruno passou, pode-se usar também

li {display: inline;}

 
li {display: inline;}
li img {display: block;}
.subtitle, .description {display: block;}
.subtitle {font-size: 14px;font-weight: bold;}
.description {font-size: 12px;}

    
<li>
   <img src="http://placehold.it/70x110" alt="Quadro" />
   <span class="subtitle">Nome do autor</span>
   <span class="description">Descrição genérica</span>
   <span class="description">preço</span>
</li>

[Juste 0]

Pessoal, eu já havia feito á minha maneira antes de ver as respostas, ficou assim:

 

<sytle type="text/css">
 .quadro{
  float:left;
  margin:30px; /*  mantem a distancia entre os quadros */ 
}

 <div class="quadro">
       <img src="http://placehold.it/70x110" alt="quadro">

       <ul>
           <li class="title"> Nome do Autor </li>
           <li class="subtitle">Descrição da obra </li>
           <li class="subtitle">preço </li>
       </ul>
   </div>

         <div class="quadro">
       <img src="http://placehold.it/70x110" alt="quadro">

       <ul>
           <li class="title"> Nome do Autor </li>
           <li class="subtitle">Descrição da obra </li>
           <li class="subtitle">preço </li>
       </ul>
   </div>

 

Visualmente o efeito ficou como deveria, mas não sei se o código ficou "decente". O que acham?

[William Bruno 1501]

não está.

 

Veja novamente como eu propus. Está bem diferente.

[Juste 0]

Eu fiz o ajuste conforme os dois disseram e funcionou. Visualmente ficou da mesma maneira que eu havia feito, mas concordo que a semântica não estava boa. Agora começo a perceber que a dificuldade não está em fazer as coisas funcionarem, mas sim fazer as coisas funcionarem utilizando os recursos da melhor maneira possível, mas eu chego lá rs. Com essas dicas eu pude entender melhor algumas coisas sobre a marcação do documento e a sugestão de utilizar o valor "block" me abriu a cabeça para outras coisas. Agora posso começar a estudar JavaScript, daí é só arrumar um emprego e pagar uma cerveja pra vcs rs. Obrigado a todos, abraço.