CSS: Leave Values Aligned

2

Good Night, I'm having a CSS problem I'd like to organize my users' postings in a row.

I'm not very familiar with css, I would also like to know what tips you have to uncover this part of design.

Code:

.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>

I would like to stay:
Title ------- / category - / tags / [dl, rp, fv]
Picture - / hd ---------- /

    
asked by anonymous 12.03.2018 / 02:02

1 answer

1

I suggest not using flex because it gets bad for doing line breaks. I made several modifications to the code and aligned the information next to the image with 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>
  

Another thing, you are misusing the <p> tag. This tag is for   create paragraphs. In my answer I erased everything because they are not   needed. If you want to break line, use <br /> .

    
12.03.2018 / 02:18