На сколько оправдано применение JavaScript в тех или иных случаях, собственно и не вопрос даже. Каждый выбирает сам для себя. Другое дело, размер самого скрипта. Многие, часто создавая или используя готовые решения, мало заботятся о соотношении необходимо и достаточно. Таскаю туда сюда целые библиотеки огромного объема.

А надо ли?

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

В комментариях к указанной статье, приводил ссылку, на свое решение, правда, это слишком сильно сказано, моего там кроме, как оформления ничего и нет.

Собственно, как человек весьма далекий от программирования, мозги видимо, не так устроены, предпочитаю пользоваться рекомендациями и решениями, которые предлагают более грамотные в этой области люди.

Сотрудничество с Мастером Lasto, а это для меня лично, всегда приносит свои положительные плоды, в работе над одним из его проектов, пока не закончен, в качестве "Господина оформителя" :), была затронута и эта тема.

И, как частный случай из сделанного там, предлагаю вашему вниманию скрипт решающий поставленную задачу минимальными средствами.

JavaScript

  <script type="text/javascript">
    function showPanel(id) {
      for (i=1; i < 2+1; i++)
     document.getElementById("item"+i).style.display='none';
     document.getElementById(id).style.display='block';
  }
  </script>

Посмотрим и пример, ссылка - вкладка-табулятор.

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

В конце концов, у любого достаточно долго практикующего верстальщика в запасниках найдется не мало поучительного, но, к сожалению не многие спешат поделиться своими наработками. Большинство почему-то предпочитает в 1005 раз написать про глобальный reset.css и прочие не менее значимые вещи :)

Но вот ведь какая штука, очень мало действительно стоящих статей посвященных разметке, а без оптимизации общих подходов к созданию web-страницы, все в общем-то теряет свой смысл, не правда ли?

В очередной раз оседлаем излюбленный конек автора – одинаковую высоту колонок. Нет ни одного ресурса, ни в Рунете, ни за бугром, где бы эта тема раскрывалась столь полно и подробно и была подкреплена массой практических примеров.

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

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

html-код ничем не отличается от приведенного в "Super Holy Grail Gordi" и "Импровизация на заданную тему". Часть стилей тоже оттуда. Реализация иллюзии одинаковой высоты колонок выполнена на основе техники:

margin-bottom:-32767px;padding-bottom:32767px;

Многие не вполне обоснованно с предубеждением относятся к решениям на ее основе. Но это говорит только о том, что некоторые персонажи, не умеют и не знают, как бороться с проблемой бесконечной вертикальной прокрутки, иногда возникающей при не удачном сочетании стилевых правил, не относящихся собственно к стилям глобальной разметки.

Тут только практика и поиск иных приемов для создания того, что вам насущно необходимо. Главное помнить, выбор всегда есть, а "Каскадные таблицы стилей" помогу вам в этом наилучшим образом.

html

<div id="middle">
  <div class="wrap">
    <div class="content">Middle Content</div>
    <div class="left">Middle Left</div>
    <div class="right">Middle Right</div>
  </div>
</div>

html-код и стили для каждого варианта продублированы на тестовых страницах.

Краткий комментарий, в чем же соль "Идеала Gordi…".

• html-код, использованный в данной статье, полностью повторяет код по выше приведенным ссылкам, и дает толику универсальности представленным макетам, о нюансах и разночтениях поговорим в рамках концепции "Техника Gordi". Предполагаемый цикл статей будет опубликован чуть позже.
• Одинаковая высота колонок, каждой независимый цвет или background:url, не обязательно на всю ширину колонок, иногда узенькая вертикальная линия, выполненная графикой, бывает очень к месту.
• Все, то что не вмещается по ширине в тут или иную колонку обрезается без нарушения макета.
• Возможность простыми средствами достичь сто процентной высоты страницы с включением шапки и подвала.
• В связи с проблемным отображением вертикальных линий (border) в FireFox3, отделяющих область контента от колонок навигации, реализовано создание ложных вертикальных линий. На любителя. Приведено с целью, показать возможности разметки.
• Макет имеет регулируемый параметр min/max-width и его эмуляцию через expression для IE6, это в конечном счете позволяет получить не только резиновую область контента, но не исключает такой же возможности для колонок навигации.
• Минимум html-кода и стилей.
• Легкая трансформация разметки в макеты с другим расположением колонок навигации относительно области котента.

Протестировано в IE6(7), OPERA9.23(9.5), FF2.xx(3), SafariWin, Google Chrome.

Проблема предварительного просмотра печати и сама печать в IE6(7) остается не решенной.

Смотрим примеры, относящиеся к данной статье.

В комментариях к статье "Одинаковая высота колонок – border" был поднят вопрос об индивидуальном цвете колонок отведенных под навигацию. Вернее, если я правильно понял данное замечание, это касалось только двух макетов, а именно, колонки навигации находятся рядом друг с другом и расположены слева или справа от области контента. Там же приводился линк, где нечто подобное было сделано.

Не в даваясь в подробный анализ, замечу, что реализация разноцветных колонок выполнена довольно не уклюже. Задача решалась в лоб и нет изящности присущей грамотному использованию "Каскадных таблиц стилей". Масса дополнительных контейнеров, трудности создания макетов с иным расположением колонок навигации. Судя по всему, разметка затачивалась под конкретный проект и цели достичь некой универсальности, не ставилась.

Но не будем слишком строги :)

По ссылке приведенной в начале поста, мной было представлено, как и каким образом можно решить проблему различного расположения колонок навигации относительно области контента при использовании данной техники, и приведенные примеры убедительно говорят сами за себя.

Теперь же поговорим о возможности раскрасить макет, как распущенный павлиний хвост :), хотя, цветовая гамма выбранная вами, для разнообразия, явно не помешает. Тем более что для подобных фокусов нет необходимости привлекать дополнительную разметку в виде N-го количества абсолютно не нужных блоков.

html-код из указанной статьи без всяких изменений, хотя разговор пойдет только о двух макетах, но по традиции в заключение статьи вы сможете посмотреть все пять примеров, дополненных, так нужной кому-то эмуляцией nim/max-width для IE6 :)

Необходимые манипуляции для получения нужного результата.

Стили до :

#middle {
  margin:3px auto;
  min-width:910px;
  max-width:960px;
}
*html #middle {width:960px;}
.wrap {
  background-color:#fff;
  border-left:#eee 400px solid;
  height:100%;
}
.wrap:after {content:'';clear:both;display:block;}
.content,
.left,
.right {float:left;overflow:hidden;position:relative;}
.content {margin-right:-100%;width:100%;}
.left {margin-right:-100%;width:200px;left:-400px;}
.right {margin-right:-200px;left:-200px;width:200px;}

Стили после :

#middle {
  background-color:#ddd;
  margin:3px auto;
  min-width:910px;
  max-width:960px;
}
*html #middle {width:expression(
  (document.compatMode && document.compatMode == 'CSS1Compat') ?
  (document.documentElement.clientWidth < 910 ? "910px":
  (document.documentElement.clientWidth > 960 ?"960px" :"auto")) :
  (document.body.clientWidth < 910 ? "910px" :
  (document.body.clientWidth > 960 ? "960px" :"auto")));
}
.wrap {
  background-color:#fff;
  border-left:#eee 200px solid;
  margin-left:200px;
  height:100%;
}
.wrap:after {content:'';clear:both;display:block;}
.content,
.left,
.right {float:left;overflow:hidden;position:relative;}
.content,.left {margin-right:-100%;}
.content {width:100%;}
.left {left:-400px;width:200px;}
.right {left:-200px;width:200px;}

Нововведения выделены цветом.

Появилось всего несколько новых стилевых правил, но этого оказалось вполне достаточно.

Для #middle указан background-color:#ddd; это и будет цвет одной из колонок.

Для .wrap вместо прежней ширины border-а в 400px, произошла разбивка на две равные части этого значения: border-left:#eee 200px solid; и margin-left:200px; и теперь другая колонка будет цветом #eee.

Вот так все достаточно легко и просто и самое главное это никоим образом не затрагивает html-код страницы, что само по себе уже приятно.

Продолжая импровизировать, получаем возможность задать одной из колонок навигации фоновую графику размножающуюся по вертикали.

Как это сделать читаем предыдущий пост: "Super Holy Grail Gordi".

Вот только вертикальный border отделяющий область контента от колонок навигации нарисовать не судьба. Минус особенностей разметки :)

Переходим к примерам.