2

Boa Noite , estou com um problema no CSS gostaria de organizar os lançamentos de meus usuários em uma linha.

Não sou muito familiarizado com o css , gostaria de saber também qual dicas você possue para o desvendar essa parte de design.

Código:

.box {
    font-size: 8pt;
    background-color: #282828;
    border: 1px solid #303030;
    margin-bottom: 10px;
}
.colhead_dark {
    background: #121212;
    color: #ccc;
    vertical-align: middle;
}
.head {
    padding: 4px;
    border-bottom: 1px solid #303030;
    background: #121212;
    color: white;
}
.brackets {
    text-indent: 0px;
    white-space: nowrap;
}
main_column table {
    margin-bottom: 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #303030;
}
a {
    text-decoration: none;
    border: none;
    color: #ccc!important;
}
* {
    padding: 0em;
    margin: 0em;
}
.lancamentos_box {
    display: inline-flex;
}
.icone_movie {
    width: 64px;
    height: 64px;
    background: url(https://image.flaticon.com/icons/svg/23/23665.svg) no-repeat center center;
    background-size: 64px 64px;
}
.torrent_table div.tags {
    font-weight: normal;
}
.tags {
    padding: 0px 0px 0px 20px;
    font-style: italic;
}
.main_column .dl_torrent {
    margin: 4px 0px 0px 0px;
    float: right;
}
   
<div id="lancamentos" class="box">
   <div class="head">
  <strong>Lançamentos</strong>
   </div>
   <div class="box" id="_recommended">
  <div class="head colhead_dark">
     <strong>Últimos arquivos lançados</strong>
     <a href="#" onclick="$('#').gtoggle(); this.innerHTML = (this.innerHTML == 'Ocultar' ? 'Mostrar' : 'Ocultar'); return false;" class="brackets">Ocultar</a>
  </div>

  <table class="torrent_table" id="vanit">
     <tbody>
        <tr>
           <td>
              <div class="lancamentos_box">
              
                                   <a href="torrents.php?id=815&amp;torrentid=1070">A saga das galinhas</a> (por <a href="user.php?id=294"><font color="#FFD700">Galudo</font></a>)
                 </div>
                 <div class="icone_movie"></div>
                 <div class="tags">
                    Categoria: <a href="filter_cat[2]=1"> Series</a>
                 </div>
                 <div class="tags">
                    <span class="resolucao_"> HD</span>
                    <span class="audio_torrent"> Dual Audio</span>
                 </div>
                 <div class="tags">
                    <a href="">720i</a>
                 </div>
                 <span class="dl_torrent">
                    [ <a href="" class="tooltip">DL</a>
                    | <a href="" class="tooltip">LP</a>
                    | <a title="Adicionar aos favoritos" href="#" id="bookmarklink" class="bookmarklink_torrent_815 " onclick="Bookmark('t', 815, '<img width=10  height=10 src=s />'); return false;"><img width="10" height="10" src="g"></a>
                    ]
                 </span>
              </div>
           </td>
        </tr>
     </tbody>
  </table>
   </div>
</div>

O gostaria que ficasse:
Titulo-------/ categoria -/ tags / [dl , rp , fv ]
Imagem--/ hd ----------/

2
  • QUal seria a imagem?
    – Sam
    Commented 12/03/2018 às 1:09
  • A que está no codigo do post , essa casinha está como exemplo mas tem o mesmo tamanho, você não descansa @dvd ? kkk
    – reigelado
    Commented 12/03/2018 às 1:10

1 Resposta 1

1

Sugiro não usar flex, porque fica ruim para fazer as quebras de linha. Fiz várias modificações no código e alinhei as informações ao lado da imagem com translateY.

.box {
    font-size: 8pt;
    background-color: #282828;
    border: 1px solid #303030;
    margin-bottom: 10px;
}
.colhead_dark {
    background: #121212;
    color: #ccc;
    vertical-align: middle;
}
.head {
    padding: 4px;
    border-bottom: 1px solid #303030;
    background: #121212;
    color: white;
}
.brackets {
    text-indent: 0px;
    white-space: nowrap;
}
main_column table {
    margin-bottom: 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #303030;
}
a {
    text-decoration: none;
    border: none;
    color: #ccc!important;
}
* {
    padding: 0em;
    margin: 0em;
    position: relative;
}
.lancamentos_box {
   display: inline-block;
    height: 64px;
    float: left;
}
.icone_movie {
    width: 64px;
    height: 64px;
    background: url(https://image.flaticon.com/icons/svg/23/23665.svg) no-repeat center center;
    background-size: 64px 64px;
    float: left;
    margin-right: 20px;
}
.torrent_table div.tags {
    font-weight: normal;
}
.tags {
    font-style: italic;
}
.smain_column .dl_torrent {
    margin: 4px 0px 0px 0px;
    float: right;
}

.infos{
   top: 50%;
   transform: translateY(-50%);
   display: inline-block;
}
<div id="lancamentos" class="box">
   <div class="head">
      <strong>Lançamentos</strong>
   </div>
   <div class="box" id="_recommended">
      <div class="head colhead_dark">
         <strong>Últimos arquivos lançados</strong>
         <a href="#" onclick="$('#').gtoggle(); this.innerHTML = (this.innerHTML == 'Ocultar' ? 'Mostrar' : 'Ocultar'); return false;" class="brackets">Ocultar</a>
      </div>

      <table class="torrent_table" id="vanit">
         <tbody>
            <tr>
               <td>
                  <a href="torrents.php?id=815&amp;torrentid=1070">A saga das galinhas</a> (por <a href="user.php?id=294"><font color="#FFD700">Galudo</font></a>)
                  <br />
                  <div class="icone_movie"></div>
                  <div class="lancamentos_box">
                     <span class="infos">
                        <span class="tags">
                           Categoria: <a href="filter_cat[2]=1"> Series</a>
                           <br />
                           <span class="resolucao_"> HD</span>
                           <br />
                           <span class="audio_torrent"> Dual Audio</span>
                           <br />
                           <a href="">720i</a>
                        </span>
                        <br />
                        <span class="dl_torrent">
                           [ <a href="" class="tooltip">DL</a>
                           | <a href="" class="tooltip">LP</a>
                           | <a title="Adicionar aos favoritos" href="#" id="bookmarklink" class="bookmarklink_torrent_815 " onclick="Bookmark('t', 815, '<img width=10  height=10 src=s />'); return false;"><img width="10" height="10" src="g"></a>
                           ]
                        </span>
                     </span>
                  </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

Outra coisa, está fazendo mau uso da tag <p>. Essa tag serve para criar parágrafos. Na minha resposta eu apaguei tudo porque não são necessárias. Se quer quebrar linha, use <br />.

10
  • Mas como eu consigo que o HD e Dual fiquem em baixo de Categoria? Uma parte foi resolvido amigo .
    – reigelado
    Commented 12/03/2018 às 1:20
  • Oi @dvd eu editei de novo amigo ,eu queria saber como eu poderia deixar daquela forma como está no post.
    – reigelado
    Commented 12/03/2018 às 1:26
  • Ela deixa o texto em itálico, fica bacana por isso usei duas vezes, qual seria o correto ?
    – reigelado
    Commented 12/03/2018 às 1:40
  • Blz , amigo estou testando algumas coisas aqui mas só faço cagadada kkkk
    – reigelado
    Commented 12/03/2018 às 2:07
  • Ok, eu tinha colocado o flex porque tinha conseguido alinhar com ele mas você que manda , já vou olhar no computador.
    – reigelado
    Commented 12/03/2018 às 2:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .