yatay sekmeleri dikey hale getir (sadece HTML ve CSS'ler, js yok)

Question

Solda değil, solda sekmeler içeren basit bir portal oluşturmaya çalışıyorum. İdeal olarak, bunu herhangi bir javascript olmadan yapmak istiyorum; Sadece HTML5 & CSS3 ile. http://jsfiddle.net/Juggler/9Ue9j/2/

<div id="page-wrap"> 
    <div class="tabs"> 
     <div class="tab"> 
      <input type="radio" id="tab-1" name="tab-group-1" checked> 
      <label for="tab-1">Tab One</label> 
      <div class="content"> 
       <p>Stuff for Tab One</p> 
      </div> 
     </div> 
     <div class="tab"> 
      <input type="radio" id="tab-2" name="tab-group-1"> 
      <label for="tab-2">Tab Two</label> 
      <div class="content"> 
       <p>Stuff for Tab Two</p> 
      </div> 
     </div> 
     <div class="tab"> 
      <input type="radio" id="tab-3" name="tab-group-1"> 
      <label for="tab-3">Tab Three</label> 
      <div class="content"> 
       <p>Stuff for Tab Three</p> 
      </div> 
     </div> 
    </div> 
</div> 

ve

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    background: #999; 
} 
#page-wrap { 
    width: 1024px; 
    height: 768px; 
} 
    .tabs { 
     position: relative; 
     min-height: 200px; /* This part sucks */ 
     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; 
     top: 28px; 
     left: 0; 
     background: white; 
     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; 
    } 

I--webkit dönüşümü çalışıyordu: Ben yatay sekmeler için aşağıdaki kodla oynuyorum

döndürme (-90deg); ancak doğru unsuru yakalayamadılar. Birinin beni doğru yönde yönlendirmesine yardımcı olabilirsiniz.

Answer 1

Working DEMO

content & label

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    background: #999; 
} 
#page-wrap { 
    width: 1024px; 
    height: 768px; 
} 
    .tabs { 
     position: relative; 
     min-height: 200px; /* This part sucks */ 
     clear: both; 
     margin: 25px 0;  
    } 
    .tab { 
     /*float: left; */  
     height: 41px; 
    } 
    .tab label { 
     background: #eee; 
     padding: 10px; 
     border: 1px solid #ccc; 
     margin-left: -1px; 
     position: relative; 
     left: 1px;   
     width: 70px; 
     display: block; 
    } 
    .tab [type=radio] { 
     display: none; 
    } 
    .content { 
     position: absolute; 
     top: 0px; 
     left: 92px; 
     background: white; 
     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; 
    } 

için biraz CSS Tweaked