Pagina 1 din 1

Problema Tabs efect cu CSS - redimensionare dupa Content

Scris: Joi Mai 15, 2014
de General
Tab ar trebui sa isi modifice dimensiunile in depenta de ce text este in el insa el nu se modifica, puteti sa ma ajutati? :)
content este locul unde stau textele si acolo i-am pus height: 100% dar nu merge.
Asta e codul html:

Cod: Selectaţi tot

<div class="tabs">
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Descriere</label>
       <div class="content">
           <p align="justify">Un text<br></p>
       </div> 
   </div>
    
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Test1</label>
       <div class="content">
           <p align="justify">
     Un text oarecare
</p>
       </div> 
   </div>
    
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Test2</label>
       <div class="content">
           <p align="justify">
   Un text oarecare
 </div>     
		   </p>
   </div>
   
   <div class="tab">
       <input type="radio" id="tab-4" name="tab-group-1">
       <label for="tab-4">Test3</label>
       <div class="content">
           <p>Text</p>
       </div> 
   </div>
   
    <div class="tab">
       <input type="radio" id="tab-5" name="tab-group-1">
       <label for="tab-5">Test4</label>
       <div class="content">
           <p align="justify">
                    Text
		   </p>
       </div> 
   </div>  
</div>
Acesta e codul css:

Cod: Selectaţi tot

.tabs {
  position: relative;
  min-height: 400px; 
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
}
.tab [type=radio] {
  display: none;
}
.content {
  position: absolute;
  height: 100%;
  top: 28px;
  left: 0;
  background: #f8f8f8;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}
Desi poate nu m-am exprimat eu corect, eu din toata chestia asta, vreau sa primesc ceva de genul cum aici (numai ca eu nu folosesc aici jquery ci numai css):
jqueryui.com/tabs/

Problema Tabs efect cu CSS - redimensionare dupa Content

Scris: Vin Mai 16, 2014
de MarPlo
Salut
Incearca fara proprietatile "height" si "bottom" la .content.
Adica asa:

Cod: Selectaţi tot

.content {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  background: #f8f8f8;
  border: 1px solid #ccc;
  padding: 20px;
}
- Edit: Aici -> Tabs effect with CSS e un exemplu functional.