CSS 탭은 DIV의 오른쪽을 텍스트 변환 (회전)으로 둘러 쌉니?

Question

페이지 상단에 탭이 있고 그 탭을위한 공간이 충분하지 않은 경우 탭은 해당 DIV를 둘러싼 다음 90도 회전하도록 텍스트 변형됩니다. 내 페이지는 창 크기에 따라 유연한 CSS 액체 디자인입니다. 탭 텍스트는 데이터베이스에서 채워지기 때문에 이미지를 사용하고 싶지 않습니다. 아래는 내가 성취하고자하는 스크린 샷입니다. 또한 PHP를 사용하고 있으므로 필요한 경우 IF/THEN 문을 작성할 수 있습니다. 나는 자바 스크립트를 사용하지 않는 것을 선호한다.

윈도우 인 경우 활짝 열려, 디스플레이 등 :

윈도우 인 경우로 개방 좁은 디스플레이 : 나는 Listamatic (http://css.maxdesign.com.au/listamatic/horizontal05.htm)를 사용하고 싶습니다

및 어떻게 든 그것을 텍스트 변환과 함께 새로운 포장 효과를 허용하도록 업데이트하십시오. 이것이 가능한가? 여기

작동 수있는 CSS의 일부입니다

.sidetabs { 
-moz-transform: rotate(-90deg); 
-webkit-transform: rotate(-90deg); 
transform: rotate(-90deg); 
} 

업데이트 : 12/13/2011 : CSS - 페이지 너비를 확장 자식 DIV를 강제로?

Minitech : 통찰력 및 자바 스크립트 예제를 가져 주셔서 감사합니다. 노력하면서, 내 탭 문제를 해결하기 위해 다른 접근법을 시도해 볼 수도 있다고 생각했습니다.

편집 가능한 탐색 기능을 찾고 있습니다. 사용자는 원하는대로 상단에 여러 개의 탭을 추가 할 수 있습니다. 탭 집합을 다음 줄로 나누거나 줄 바꿈하는 많은 탭이있는 경우 페이지 너비가 크게 늘어날지라도이 줄을 강제로 한 줄에 넣고 싶습니다.

콘텐츠가 래퍼에 있어도 하위 DIV가 페이지 너비를 확장 할 수있는 방법이 있습니까? 아래의 JS Pied 링크에서 sidenav가있는 간단한 래퍼 페이지가 있습니다. 상단에 Listamatic 탭 (http://css.maxdesign.com.au/listamatic/horizontal05.htm)을 사용하고 있습니다. 보시다시피, 탭은 많은 행의 탭으로 나누어 져 있으며보기가 좋지 않습니다. CSS를 사용하여 DIV가 두 번째 줄 또는 세 번째 줄로 넘어 가지 않도록 할 수 있습니까? DIV는 탭 수 (및 탭 텍스트의 텍스트 길이)에 따라 유동적이되고 싶습니다. 어떤 아이디어? 이 서버 측 스크립트 언어이기 때문에

http://jsfiddle.net/zenfiddle/yUPCC/3/

Answer 1

글쎄, 내가 아는 한, 즉, 완전히 CSS를 사용 불가능뿐만 아니라 PHP를 사용합니다. 이 경우에는 JavaScript를 사용해야하며 당연히 모든 것을 똑같이 저하시켜야합니다.

간단한 방법은 offsetTop을 사용하여 배치 요소를 확인하는 것입니다. 이런 식으로 뭔가 (당신이 것을 사용하는 경우 위치를 조정해야합니다) : 당신이 필요하지만

var navigation = document.getElementsByTagName('nav')[0].getElementsByTagName('a'); // Or however you want to do this 
var i, element; 

for(i = 0; element = navigation[i]; i++) { 
    if(element.offsetTop > 0) { 
     // It's a wrapping element 
     element.className = element.className ? element.className + ' side-tab' : 'side-tab'; 
    } 
} 

그런 다음 nav a (예를 들어)와 nav a.side-tab 스타일을 지정할 수 있습니다.