System of tabs in CSS with 2 lines of tabs - code using "float"

Question

System of tabs in CSS with 2 lines of tabs - code using "float"

Navigation

#1 by (4 votes)
#2 by (2 votes)

-1

I am using the code below for a form with multiple "tabs", and I would like tabs 1-4 to appear above tabs 5-8 on two lines. However, tabs 1-4 appear normally, but tabs 5-8 are truncated, they do not appear on the bottom line as I would expect to be float.

Could you help me change the code, so that the 5-8 tabs appear below the 1-4 tabs, as in this image?

Hereisthecode:

.nav_tabs{
  width: 500px;
  height: 400px;
  margin: 5px 0;
  position: relative;
}

.nav_tabs ul{
  list-style: none;
}

.nav_tabs ul li{
  float: left;
}

.tab_label{
  display: block;
  width: 100px;
  background-color: #D8D8D8;
  padding: 2px;
  font-size: 16px;
  color:black;
  cursor: pointer;
  border-right: solid 1px #A4A4A4;
  text-align: center;
}

.nav_tabs .rd_tab { 
  display:none;
  position: absolute;
}

.nav_tabs .rd_tab:checked ~ label { 
  background-color: #08298A;
  color:#fff;
  border: none;
}

.tab-content{
  border-top: solid 5px #08298A;
  background-color: #fff;
  display: none;
  position: absolute;
  height: 300px;
  width: 420px;
  left: 40px;	
}

.rd_tab:checked ~ .tab-content{
  display: block;
}

<nav class="nav_tabs">
  <ul>
    <li>
      <input type="radio"  class="rd_tab" id="tab1" name="tabs" checked>
      <label for="tab1" class="tab_label">ABA 1</label>
      <div class="tab-content">
          Conteúdo Aba 1
      </div>
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab2" name="tabs">
      <label for="tab2" class="tab_label">ABA 2</label>
      <div class="tab-content">  
        Conteúdo Aba 2		
        </div>
    </li>	
    <li>
      <input type="radio" class="rd_tab" id="tab3" name="tabs">
      <label for="tab3" class="tab_label">ABA 3</label>
      <div class="tab-content">  
        Conteúdo Aba 3			
        </div>
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab4" name="tabs">
      <label for="tab4" class="tab_label">ABA 4</label>
      <div class="tab-content">  
        Conteúdo Aba 4		
      </div>
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab5" name="tabs">
      <label for="tab5" class="tab_label">ABA 5</label>
      <div class="tab-content">  
        Conteúdo Aba 5		
      </div>
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab6" name="tabs">
      <label for="tab6" class="tab_label">ABA 6</label>
      <div class="tab-content">  
        Conteúdo Aba 6		
      </div>
    </li> 
    <li>
      <input type="radio" class="rd_tab" id="tab7" name="tabs">
      <label for="tab7" class="tab_label">ABA 7</label>
      <div class="tab-content">  
        Conteúdo Aba 7		
      </div>
    </li> 
    <li>
      <input type="radio" class="rd_tab" id="tab8" name="tabs">
      <label for="tab8" class="tab_label">ABA 8</label>
      <div class="tab-content">  
        Conteúdo Aba 8		
      </div>
    </li> 	
   </ul>
 </nav>

html css

asked by anonymous 26.03.2018 / 14:08

2 answers

4

A very simple solution is to separate the UL from the contents and their checkboxes.

The base is the example below, I did not stylize you to see clearly that the content "floats" and works no matter the number of tabs or lines (I even forced the wrap with <br> to make it easier to understand):

.aba > input {display:none}
.aba > input + div {display:none}
.aba > input:checked + div {display:block}

<label for="conteudo1">ABA1</label>
<label for="conteudo2">ABA2</label>
<label for="conteudo3">ABA3</label><br>
<label for="conteudo4">ABA4</label>
<label for="conteudo5">ABA5</label>
<label for="conteudo6">ABA6</label><br>
<label for="conteudo7">ABA7</label>
<label for="conteudo8">ABA8</label>
<label for="conteudo9">ABA9</label><br>

<div class="aba"><input type="radio" id="conteudo1" name="abas"><div>Um</div></div>
<div class="aba"><input type="radio" id="conteudo2" name="abas"><div>Dois</div></div>
<div class="aba"><input type="radio" id="conteudo3" name="abas"><div>Tres</div></div>
<div class="aba"><input type="radio" id="conteudo4" name="abas"><div>Quatro</div></div>
<div class="aba"><input type="radio" id="conteudo5" name="abas"><div>Cinco</div></div>
<div class="aba"><input type="radio" id="conteudo6" name="abas"><div>Seis</div></div>
<div class="aba"><input type="radio" id="conteudo7" name="abas"><div>Sete</div></div>
<div class="aba"><input type="radio" id="conteudo8" name="abas"><div>Oito</div></div>
<div class="aba"><input type="radio" id="conteudo9" name="abas"><div>Nove</div></div>

The code above is a fairly clean base, but since everything is separate, you're totally free to style and restructure HTML for just about any situation. The restriction is not having how to style the selected tab. For this, see below:

Using the `~` selector and styling the selected tab

If you want to style the selected tab, best keep the radiobutton next to the flap. In this case, the general selector ~ brother helps:

.abas input {display:none}
.abas input:checked + label {color:red}
.abas .conteudo {display:none}

#aba1:checked ~ .c1,
#aba2:checked ~ .c2,
#aba3:checked ~ .c3,
#aba4:checked ~ .c4
  {display:block}

<div class="abas">
  <input type="radio" name="abas" id="aba1"><label for="aba1">ABA1</label>
  <input type="radio" name="abas" id="aba2"><label for="aba2">ABA2</label><br>
  <input type="radio" name="abas" id="aba3"><label for="aba3">ABA3</label>
  <input type="radio" name="abas" id="aba4"><label for="aba4">ABA4</label>
  <br>----------<br>
  <div class="conteudo c1">Um</div>
  <div class="conteudo c2">Dois</div>
  <div class="conteudo c3">Tres</div>
  <div class="conteudo c4">Quatro</div>
 </div>

In this case, the "against" points are that% content% must be at the same level as div s, since the input selector will not work with nesting, and to avoid too much complexity in the selectors , I preferred to leave each tab with a separate class. It probably would not be scalable to 1000 tabs in hand-crafted HTML, but it's probably not going to happen in a real-life situation, and if it does, you're almost sure to be generating HTML dynamically, which simplifies everything.

26.03.2018 / 16:34

A register of people in python Asp.net Identity Decrypt

score 2 · Accepted Answer

The bottom list is not being displayed, because the contents of the upper tabs are overlapping them.

Then you will need content out of ul , but when you do this, you will not be able to change the visibility of content by just using CSS .

Secondly, because of a float:left fault, it is necessary to apply a clearfix so that ul has its size corrected.

The last adjustment was only on the borders of ul , to approximate the contents of it.

As well as applying a box-sizing to the labels to make the borders harmonious.

var atual;
var contents = document.querySelectorAll("[data-tab]")
var onRadioChange = function (event) {
  if (atual) atual.content.classList.toggle("show", atual.radio.checked)
  this.content.classList.toggle("show", this.radio.checked)
  atual = this
};

[].forEach.call(contents, function (content) {
  var obj = {};
  obj.content = content
  obj.radio = document.getElementById(content.dataset.tab)
  obj.radio.addEventListener("change", onRadioChange.bind(obj))
  if (obj.radio.checked) {  
    obj.radio.dispatchEvent(new Event("change"))
  }
})

.nav_tabs{
  width: 500px;
  height: 400px;
  margin: 5px 0;
  position: relative;
}

.nav_tabs ul:before,
.nav_tabs ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.nav_tabs ul:after {
    clear: both;
}

.nav_tabs ul{
  margin-bottom: 0px;
  list-style: none;
}

.nav_tabs ul li{  
  float: left;
}

.tab_label{
  box-sizing: border-box;
  display: block;
  width: 105px;
  background-color: #D8D8D8;
  padding: 2px;
  font-size: 16px;
  color:black;
  cursor: pointer;
  border-right: solid 1px #A4A4A4;
  text-align: center;
}

.nav_tabs .rd_tab { 
  display:none;
  position: absolute;
}

.nav_tabs .rd_tab:checked ~ label { 
  background-color: #08298A;
  color:#fff;
  border: none;
}

.tab-content{
  border-top: solid 5px #08298A;
  background-color: #fff;
  display: none;
  position: absolute;
  height: 300px;
  width: 420px;
  left: 40px;	
  margin-bottom: 5px
}

.tab-content.show {
  display: block;
}

<nav class="nav_tabs">  
  <ul>
    <li>    
      <input type="radio"  class="rd_tab" id="tab1" name="tabs" checked>
      <label for="tab1" class="tab_label">ABA 1</label>      
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab2" name="tabs">
      <label for="tab2" class="tab_label">ABA 2</label>      
    </li>	
    <li>
      <input type="radio" class="rd_tab" id="tab3" name="tabs">
      <label for="tab3" class="tab_label">ABA 3</label>
      
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab4" name="tabs">
      <label for="tab4" class="tab_label">ABA 4</label>
      
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab5" name="tabs">
      <label for="tab5" class="tab_label">ABA 5</label>
      
    </li>
    <li>
      <input type="radio" class="rd_tab" id="tab6" name="tabs">
      <label for="tab6" class="tab_label">ABA 6</label>
      
    </li> 
    <li>
      <input type="radio" class="rd_tab" id="tab7" name="tabs">
      <label for="tab7" class="tab_label">ABA 7</label>
      
    </li> 
    <li>
      <input type="radio" class="rd_tab" id="tab8" name="tabs">
      <label for="tab8" class="tab_label">ABA 8</label>      
    </li> 	
   </ul>
   <div class="tab-content" data-tab="tab1">
      Conteúdo Aba 1
   </div>
   <div class="tab-content" data-tab="tab2">  
      Conteúdo Aba 2		
   </div>
   <div class="tab-content" data-tab="tab3">  
      Conteúdo Aba 3			
   </div>
   <div class="tab-content" data-tab="tab4">  
      Conteúdo Aba 4		
   </div>
   <div class="tab-content" data-tab="tab5">  
      Conteúdo Aba 5		
   </div>
   <div class="tab-content" data-tab="tab6">  
      Conteúdo Aba 6		
   </div>
   <div class="tab-content" data-tab="tab7">  
      Conteúdo Aba 7		
   </div>
   <div class="tab-content" data-tab="tab8">  
      Conteúdo Aba 8		
   </div>
 </nav>

System of tabs in CSS with 2 lines of tabs - code using "float"

2 answers

Using the ~ selector and styling the selected tab

Using the `~` selector and styling the selected tab