Главная | Регистрация | Вход | RSSПонедельник, 23.12.2024, 11:05

Персональный сайт

Меню сайта
Категории раздела
Памяти М. Круга [10]
Посвящается великому человеку М. Кругу
Реклама на сайте
Футбольные матчи онлайн.
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Оплаченная реклама

Дневник

Главная » 2009 » Апрель » 23 » Табличная верстка блоками css
22:39
Табличная верстка блоками css

Табличная верстка блоками

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

Ключевой вопрос

Что же мешает блочной верстке победоносно шагать по планете? Существует множество препятствий. Но, пожалуй, особняком среди них стоит проблема, кое-где сравнимая даже не больше не меньше как с поиском Грааля. Узкое место – создание горизонтальных блоков одинаковой высоты, т.е. реализация той самой что ни на есть табличной сущности, которая порой необходима при верстке сайта, к примеру, в случае классического 3-хколоночного макета:

трехколоночный макет

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

<div id="main" class="table">
<div class="tr">
<div id="first" class="td">
<!-- первая колонка -->
</div>
<div id="second" class="td">
<!-- вторая колонка -->
</div>
<div id="third" class="td">
<!-- третья колонка -->
</div>
</div>
</div>

Согласно стандартам CSS, для того чтобы превратить этот набор дивов в таблицу, достаточно указать в классах соответствующие отображения: display:table;, display:table-row; и display:table-cell;.

Но я не случайно назвал такой подход непопулярным. «Табличники» увидят в приеме лишь ненужное «изобретение велосипеда», ярые же поборники nu skool посчитают этот путь идеологически неверным, тем более, что на первый взгляд кажется, что он ведет в тупик, браузеры от Microsoft display:table; не поддерживали, и в ближайшее время поддерживать не планирует, а значит, есть возможность отказаться от табличных шаблонов и этой ситуацией грех не воспользоваться.

Со многими возражениями можно согласиться, но, тем не менее, нельзя не заметить и очевидные плюсы «табличного» подхода, главными среди которых я вижу:

  • разделение содержания от представления;
  • возможность верстать «табличные» макеты любой сложности;
  • простая реализация.

Решения

Пункт «простая реализация», пожалуй, вызовет наибольшие сомнения, c «правильными браузерами» все понятно, но существует ли действительно простое решение для Internet Explorer? Существует.

К примеру, рассмотрим следующую конструкцию:

<!-- Для большей наглядности я использую лишь один див-контейнер -->
<div id="main" class="table">
<div id="first" class="td">
<!-- первая колонка -->
</div>
<div id="second" class="td">
<!-- вторая колонка -->
</div>
<div id="third" class="td">
<!-- третья колонка -->
</div>
</div>

Для того чтобы расположить блоки горизонтально, выровняв при этом их высоту, т.е. сымитировать табличное поведение в IE, достаточно определить стилевые классы

div.table{
height:0;
}

div.td{
height:100%;
float: left;
}
указать ширину для колонок и… всё. Пример 1 иллюстрирует данную технику (Внимание! Работает только в режиме обратной совместимомости – Quirks Mode) для варианта, когда трем колонкам задана ширина в 200px.

Рассмотрим более «жизненную» задачу: допустим, каркас должен быть растянут по ширине на 100%, ширина первой колонки – 200px, третьей – 30%, вторая же пусть занимает свободное пространство. Решение для IE может выглядеть так (дополним стилевой лист):

#main{
width:100%;
}

#first{
width:200px;
}

#second{
width:expression(document.body.clientWidth*(1-0.3) - 200);
}

#third{
width:30%;
}

См. пример 2. Или же так:

#main{
width:100%;
}
#first{
position:relative;
z-index:1;
width:200px;
}

#second{
width:100%;
margin:0 -30% 0 -200px;
padding:0 30% 0 200px;
}

#third{
width:30%;
}

См. пример 3.

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

div.table{
height:0;
}
div.tr{
height:0;
}
/* не для IE */
div.table[class] {height:auto; display: table;}
div.tr[class] { height:auto; display: table-row;}
div.td[class] {float:none; display: table-cell;}

div.td{
height:100%;
float:left;
}
#main{
width:100%;
}
#first{
position:relative;
z-index:1;
width:200px;
}
#second{
width:100%;
margin:0 -30% 0 -200px;
padding:0 30% 0 200px;
}
/* не для IE */
#second[id]{
width:auto;
margin:0;
padding:0;
}
#third{
width:30%;
}

См. пример 4.

Итог

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

Просмотров: 733 | Добавил: Scorpion | Теги: css | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Заработок в сети
Заработок на "Городе твоей мечты"
Бонус WMR

Получите WMR-бонус
от 0,01 до 0,20 WMR на свой кошелек!
Реклама
Поиск
Наша реклама
Календарь
«  Апрель 2009  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
27282930
Друзья сайта
  • Лучшие кинофильмы
  • Закачай себе всё новое
  • Программы для всех
  • Мир развлечений
  • HDTV фильмы

  • Copyright MyCorp © 2024