Как я делаю две колонки
Мне кажется не лишним будет поделиться несколькими, для бывалых кодеров конечно очевидными, методами. Немало об этом написано - но никогда не лишне навести порядок в голове. Разумеется все без таблиц.
Очевидно - если вы умеете делать две колонки - ничего не стоит сделать их тремя - просто разбив одну из них опять на две. И так далее…
Простые две колонки через CSS
Здесь я не буду описывать замороченные техники полурезиновых и на четверть эластичных дизайнов. Просто обычная фиксированная страница. Где размеры всех колонок указаны либо в пикселах, либо в процентах, либо в EMах. И имеем такой вот HTML:
- <div id=”wrap”>
- <div id=”main”>
- </div>
- <div id=”side”>
- </div>
- </div>
Вобщем далее HTML код меняться не будет. + для простоты буду считать что:
- #wrap{
- width:700px;
- }
FLOAT для двухколоночного дизайна
Проще всего сделать две колонки с помощью свойства FLOAT, вот так я их как правило и делаю: (ukr.net, pravda.com.ua, cssing)
- #main{
- float:left;
- width:500px;
- }
- #side{
- float:right;
- width:200px;
- }
Еще можно так
- #main{
- float:left;
- …
- #side{
- float:left;
- …
Вот и все. Для того что бы блок #wrap растянулся до своего содержимого(#side + #main) достаточно задать:
- #wrap{
- overflow:hidden;
- }
Вот пример с заданными границами для наглядности.(вариации с двумя float:left)
Еще есть такая вариация:
- #main{
- float:left;
- …
- #side{
- margin-left:500px;
- …
Но она самая негибкая и неверочная - ломается в некоторых версиях ИЕ 6 - и вообще предпочитаю так никогда не делать. Пример
Из недостатков float методов - при переполнении одного из блоков - колонка может сползать(в ИЕ конечно). Но с этим можно и нужно бороться.
абсолютное позиционирование
Как известно “absolutные” блоки позиционируются относительно ближайших родительских relative-блоков. Как по мне, position:absolute - один из самых сильных инструментов в построении страниц.
Вот такой ЦСС построит нам две колонки.
- #wrap{
- position:relative;
- }
- #main{
- position:absolute;
- left:0;
- width:500px;
- }
- #side{
- position:absolute;
- left:500px;
- width:200px;
- }
Вот пример с границами.
Оговорка тут лишь одна - футер мы не сможем отобразить ниже обоих блоков - прийдется его “внедрить” в одну из колонок, Эта техника применяется например на http://ru.id-as.com/, http://wired.com/. Легко заметить, что футер всегда содержится в одной из колонок. Издержки метода. Зато во всем остальном он практически идеален :).
Конец
Естественно эти штуки можно применять не только для лэйаута страницы - но и для небольших элементов на ней. В тоже время в роли #wrap может выступать любой блок - даже body.
Можно даже в какой-то мере сказать, что они помогают эмулировать таблицы - хотя я уже давно перестал думать таблицами. Но для тех кто еще думает…
В любом случае всегда рад слышать уточнения, советы, Ваши мнения и техники!
http://www.maxdesign.com.au/presentation/page_layouts/index.cfm
был там?
Был конечно. Но это было давно и неправда - а по русски этого все равно нет. Навскидку не скажу но есть и подоходчивее ресурсы. Но все по аглицки.
Взять хоть доклады с конференций Дага Баумана и компании. Доклады “site in an hour” и т д…. Избитая тема - но все это капли в один сосуд.
Все очень четко и ясно. Ничего лишнего. То, что нужно всем, с чего все начинают и на чем все обламываются. Освоить это да имидж-реплейсмент и все - верстальщик к работе готов. Ну, почти :)
Мне вариант с позиционированием больше всех нравится
Faux column, source order?
Проще говоря, если #wrap’у задать бэкграундную картинку длиной в #side (шириной в 1пиксель нужным цветом) и спозиционировать ее top right repeat-y (для последнего действующего примера, естественно) - то мы получим типа 2 колонки разного цвета эквивалентной длины. Что ни говори - крутая техника во всех отношениях, а сколько она волос способна сэкономить :)
Более подробно гуглить запрос “faux column” или искать тоже на alistapart.com
Source order
Это конечно экзотика (или даже вообще - эзотерика) для нашего статус кво в веб-разработке, но все же.
Если важен сорс ордер - вариант с абсолютным позиционированием подходит идеально. Тут все просто - что первым идет в сорсе то первым и пойдет :) На экране разместить можно как хочешь
Этого нельзя сказать про float технику. Там плавающие блоки должны идти в определенной последовательности
Насчет футера я толи не свосем понял, толи не согласен. Еще один div и пусть идет себе футер отдельно :)
И еще (просто у меня счас нет возможности поиграться с этим) я вообще ничо не понял с
“Для того что бы блок #wrap растянулся до своего содержимого(#side + #main) достаточно задать: overflow:hidden;
”
не в курсах вообще, это что новый хак? :) как это для того чтобы “растянуть” надо выключать “переполнение”?
заранее спасибо за прояснение
очень не хотел нагружать еще и этим - это как бы отдельная тема. А ведь еще есть flexible faux…..
Не согласен - в моем примере меняешь left и right местами - и блоки меняются местами на экране. В чем проблема?
Ну если блоки у тебя оба position:absolute - то как ты футер отобразишь ниже их обоих? clearing absolutes - вот как Шон Инман для этого извращался - без скрипта никак. Только внутрь одной из колонок…
об этом действительно надо было поподробнее. Это замена старым <div class=”clear”></div> и <br style=”clear:both” /> для растягивания окаймляющего ДИВа до содержащихся ФЛОАТ блоков.
Однако не так давно выяснили что достаточно задать overflow:visible что бы блок сам растянулся до содержащихся внутри него ДИВов. Но при этом иногда возможны прокрутки в этом ДИВе. Более совершенный вариант overflow:hidden - который я и использую в своих буднях вебдева…
Спасибо, Акелла.
И одна фишка, RSS чё-то глючит, видимо “title” не проходит фильтрацию HTML
Вместо
by: cssing » Архив » Как я делаю две колонки
Надо
by: cssing » Архив » Как я делаю две колонки
В какой-то мере да, но до тех пор пока не разработают техники, которые бы полностью копировали поведение таблиц, я воздержусь отих использования.
Стандарт гласит, что если контент не помещается в смещаемый (float) блок, то он должен обрезаться. С этим я не могу смириться. По-моему это противоречит концепции accessibility, нарушение которой так часто вменяется в вину дизайнам, построенным на таблицах.
Например, мой сайт, с растагивающимся дизайном идеально смотрится на экране 800×600 и выше. Ширины всех колонок сайта задаются в процентах от экрана. Потом кто-то зайдет на него с устройства с меньшим разрешением (PDA) и какое-то длинное слово отобразится лишь на половину. По-моему это не допустимо. При использовании же таблиц в крайнем случае появится горизонтальная прокрутка.
И вообще, я поверю в устойчивый лэйаут страниц без таблиц, после того как увижу популярную CMS систему, постоенную по такому принципу.
Навскидку Movable Type, Wordpress, Textpattern и очень многие другие… Они как раз начали переход в первую очередь.
Вы слышали когда нибудь о medoa=heandheld? Видимо нет. Так же как и о media=screen которая отдает ЦСС лишь для компьютеров а не для ПДА. Никаких проблем возникнуть не может в принципе.
Насчет обрезания контента - для меня странно то что вы говорите. Я вам привел в пример(в посте) два самых посещаемых сайта моей страны - и они сделаны согласно этим техникам. Ничего не обрезается. Вам следует пристальнее всмотреться в эту технологию. Очень часто многие делают поспешные выводы не разобравшись до конца - не повторяйте ошибок.
Вопрос о доверии к CSS-layout давным лавно исчерпан ИМХО.
Я не зря писал сайт, с растягивающимся дизайном, Ширины всех колонок сайта задаются в процентах. При фиксированной ширине дизайна проблем, конечно не будет.
Смотрим:
http://ukr.net
http://pravda.com.ua/
http://textgarden.org/layouts/?c=blog (еще 23 примера для Textpattern)
Все вышеперечисленные сайты имеют фиксированные размеры ширины колонок.
Далее. Мой пример с PDA оказался неудачным. Я заговорил об обрезании контента, прочитав статью из вашего поста, где ее автор предлагает для устойчивости CSS-layout’a обрезать картинки или длинные URl’ы, которые не помещаются в контейнере, посредством overflow:hidden. Опять же, если размеры колонок будут фиксированные, тогда все ОК. Просто нужно следить за тем какой по ширине контент в них вставляется (хотя с таблицами этого делать не нужно). С “резиновыми” же колонками ситуация будет другая.
В конце-концов я нашел довольно устойчивый “резиновый” CSS дизайн на http://www.wired.com/. Не идеальный, но очень хороший.
Но объясните мне, пожалуйста, как без таблиц удовлетворить очень распространенное сочетание требований клиентов:
1) дизайн должен быть “резиновым”
2) для границ колонок используются разные небелые бэкграунды. Т.е. самая нижняя точка каждой из колонок должна визуально выравниваться по самой высокой из них. Faux columns здесь не годятся ввиду требования 1)
Будем считать что wired.com вас удовлетворил как резиновый лэйаут. На самом же деле существует множество вариантов сделать 3 колонки.
Теперь о проблеме “колонок одинаковой высоты”. К счастью эта проблема тоже успешно решена. Можете почитать вот этот мой пост. Там даже есть пример. (и мой пример)
Спасибо за ссылки. Очень полезные. Буду “курить” CSS дальше.
[b]akella[/b]
что не пост - то споры о таблицах :)
[…] и мистические CSS свойства которые могут спасти от бед, таящихся в этом злобном броузере. Как я делаю две колонки - самые простыe две колонки которые только могут быть. Просто про […]
Привіт!
Прикольно, скільки бачив технік(2 здається:) “очистки” флоатів, то з overflow:hidden зустрівся вперше…Щось у мене на блозі не спрацювало(футер що був у “wrap” розлізся), але це надихає що накінець мож буде здихатися атавізма як “очистки флоатів за допомогою структурного маркапа”.
Корисно!
Залік :)
А что насчет отрицательных маржинов, противоположных направлению float’а? :) - чтобы не падало.
Это уже сложнее чем “простые две колонки” , а я все стремился к простоте и той самой прозрачности )
Ха, два ответа на Ваш комент и оба к одному свелись :)
Но спасибо - пожалуй для полноты действительно стоило бы добавить, ведь некоторые могли это расценить как более менее общую перепись всех техник для двух колонок.
Вот кстати о простоте, я тут начитался всякого “бреда” (замечу в кавычках) и решил попробовать сделать 2 колонки как можно проще и вот к чему пришёл…
http://dkflbk.nm.ru/test002/
Нового в принципе ничего нет, 75% всего что там использовано я вычитал тут остальные 25% в других местах однако в том что касается простоты (и кроссбраузерности) мне кажется очень даже не плохо получилось…
(для тех кому лень идти по ссылке)
Главный принцип это задание фона фоновым цветом, и колонок картинкой по центру растянутой по вертикали (очень много где встречается этот способ)
Естественно “шапка” (”хеадер”) сделана типичнее некуда (на 99% “валидных” сайтов сделано также…)
Очень обидно что я никак не смог сделать “футер”, все решения которые приходили в голову слишком сложные и не кроссбраузерные (а это явно не вписывается в мои цели)
(Повторяю я не претендую на что-то новое, речь исключительно о простоте реализации)
Спасибо - это отличный способ, единственный недостаток - футер, но его можно поместить в одну из колонок и тогда все зашибись )
Да помещенте футера в одну из колонок техника знакомая (именно на этом самом сайте я впервые и увидел упомянание об этом способе) но мне кажется что это слегка “левый” вариант так-как мне кажется весь смысл “дивной-вёрстки” в том чтоб HTML-разметка была полностью независима от CSS-оформления а в данном случае получается что HTML придётся “подгонять” под оформление (т.е запихивать “футер” внутрь div-а одной из колонок хотя его место вовсе не там…)
Вы такой умный.
Конечно, делать говносайты в говнодизайне можно и дивами.
А слабо порезать хороший дизайн и сделать его тянущимся без использования таблиц?
То-то же.
*ROFL*
Вы заблуждаетесь. Я очень туп, и никогда в жизни не верстал красивые сайты :)
Тем не менее моего скудного ума хватает на приличный код, жаль что высоты мудрости которых вы достигли не позволяют вам научиться верстать :)
Заметил одну проблему с абсолютным позиционированием в браузере ie8!
если дать в двухколоночном макете правом и левом диву по 50% ширины почему то возникает горизонтальная полоса прокрутки! если же ничего соотношения процентное будет другое(не 50 на 50) то полоса прокрутки исчезает!
Что думаете по этому поводу?! И как это можно исправить?!
мля и откуда же берутся эти недоразвитые любители табличной верстки! Когда они уже вымрут! Когда мля до вас уже дойдет что дивы это стандарт а верстка таблицами изначально была ошибочной! Таблицы используют для другого - для табличных данных!
И так на заметку что бы не ломать голову как же заверстать дизайн на дивах надо изначально дизайнеру мыслить дивами и продумывать! Увы многие дизайнеры ограничиваются только знанием фотожопы и до остального а в частности что ихнии рисунки надо преврамтить в хтмл-страницы - им нет дела!
А все нашел решение! Надо для одного из дивов поставить left:0; а для другого right:0; (замест left:50% например)!