Техника Gordi — система шаблонов для верстки в несколько колонок
03 Sep. 2008Рекомендую обратить внимание на новинку в области HTML-CSS-шаблонов: “Техника Gordi” как ее сам автор называет.
Самое интересное в этом шаблоне для меня:
- Единый набор HTML-элементов для разных вариантов колонок. Минимум экстра-разметки.
- Резина и фикс, на выбор. Резина 100%-й ширины или с ограничениями на max-min-width.
- Среди вариантов — шаблон в три колонки: центральная — резиновая, боковые — фиксированной ширины, с правильным расположением колонок в коде (content — first).
Последнее — задача, так и не нашедшая приличного решения у западных товарищей. Мы, похоже, решили ее. Я, надеюсь, имю право говорить “мы” :) (Вы поймете почему, прочитав статью с разъяснениями.)
Там нет кода готового к немедленному употреблению, как мне кажется. Это значит, что для практического использования шаблоны можно и нужно дорабатывать под свои нужды: дополнительная разметка, хаки, приемы по вкусу. По-моему, это хорошо. Начинающим будет непросто, но для опытных — чем заготовка дальше от конечного продукта, тем больше свободы.
Помимо всего прочего, это означает, что с представленным кодом нужно обращаться осторожно: тестируйте тщательней.
Спасибо Gordi за проделанный немалый труд!
03 Sep. 2008 at 18:09
Спасибо, Александр, за лесные слова.
Твой подход к тестированию, несколько неожидан для меня, возьму на вооружение :)
Да и footer к низу прибил, а у меня все руки не доходят :)
Сейчас делаю, под условным названием “super-graal”
html-код такой:
Без
margin-bottom: -32767px;
padding-bottom: 32767px;
C width:expression для IE6
По твоей методе тестирования все ОК.
Те же семь вариантов, как в моем последнем посте.
Жаль времени нет совсем для более тщательной проверки.
Если есть желание и время, могу один из вариантов на мыло скинуть.
03 Sep. 2008 at 19:09
Убились скобки :)
Может так пройдет:
<div id=”middle”>
<div class=”wrap”>
<div class=”content”>Content</div>
<div class=”left”>Left</div>
<div class=”right”>Right</div>
</div>
</div>
04 Sep. 2008 at 10:09
Использую технику Matthew James Taylor: http://matthewjamestaylor.com/blog/perfect-3-column.htm
Правда допиливаю по своим представлениям – не нравится его наименования классов и всякие clear:both
04 Sep. 2008 at 14:09
http://www.positioniseverything.net/piefecta-rigid.html этому примеру уже не один год…
04 Sep. 2008 at 15:09
gordi: Не мой любимый порядок колонок, но посмотреть будет интересно.
Михаил Валенцев, Serhiy: Мне нужен другой порядок колонок в коде. Я об этом много тут писал.
Порядок как у Тейлора и Пьяфекты – тоже приемлем, но не идеален. А идеала хочется :)
04 Sep. 2008 at 17:09
05 Sep. 2008 at 19:09
Решил footer таки побороть :)
Здесь подробности: http://trifler.ru/blog/comment_1219421644.html
Комментарий № 10.
Там же линк на пример.