Website - Homepage Layout - Three buttons not even, but two are | GBAtemp.net

HarveyHouston

The Christian Who Hacks Stuff

Member

Jan 23, 2023

This is a repost of this GitLab issue: https://gitlab.com/rock-band-customs/rock-band-customs.gitlab.io/-/issues/1

This is an irritating issue of which I can't seem to find a workaround that sticks yet. I create a table like so:

HTML:

    <table class="flex-table"><tbody>
      <thead>
                <tr>
                    <th colspan="6" style="width:100%"><h1>GITLAB REPOSITORIES</h1> </th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="6">
                        <div id="no-paging">
                            &nbsp;
                        </div>
                    </td>
                </tr>
            </tfoot>
      <tr><td class="flex-cell-text" colspan="6">To begin your journey towards being able to play whatever songs you want on Rock Band titles, you first have to pick a console. Use the GitLab Repository buttons below to navigate to the appropriate repo or group. Of groups, choose the repo concerning your console or emulator. We recommend a thorough reading of each repo's wiki BEFORE using any of the software below!</td></tr>
      <tr><td class="flex-cell" colspan="2">
        <a target="_self" href="https://gitlab.com/rock-band-customs/wii-vwii-dolphin">
          <img class="flex-cell-image" src="WiiConsole.jpg" alt="Wii/vWii Hacks">
          <div class="text-overlay"><strong>Wii - vWii - Dolphin</strong><br><em class="button-desc">Software Repository</em></div>
        </a></td>
        <td class="flex-cell" colspan="2">
        <a target="_self" href="https://gitlab.com/rock-band-customs/playstation-customs">
          <img class="flex-cell-image" src="PlayStation3Console.jpg" alt="Playstation Hacks">
          <div class="text-overlay"><strong>Playstation</strong><br><em class="button-desc">Software Group</em></div>
        </a></td>
        <td class="flex-cell" colspan="2">
        <a target="_self" href="https://gitlab.com/rock-band-customs/xbox-customs">
          <img class="flex-cell-image" src="Xbox360Pro.jpg" alt="Xbox Hacks">
          <div class="text-overlay"><strong>Xbox</strong><br><em class="button-desc">Software Group</em></div>
        </a></td></tr>

        <tr><td colspan="6">
        <h2>COMMON WIKIS</h2>    
      </td></tr>
      <tr><td class="flex-cell-text" colspan="6">These are quick links to the wikis of the most commonly hacked platforms and emulators.</td></tr>
      <tr><td class="flex-cell" colspan="2">
        <a target="_self" href="https://gitlab.com/rock-band-customs/wii-vwii-dolphin/-/wikis/home">
          <img class="flex-cell-image" src="RepoWikiBook.png" alt="Wii/vWii Wiki">
          <div class="text-overlay"><strong>Wii - vWii - Dolphin</strong><br><em class="button-desc">GitLab Wiki</em></div>
        </a></td>
        <td class="flex-cell" colspan="2">
        <a target="_self" href="https://gitlab.com/rock-band-customs/playstation-customs/playstation-3/-/wikis/home">
          <img class="flex-cell-image" src="RepoWikiBook.png" alt="Playstation Wiki">
          <div class="text-overlay"><strong>Playstation 3</strong><br><em class="button-desc">GitLab Wiki</em></div>
        </a></td>
        <td class="flex-cell" colspan="2">
        <a target="_self" href="https://gitlab.com/rock-band-customs/xbox-customs/xbox-360/-/wikis/home">
          <img class="flex-cell-image" src="RepoWikiBook.png" alt="Xbox Wiki">
          <div class="text-overlay"><strong>Xbox 360</strong><br><em class="button-desc">GitLab Wiki</em></div>
        </a></td></tr>
      
        <tr><td colspan="6">
        <h1>AUTHORING GUIDES</h1>    
      </td></tr>
      <tr><td class="flex-cell-text" colspan="6">Want to make your own customs? These guides will tell you how to make all the critical files you will need in order to create your own songs for Rock Band titles!</td></tr>
      <tr><td class="flex-cell-2" colspan="3">
        <a target="_self" href="authoring-milos.html">
          <img class="flex-cell-image" src="AuthorMilo.png" alt="Author MILO">
          <div class="text-overlay"><strong>Create the MILO File</strong><br><em class="button-desc">Creating the Lipsync Data</em></div>
        </a></td>
        <td class="flex-cell-2" colspan="3">
        <a target="_self" href="">
          <img class="flex-cell-image" src="AuthorMidi.png" alt="Author MIDI">
          <div class="text-overlay"><strong>Create the MIDI File</strong><br><em class="button-desc">Creating a Properly-formatted MIDI</em></div>
        </a></td></tr>
      <tr><td class="flex-cell-2" colspan="3">
        <a target="_self" href="authoring-moggs.html">
          <img class="flex-cell-image" src="AuthorMOGG.png" alt="Author MOGG">
          <div class="text-overlay"><strong>Create the Song File (MOGG)</strong><br><em class="button-desc">Make a Multi-Track OGG File<br/></em></div>
        </a></td>
        <td class="flex-cell-2" colspan="3">
        <a target="_self" href="authoring-binks.html">
          <img class="flex-cell-image" src="AuthorBink.png" alt="Author Bink">
          <div class="text-overlay"><strong>Create the Song File (Bink)</strong><br><em class="button-desc">Make a Multi-Track Audio Bink File<br/></em></div>
        </a></td></tr>
        <tr><td class="flex-cell-2" colspan="3">
        <a target="_self" href="authoring-dtas.html">
          <img class="flex-cell-image" src="AuthorDTA.png" alt="Author DTA">
          <div class="text-overlay"><strong>Create the Database File</strong><br><em class="button-desc">Create a DTA File with a Text Editor<br/></em></div>
        </a></td>
        <td class="flex-cell-2" colspan="3">
        <a target="_self" href="https://gitlab.com/rock-band-customs/wii-vwii-dolphin/-/wikis/Authoring-Guides/Create-Custom-Album-Covers">
          <img class="flex-cell-image" src="AuthorAlbum.png" alt="Author Album Cover">
          <div class="text-overlay"><strong>Create the Album Cover</strong><br><em class="button-desc">Create an Album Cover (Wii ONLY)<br/></em></div>
        </a></td></tr>
      
    </tbody></table>

...in index.html, and in the CSS:

CSS:

/* This is for image tables that fit in certain areas. These tables flex so that the content will stay aligned. They also feature text on top of images, so that's cool. */

.flex-table {
    margin: 0 350px 0px 20px;
    z-index: 0;
   border-spacing: 10px;
   text-align: center;
   clear: none;
   column-count: 6;
   column-rule: 10px none;
}

.flex-cell {
    position: relative;
    overflow: hidden;
}

.flex-cell-2 {
    overflow: hidden;
    object-fit: fill;
}

.flex-cell-text {
  background-color: rgba(225, 255, 255, 0.8);
  border-radius: 20px;
  color: black;
  padding: 10px 30px 10px 30px;
  backdrop-filter: blur(3px);
 
}

/* Images -  */
.flex-cell-image {
    object-fit: fill;
    width: 100%;
    border-radius: 50px;
}
.flex-cell:hover {
    transition-property: filter;
    transition-duration: 0.5s;
    filter:brightness(150%);
}

/* Tables that contain info.*/

.table-info {
    width: 100%;
    background-color: rgba(255, 255, 255, .8)
}
.table-info, .table-info td {border: 2px solid;}
.table-info td {
    border-color: gray;
    padding: 5px 0 5px 0;
    text-align: center;
}

/* Headers - */

.header-cell {
  position: relative;
  overflow: hidden;
  color: gray;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
}

/* Text overlay - use as a standalone <div> within <td> */
.text-overlay {
  position: relative;
    font-family: Comic Sans MS, serif;
    color: lime;
    font-size: x-large;
    text-align: center;
    overflow: hidden;
    left: 0px;
    right: 0px;
    bottom: 100px;
    text-shadow: 0 0 10px orangered;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.button-desc {
    margin-top: 100%;
  font-size: small;
  font-weight: bold;
  color: orangered;
  text-shadow: 0 0 10px lime;
}

Makes sense, right? TL;DR, the table has a flex property, and spans six columns. Tiles of two per row span three columns, and tiles of three span two. I thought this would turn out evenly, but no: