htmlcsstabspositionforum

How can I fix my HTML/CSS code to not overlap the postbody in a PHPBB forum post


I want to make a post with HTML+CSS only where I got four tabs at the top and depending on which tab I click I see differnet content in my post. I do have a code for that, but the problem is that my tab-content overlaps the postbody.

<div class="tabs-container">
  <div class="tab-header">
    <div class="tab-content"></div>
    <div class="tabs">
      <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1">Tab 1</label>
        <div class="tab-content">Default content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-1">
        <label for="tab-2">Tab 2</label>
        <div class="tab-content">Tab 2 Content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-3" name="tab-group-1">
        <label for="tab-3">Tab 3</label>
        <div class="tab-content">Tab 3 Content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-4" name="tab-group-1">
        <label for="tab-4">Tab 4</label>
        <div class="tab-content">Tab 4 Content</div>
      </div>
    </div>
  </div>
  <style>
    .tabs {
      position: relative;
      width: 100%;
    }
    
    .tab {
      float: left;
    }
    
    .tab label {
      background: pink;
      color: #d1cec4;
      padding: 5px;
      right: 5px;
      margin-right: 10px;
      text-align: center;
      word-spacing: 3px;
      text-transform: uppercase;
      font-size: 13px;
    }
    
    .tab [type=radio] {
      display: none;
    }
    
    .tab-content {
      position: absolute;
      top: 18px;
      height: auto;
      width: 100%;
      background: blue;
      left: 0px;
      -webkit-transform: scale(0);
      -o-transform: scale(0);
      -moz-transform: scale(0);
    }
    
    [type=radio]:checked~label {
      background: transparent;
      z-index: 2;
      color: #494949;
    }
    
    [type=radio]:checked~label~.tab-content {
      z-index: 1;
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      -moz-transform: scale(1);
    }
  </style>
</div>

This is my code.

I tried removing the Absolute height for the content box, but then my tabs are not at the top anymore, because every tabs-content comes right after its tab-button, instead of all the Tab-Buttons being at the top.

This is how that code looks like:

<div class="tabs-container">
  <div class="tabs-wrapper">
    <div class="tabs-header">
      <div class="tab">
        <input type="radio" id="tab-1" name="tab-group" checked>
        <label for="tab-1">Tab 1</label>
        <div class="tab-content">Tab 1 content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-2" name="tab-group">
        <label for="tab-2">Tab 2</label>
        <div class="tab-content">Tab 2 content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-3" name="tab-group">
        <label for="tab-3">Tab 3</label>
        <div class="tab-content">Tab 3 content</div>
      </div>
      <div class="tab">
        <input type="radio" id="tab-4" name="tab-group">
        <label for="tab-4">Tab 4</label>
        <div class="tab-content">Tab 4 content</div>
      </div>
    </div>
  </div>

  <style>
    .tabs-header {
      position: relative;
      width: 100%;
    }
    
    .tab {
      float: left;
    }
    
    .tab label {
      background: pink;
      color: #d1cec4;
      padding: 5px;
      margin-right: 10px;
      text-align: center;
      word-spacing: 3px;
      text-transform: uppercase;
      font-size: 13px;
    }
    
    .tab [type=radio] {
      display: none;
    }
    
    .tab-content {
      display: none;
      padding: 10px;
      background: blue;
      width: 100%;
      left: 0px;
      box-sizing: border-box;
    }
    
    [type=radio]:checked+label+.tab-content {
      display: block;
    }
    
    .tabs-header::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</div>

I also asked ChatGPT multiple times to fix it somehow, but nothing works so far.


Solution

  • Either you set a fixed height, or lose the absolute. In order to do that and keep the design, I changed the markup to use only one .tab-content area.

    <div class="tabs-container">
      <div class="tab-header">
    
        <div class="tabs">
          <input type="radio" id="tab-1" name="tab-group-1" checked>
          <label for="tab-1" class="tab-label">Tab 1</label>
    
          <input type="radio" id="tab-2" name="tab-group-1">
          <label for="tab-2" class="tab-label">Tab 2</label>
    
          <input type="radio" id="tab-3" name="tab-group-1">
          <label for="tab-3" class="tab-label">Tab 3</label>
    
          <input type="radio" id="tab-4" name="tab-group-1">
          <label for="tab-4" class="tab-label">Tab 4</label>
    
          <div class="tab-content">
            <div class="content" data-tab-content="tab-1">Default content</div>
            <div class="content" data-tab-content="tab-2">Tab 2 Content</div>
            <div class="content" data-tab-content="tab-3">Tab 3 Content</div>
            <div class="content" data-tab-content="tab-4">Tab 4 Content</div>
          </div>
        </div>
      </div>
    
      <br>
      <p>This content appears below the tabs.</p>
    
      <style>
        .tabs {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          border-bottom: 2px solid #ddd;
          padding-bottom: 5px;
        }
        
        .tab-label {
          background: pink;
          color: #494949;
          padding: 5px;
          margin-right: 10px;
          text-align: center;
          text-transform: uppercase;
          font-size: 13px;
          cursor: pointer;
          display: inline-block;
        }
        
        .tab-content {
          margin-top: 10px;
          background: blue;
          color: white;
          padding: 10px;
          width: 100%;
        }
        
        .content {
          display: none;
        }
        
        #tab-1:checked~.tab-content [data-tab-content="tab-1"],
        #tab-2:checked~.tab-content [data-tab-content="tab-2"],
        #tab-3:checked~.tab-content [data-tab-content="tab-3"],
        #tab-4:checked~.tab-content [data-tab-content="tab-4"] {
          display: block;
        }
        
        [type=radio]:checked+.tab-label {
          background: yellow;
        }
        
        .tabs [type=radio] {
          display: none;
        }
      </style>
    </div>