CSS: Keep Values Aligned

Asked

Viewed 59 times

2

Good evening, I’m having a problem in CSS I would like to organize the releases of my users in one line.

I’m not very familiar with css , I would also like to know what tips you have to unravel 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’d like you to stay:
Title---------/ category -/ tags / [dl , Rp , Fv ]
Image-/ hd ----------/

html css

  • What would be the image?

  • The one that is in the code of the post , this little house is as example but has the same size, you do not rest @dvd ? kkk

1 answer

1


I suggest not to use flex, because it looks bad to do 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>

Something else is misusing the tag <p>. This tag serves to create paragraphs. In my answer I deleted everything because they are not needed. If you want to break line, use <br />.

  • But how do I get the HD and Dual to be below Category? .

  • Hi @dvd i edited new friend ,I wondered how I could leave that way as it is in the post.

  • She leaves the text in italics, it looks nice so I used it twice, which would be the correct ?

  • Blz, friend I’m testing some things here but I just do shit kkkk

  • OK, I had put the flex because I had been able to line up with it but you’re the boss, I’ll look at the computer.

  • Blz , I put to follow the pattern of other margin.

  • In the @dvd case, if I put another info under this info in the code this information will be next?

  • And why span instead of div?

  • Thanks friend , I put your as reply, I will give some more modifications but already helped a lot, good night!

  • Okay, I’ll give a search , thank you!

Show 5 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.