0

Galera montei um um container e um sistema de abas utilizando css, porém estou com problemas para colocar as abas dentro do container.

Meu problema é que o container não acompanha o tamanho das abas, alguém sabe o que esta errado?
Segue o código:

.container {
    border-radius: 4px;
    background:#d7d7d7;
    margin: 0 auto 10px;
    width: 900px;
}
.container-head {
    display: table;
    width: 100%;
    color: #fff;
   background:#000;
    border-radius: 4px 4px 0 0;
    height: 65px;
}
.container-head span {
  display: table-cell;
  vertical-align: middle;
  padding: 20px;
}
.container-body {
    padding: 20px;
  background:#d7d7d7;
}    
.container-body_grafico {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}
.hidden-page {
    width: 100%;
    height: 100%;
    position:fixed;
    z-index: 999;
    background: #FFFFFF;
    padding-top: 30px;
}
.container-footer {
    border-top: 1px solid #D7D7D7;
    height: 45px;
    padding-left: 10px;
    padding-right: 10px;
}
.container-footer button {
    float: right;
}
.container-footer .txt {
    float: left;
    margin-top: 12px;
}
/* Container das ABAS */
.tabs-container {
    position: relative;
    top: 3px;
}
/* ABAS */
input.tabs {
    display: none;
}
input.tabs + label + div {
    width: 100%;
    opacity: 0;
    position: absolute;
    border: 1px solid #0091FF;
    top: 40px;
    background-color: #FFFFFF;
}
input.tabs + label + div {
    z-index: -1;
}
input.tabs:checked + label + div {
    opacity: 1;
    z-index: 1;
}
.tabs_conteudo {
    margin: 20px;
}
/* Labels */
input.tabs + label {
    line-height: 40px;
    padding: 0 20px;
    float: left;
    color: #484848;
    cursor: pointer;
    margin-right: 1px;
}
input.tabs + label:hover {
    border-radius: 4px 4px 0px 0px;
    background: #FBBC05;
    color: #FFFFFF;
}
input.tabs + label:active {
    background: #FFAB00;
}
input.tabs:checked + label {
    border-radius: 4px 4px 0px 0px;
    background: #0091FF;
    color: #FFFFFF;
}
<!-- Container -->
    <div class="container">
        <div class="container-head">
            <span>NOVO CADASTRO</span>
        </div>
        <div class="container-body">
           
            <!-- Abas -->
            <div class="tabs-container">
                <!-- ABA 1 -->
                <input type="radio" name="tabs" class="tabs" id="tab1" checked>
                <label for="tab1">DADOS CADASTRO</label>
                <div>
                    <div class='tabs_conteudo'>
            
                        asdasdasdasdasd
                    </div>
                </div>
                
                <!-- ABA 2 -->
                <input type="radio" name="tabs" class="tabs" id="tab2">
                <label for="tab2">DADOS CADASTRO</label>
                <div>
                    <div class='tabs_conteudo'>
            
                        asdasdasdasdasd<br><br>dfasdfsadfasdf
                    </div>
                </div>
            </div>
            
            
            
        </div>
    </div>

3
  • Qual era o resultado esperado Hugo ? Commented 5/08/2016 às 18:21
  • o container possui background cinza, e eu coloquei as abas dentro dela. Repara que o contarei não acompanha o tamanho das abas Commented 5/08/2016 às 18:24
  • Você quer que o background cinza apareça ? Commented 5/08/2016 às 18:28

1 Resposta 1

-1

Você pode resolver seu problema assim:

.container {
  border-radius: 4px;
  background: #d7d7d7;
  margin: 0 auto 10px;
  width: 900px;
}
.container-head {
  display: table;
  width: 100%;
  color: #fff;
  background: #000;
  border-radius: 4px 4px 0 0;
  height: 65px;
}
.container-head span {
  display: table-cell;
  vertical-align: middle;
  padding: 20px;
}
.container-body {
  /*padding: 20px;*/ /*COMENTEI ESSA LINHA*/
  background: #d7d7d7;
  width: 100%; /*ADICIONEI ESSA LINHA*/
}
.container-body_grafico {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
}
.hidden-page {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  background: #FFFFFF;
  padding-top: 30px;
}
.container-footer {
  border-top: 1px solid #D7D7D7;
  height: 45px;
  padding-left: 10px;
  padding-right: 10px;
}
.container-footer button {
  float: right;
}
.container-footer .txt {
  float: left;
  margin-top: 12px;
}
/* Container das ABAS */

.tabs-container {
  position: relative;
  top: 3px;
}
/* ABAS */

input.tabs {
  display: none;
}
input.tabs + label + div {
  width: 100%;
  opacity: 0;
  position: absolute;
  border: 1px solid #0091FF;
  top: 40px;
  background-color: #FFFFFF;
}
input.tabs + label + div {
  z-index: -1;
}
input.tabs:checked + label + div {
  opacity: 1;
  z-index: 1;
}
.tabs_conteudo {
  margin: 20px;
}
/* Labels */

input.tabs + label {
  line-height: 40px;
  padding: 0 20px;
  float: left;
  color: #484848;
  cursor: pointer;
  margin-right: 1px;
}
input.tabs + label:hover {
  border-radius: 4px 4px 0px 0px;
  background: #FBBC05;
  color: #FFFFFF;
}
input.tabs + label:active {
  background: #FFAB00;
}
input.tabs:checked + label {
  border-radius: 4px 4px 0px 0px;
  background: #0091FF;
  color: #FFFFFF;
}
<!-- Container -->
<div class="container">
  <div class="container-head">
    <span>NOVO CADASTRO</span>
  </div>
  <div class="container-body">

    <!-- Abas -->
    <div class="tabs-container">
      <!-- ABA 1 -->
      <input type="radio" name="tabs" class="tabs" id="tab1" checked>
      <label for="tab1">DADOS CADASTRO</label>
      <div>
        <div class='tabs_conteudo'>

          asdasdasdasdasd
        </div>
      </div>

      <!-- ABA 2 -->
      <input type="radio" name="tabs" class="tabs" id="tab2">
      <label for="tab2">DADOS CADASTRO</label>
      <div>
        <div class='tabs_conteudo'>

          asdasdasdasdasd
          <br>
          <br>dfasdfsadfasdf
        </div>
      </div>
    </div>



  </div>
</div>

1
  • não deu certo, o que eu quero e que a div container-body acompanhe o tamanho da tabs-container. Parece que a div tabs-container esta flutuando em cima da div container-body Commented 5/08/2016 às 18:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .