Вкладки CSS оборачиваются вокруг правой стороны DIV с преобразованием текста (вращением)?

Question

Я хотел бы иметь вкладки в верхней части страницы, и если для этих вкладок недостаточно места, вкладки будут обтекать этот DIV и преобразовываться в текст для поворота на 90 градусов. Моя страница представляет собой CSS жидкий дизайн, который гибок в зависимости от размера окна. Я не хотел бы использовать изображения, так как текст вкладки будет заполняться из базы данных. Ниже приведен скриншот, который я хотел бы выполнить. Я также использую PHP, поэтому, если нужно, я мог бы создать некоторые операторы IF / THEN. Я бы предпочел не использовать Javascript.

Если окно открыто широко, отобразить как:

Если окно открыто узко, отобразить как:

Я хотел бы использовать Listamatic (http://css.maxdesign.com.au/listamatic/horizontal05.htm) и как-то обновить его, чтобы учесть этот новый эффект обтекания с преобразованием текста. Возможно ли это?

Вот часть CSS, которая может работать:

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

Обновление: 13.12.2011: CSS - заставить дочерний DIV увеличить ширину страницы?

Minitech: Спасибо за понимание и пример Javascript. Чтобы решить проблему с вкладками, я решил попробовать другой подход.

Я работаю над редактируемой навигацией. Пользователь может добавить много вкладок в верхней части, как они хотят. В случае если имеется много вкладок, из-за которых набор вкладок будет разбит / перенесен на следующую строку, я бы хотел перенести его на 1 строку, даже если это означает, что ширина страницы будет значительно увеличиваться.

Есть ли способ для дочернего DIV увеличить ширину страницы, даже если содержимое находится в обертке? В моей ссылке на JS Fiddle ниже у меня есть простая страница-обертка с правильным sidenav. Я использую вкладки Listamatic (http://css.maxdesign.com.au/listamatic/horizontal05.htm) для верхней части. Как вы можете видеть, вкладки разбиваются на множество строк вкладок, и это выглядит не очень хорошо. Могу ли я использовать немного CSS, чтобы заставить DIV не переносить на 2-ю или 3-ю строку? Мне бы хотелось, чтобы 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 так, как вам нужно.