Памятка по CSS layouts
Прочитав пост на coda.coza, по адресу http://coda.co.za/archive/20050616/17:11:16 , просто не могу удержаться и не “перевести” к себе. (никак не успеваю за своим RSS-ридером…:(). Перепись почти всех layout-техник для построения шаблонов страниц…
Предисловие
Всё ниженаписанное - копия с сайта coda.coza. Ни на какое авторство не претендую. Просто “свои” букмарки ближе к телу… ;)
Техники
1. Фиксированная: ширина колонок задана в пикселах (как правило), а ширина всей страницы такая, что помещается на экран.(800 или сейчас уже 1024 пикселов)
За: Просто реализовать.
Против: Обычно ломается если увеличить размер текста в броузере.
Пример: news.com, aol.com, macromedia.com (80% CSS сайтов как минимум)
2. Резиновая (aka. Fluid): ширина задается относительными величинами, обычно используют 100% что бы растянуть страничку на весь экран.
За: Приспосабливается к любой ширине экрана. Больше информации доступно без прокрутки. Гибкость и простота последующих апгрейдов.
Против: На широких экранах страдает читабельность.
Пример: wired.com, sercotransarctic.com
3. Зависимая от разрешения (Resolution dependent by Cameron Adams): меняется в зависимости от размера окна броузера. При смене размера изменяется и ширина страницы. Нужен JavaScript, но без него имеем просто фиксированный layout.
За: Полный контроль за изменениями размера странички в зависимости от размера окна броузера. Гибкость.
Против: Отбирает много времени, больше головной боли.
Пример: пример автора, rammstein.com, microsoft.com (для изменения нужно обновить окно).
4. Эластичная (by Patrick Griffiths и недавно, Roger Johansson, и опять by Douglas Bowman): изменяется в зависимости от размеров шрифта пользователя. Очень похоже на зум в Опере.
За: Пользователь может регулировать. Гибкая и доступная.
Против: Отбирает много времени, больше головной боли. Трудности с картинками.
Пример: mozilla.org, yahoo.com, Elastic Lawn (CSS Zen Garden)
5. Jello (by Michael Purvis): Комбинирование Фиксированной и Резиновой техник.
За: Гибкость и простота последующих апгрейдов.
Против: не совсем простая реализация.
Пример: пример автора.
6. Прогрессивная(?) (Progressive by Alessandro Fulciniti): Комбинация Фиксированного и Резинового. Фиксированный - при ширине окна броузера меньше 540px (например) и больше 1024px (например); между ними - Резиновый. Требует JavaScript.(при отсутствии JS превращается в обычный Фиксированный)
За: Гибкость и простота последующих апгрейдов.
Против: не совсем простая реализация.
Пример: пример автора.
7. Ограниченная: Резиновая страничка с заданной максимальной шириной(в пикселах)
За: Гибкость и простота последующих апгрейдов.
Против: Использует чисто IE’шное CSS свойство для реализации max-width.
Пример: coda.coza.
Заключение
Вот такая подборка.
Есть на что убить пару коротких летних вечеров.
Мне лично больше всего нравится Jello, мне кажется эта техника наиболее точно отражает потребности пользователей, хотя вьехать поначалу трудновато. Но её бы я использовал для своего блога и всем рекомендовал..
ЗЫ: если для каких то из них уже общеприняты русские названия, с радостью исправлю.
Мне, как пользователю, нравится обыкновенный резиновый сайт, где главная колонка текста плавает с max-width:40em
Jello + em(а не пиксели) и есть решение.
Это был бы компромисс между полноценной резиной и фиксированными колонками.
Просто фигово реализуются эти max-width и min-width в IE…:(
Слишком много названий, имхо :) Самый в плане accessibility + visual design сайт, опятьже. имхо, - это у дагласа баумана. Мне лично еще нравится сайт Томми Ольссона.
Так вот у Баумана чтоли “эластичная”?
Но для меня в последнее время важен source order более, чем то, как будет называться layout. Последовательный сорс-ордер в порядке, от главного к второстепенному, последовательность div’ов типа branding, nav, contentcontainer, siteinfooter :)
а потом все это в 2 или три колонки :) с “выделкой” посредине
а потом бодаться со шрифтами
Проверять - мозиллой или ФФ зумминг на 200%
Если читабельно все - значит - катит
Со шрифтами у меня борьба идет постоянная :( задавать их для ИЕ надо только в % (имхо), в боди font-size:76%, если в em’ах, то потом в ИЕ колбасит
В принципе, чтобы хороший нефиксированный layout сделать “под всех” - париться надо недели 2 :) Я прав?
Нет, elastic-layout’ы верстать так же легко, как и фиксированные. Это просто приходит с опытом.
Лично мне очень помог пост на http://www.pixelmeadow.com
здорово
надо пробовать.
для меня в идеале - все резиновое, но пока приходится довольствоваться “смежными” решениями, так как заказчикам не нравится ломка структуры, которая не наблюдается в таблицах. что-то обязательно должно быть с фиксированной шириной/высотой. для себя же я все делаю резиновым и не жалею :)
статья супер - спасибо!
2mourner - весёлая статейка, особенно радует количество информации про еластик-лейауты. Ж) Шутка. Вот, перевод сделал - http://npj.ru/valine/about-elastic-layouts
[…] кторов - о том какой селектор выигрывает - когда оба задают противоречивые CSS значения. Памятка по CSS layouts - обзор различных способов для построения layout страниц - то есть разметки на […]
А есть ли возможность реализовать в xhtml высоту в 100%? Я хочу растянуть фоновую картинку по высоте окна вне зависимости от кол-ва контента. Пробовал сделать отдельный div c height:100%; но это не помогает :(
Забыл сказать, что это не фоновый рисунок для всего окна, а для для его части с фиксированной шириной, скажем, 770 пикселей, который я определяю в body.
может быть http://cssing.org.ua/2004/09/10/flex-faux/ вот эта статья прийдется вам кстати, насколько я понял не обязательно что бы колонка физически растягивалась на всю высоту, достаточно визуального эффекта который и описан в том посте.