Текст в два столбца. Как это работает: пояснения к CSS-коду. Адаптивная верстка. Текст в два столбца без картинок
Простые две колонки через CSS
Здесь я не буду описывать замороченные техники полурезиновых и на четверть эластичных дизайнов. Просто обычная фиксированная страница. Где размеры всех колонок указаны либо в пикселах , либо в процентах , либо в EMах . И имеем такой вот HTML:
- #wrap{
- width:700px;
FLOAT для двухколоночного дизайна
Проще всего сделать две колонки с помощью свойства FLOAT, вот так я их как правило и делаю: (ukr.net , pravda.com.ua , )
- #main{
- float:left;
- width:500px;
- #side{
- float:right;
- width:200px;
Еще можно так
- #main{
- float:left;
- #side{
- float:left;
Вот и все. Для того что бы блок #wrap растянулся до своего содержимого(#side + #main) достаточно задать:
- #wrap{
- overflow:hidden;
Из недостатков float методов – при переполнении одного из блоков – колонка может сползать(в ИЕ конечно). Но с этим можно и нужно бороться.
абсолютное позиционирование
Как известно “absolutные” блоки позиционируются относительно ближайших родительских relative-блоков. Как по мне, position:absolute – один из самых сильных инструментов в построении страниц.
Вот такой ЦСС построит нам две колонки.
- #wrap{
- position:relative;
- #main{
- position:absolute;
- left:0;
- width:500px;
- #side{
- position:absolute;
- left:500px;
- width:200px;
39 комментариев к “Как я делаю две колонки”
Латрек | 24 November, 2005Теперь о проблеме “колонок одинаковой высоты”. К счастью эта проблема тоже успешно решена. Можете почитать . Там даже есть пример . (и мой пример)
zaARTix | 5 December, 2005[b]akella
что не пост – то споры о таблицах:)
[…] и мистические CSS свойства которые могут спасти от бед, таящихся в этом злобном броузере. Как я делаю две колонки – самые простыe две колонки которые только могут быть. Просто про […]
Привіт!
Прикольно, скільки бачив технік(2 здається:) “очистки” флоатів, то з overflow:hidden зустрівся вперше…Щось у мене на блозі не спрацювало(футер що був у “wrap” розлізся), але це надихає що накінець мож буде здихатися атавізма як “очистки флоатів за допомогою структурного маркапа”.
Корисно!
Залік:)
А что насчет отрицательных маржинов, противоположных направлению float’а? :) – чтобы не падало.
| 26 October, 2006Это уже сложнее чем “простые две колонки” , а я все стремился к простоте и той самой прозрачности)
Ха, два ответа на Ваш комент и оба к одному свелись:)
Но спасибо – пожалуй для полноты действительно стоило бы добавить, ведь некоторые могли это расценить как более менее общую перепись всех техник для двух колонок.
Vladson | 16 June, 2007Вот кстати о простоте, я тут начитался всякого “бреда” (замечу в кавычках) и решил попробовать сделать 2 колонки как можно проще и вот к чему пришёл…
Нового в принципе ничего нет, 75% всего что там использовано я вычитал тут остальные 25% в других местах однако в том что касается простоты (и кроссбраузерности) мне кажется очень даже не плохо получилось…
Естественно “шапка” (“хеадер”) сделана типичнее некуда (на 99% “валидных” сайтов сделано также…)
Очень обидно что я никак не смог сделать “футер”, все решения которые приходили в голову слишком сложные и не кроссбраузерные (а это явно не вписывается в мои цели)
(Повторяю я не претендую на что-то новое, речь исключительно о простоте реализации)
| 16 June, 2007Спасибо – это отличный способ, единственный недостаток – футер, но его можно поместить в одну из колонок и тогда все зашибись)
Vladson | 18 June, 2007Да помещенте футера в одну из колонок техника знакомая (именно на этом самом сайте я впервые и увидел упомянание об этом способе) но мне кажется что это слегка “левый” вариант так-как мне кажется весь смысл “дивной-вёрстки” в том чтоб HTML-разметка была полностью независима от CSS-оформления а в данном случае получается что HTML придётся “подгонять” под оформление (т.е запихивать “футер” внутрь div-а одной из колонок хотя его место вовсе не там…)
Вы такой умный.
Конечно, делать говносайты в говнодизайне можно и дивами.
А слабо порезать хороший дизайн и сделать его тянущимся без использования таблиц?
То-то же.
*ROFL*
Вы заблуждаетесь. Я очень туп, и никогда в жизни :)
Тем не менее моего скудного ума хватает на приличный код, жаль что высоты мудрости которых вы достигли не позволяют вам научиться верстать:)
Заметил одну проблему с абсолютным позиционированием в браузере ie8!
если дать в двухколоночном макете правом и левом диву по 50% ширины почему то возникает горизонтальная полоса прокрутки! если же ничего соотношения процентное будет другое(не 50 на 50) то полоса прокрутки исчезает!
Что думаете по этому поводу?! И как это можно исправить?!
мля и откуда же берутся эти недоразвитые любители табличной верстки! Когда они уже вымрут! Когда мля до вас уже дойдет что дивы это стандарт а верстка таблицами изначально была ошибочной! Таблицы используют для другого – для табличных данных!
И так на заметку что бы не ломать голову как же заверстать дизайн на дивах надо изначально дизайнеру мыслить дивами и продумывать! Увы многие дизайнеры ограничиваются только знанием фотожопы и до остального а в частности что ихнии рисунки надо преврамтить в хтмл-страницы – им нет дела!
А все нашел решение! Надо для одного из дивов поставить left:0; а для другого right:0; (замест left:50% например)!
Хорошая статья, только я вот уже битый час ломаю голову, а почему нельзя под …. в примере с абсолютным позицированием пихнуть ещё какой-нить … чтобы он просто за ним следом следовал? Я уже и так и сяк тыркался, не выходит. Выход есть?
Резинится норм…контент сносится до минимума, дивы не прыгают.
всем удачи!
=============
body{margin: 10 20 10 20;}
#wrap {background-color:#CCCCCC;}
#head {width:100%;background-color:#DDCCFF;}
#left{width:300px;background:#00CCFF;float:left;position:relative;z-index:1;}
#content{margin-left:320px;background:#CCCССС;word-wrap:break-word;}
#footer {float:right;width: 100%;height:50px;background-color:#000000;}
head
left
content
footer
опс…пардон
head
left
content
footer
“[” и “]” заменяем соответственно на “”)))
блин…ну вообщем квадратные скобки на знаки больше и меньше)) кавычки тож нормальные нужно.
это для новичков)
хоть пост и стары, но всё еще актуальный. Спасибо за объяснение.
Сам дошел до флоатов, но в опере и мазиле не растягивался див, помогло
overflow:hidden;
Спасибо.
Вопрос: у меня две картинки (кнопки от feedburner и tweecounter) они ложаться друг под друга. я пытаюсь их выставить в строчку через div style
пробовал
так же во втором div ставил position:right и absolute
Есть ещё варианты?
Levik | 19 August, 2010Несмотря на “возраст” статьи она не потеряла свою актуальность:) Отлично подходит в качестве пособия начинающему “верстальщику” (сам периодически “начинаю” верстать и в очередной раз обращаюсь к ней)
sweb27 | 20 December, 2012Спасибо, пригодилось статься, забыл про overflow:hidden; … глупо так, но бывает.
Метод с абсолютным позиционированием вообще до гениальности идеален, особенно для фиксированной ширины. Причём в некоторых случаях можно даже на дивах сэкономить и задавать свойства для HTML и BODY а в отдельные DIV-ы уже пихать доп колонку (или даже не одну если аккуратно)
Более того, если учесть что в последнее время (слава богу) всё чаще встречается разметка по сантиметрам/дюймам то получается вообще просто (а главное более чем кросбраузерно)
Уже более чем 7 лет прошло (пост №4) сменилось не одно поколение новых “веяний моды” и даже поколений браузеров, а я в этом способе так и не разочаровался.
Текстовый редактор Ворд позволяет форматировать текст самыми разными способами. Последние версии данной программы настолько обросли различными функциями, что сейчас нет практически ничего, чего не умеет делать этот текстовый редактор. В этой статье мы расскажем о том, как сделать текст в две колонки в Ворде.
Правильный способ сделать текст в две колонке в Ворде
Для того чтобы сделать текст в две колонки в Ворде вам необходимо перейти на вкладку «Разметка страницы » и нажать на кнопку «Колонки ». После этого появится выпадающее меню, в котором вы сможете выбрать количество колонок, которые вы хотите разместить на этой странице.
В данном выпадающем меню доступны такие варианты:
- одна – одна колонка, обычный формат страницы в Ворде;
- две – две одинаковые колонки, страница с двумя колонками;
- три – три одинаковые колонки, страница с тремя колонками;
- слева – узкая дополнительная колонка в левой части страницы;
- справа – узкая дополнительная колонка в правой части страницы;
Кроме этого в выпадающем меню есть пункт «Другие колонки ». Данный пункт открывает дополнительное окно, в котором можно настроить ширину колонок и промежуток между ними.
Также размер колонок можно установить с помощью линейки, которая находится над страницей.
Неправильный способ сделать текст в две колонке в Ворде
Второй способ создания колонок в Ворде можно считать неправильным, но зачастую он более удобен. Для данного способа используются таблицы с невидимыми рамками. Перейдите в вкладку «Вставка » и с помощью кнопки «Таблица » создайте таблицу с двумя колонками.
После того как таблица создана установите курсор во внутрь таблицы и перейдите на вкладку «Работа с таблицами – Конструктор ». Здесь нужно сменить тип линии, которая используется для рисования границ таблицы. Для этого откройте выпадающее меню и выберите «Без границы ».
Такая линия видна во время редактирования документа, но не отображается при его печати.
Как сделать текст в две колонки в Word 2003
Если вы используете Word 2003, то для того чтобы сделать текст в две колонки вам нужно открыть меню «Формат – Колонки ». После этого появится окно «Колонки ».
В этом окне нужно выбрать количество колонок и нажать на кнопку «OK ». При необходимости вы можете настроить ширину колонок, промежутки между ними, а также другие параметры.
19.07.16 2.9KВ этой статье мы поэтапно рассмотрим правила верстки сайта с двумя колонками. Код, приведенный нами, позволит вам добавить шапку и подвал, охватывающие эти две колонки.
Вступление
Для выполнения заданий этой статьи вы должны иметь навыки написания кода как на HTML , так и на CSS . Если это не так, тогда вам лучше использовать визуальный редактор.
Обратите внимание, что вы вовсе не должны быть экспертом в HTML или CSS . Вам просто нужно иметь базовые знания этих технологий, иначе эта статья будет вам непонятна.
Использование свойства float для создания двух колонок
Существует много методов использования CSS для создания сайта с двумя колонками. В данном руководстве мы применим свойство float , чтобы разместить один столбец сбоку от другого. Во многих отношениях этот метод более простой и гибкий, чем метод абсолютного позиционирования элементов. Он также позволяет добавить по желанию шапку и подвал, охватывающие эти две колонки.
Я сам не использовал этот метод, потому что макет моего ресурса создавался тогда, когда я еще только делал первые шаги в разработке на CSS и ничего не знал об основных правилах верстки. Но не волнуйтесь. Я создал несколько демо-страниц, использующих этот формат, их вы сможете увидеть позже.
Базовый HTML код для сайта с двумя колонками
HTML часть кода довольно проста. Нам нужно только два блока div , по одному для каждого столбца:
Слова «Меню навигации » и «Контент » являются лишь указателями для боковой панели навигации и основного контента. Позже вы удалите эти слова, когда расположите в блоках реальный контент. div «container» — это блок, содержащий два столбца. Его можно использовать, если нужно применить определенные стили к обоим столбцам.
CSS-код для сайта с двумя колонками
Приведенный ниже CSS код использует проценты («%» ) для определения ширины обеих колонок. Так как они измеряются в относительных единицах, то будут расширяться или сжиматься, чтобы заполнить все окно браузера независимо от того, какую ширину оно имеет. Например, если вы измените размер окна браузера, шаблон перестроит столбец так, чтобы он максимально соответствовал границам окна.
Код CSS очень прост:
#content { float: right ; width: 80% ; } #navbar { float: right; width: 20%; }
Согласно правилам верстки сайта, код CSS должен размещаться в разделе стилей веб-страницы или во внешнем файле.
Как приведенный выше код работает на практике, можно увидеть здесь.
Как это работает: пояснения к CSS-коду
Правило «float: right » определяет, как блок DIV выводится из общего потока документа, а также размещается справа от всех других элементов, обтекающих его слева. Первый блок DIV , который встречается на HTML-странице , смещается в первую очередь.
В приведенном выше примере «#content » первым сдвигается вправо и для него задается ширина в 80% от ширины окна браузера. Наше следующее правило также выводит «#navbar » из потока документа и смещает его вправо.
Так как у нас уже есть плавающий элемент в таком положении. Согласно заданным правилам адаптивной верстки, второй блок помещается слева от существующего элемента, если для него есть достаточно пространства. Иначе он будет размещен под первым элементом. С учетом этого сумма сторон обоих блоков должна быть равна 100% или менее, иначе у нас не будет достаточно места, чтобы разместить их рядом.
Как разместить колонку навигации справа
Приведенный ранее код размещает меню навигации в левой колонке. Если нужно, чтобы меню навигации размещалось справа, измените код следующим образом:
#content { float: left ; width: 80% ; } #navbar { float: left ; width: 20% ; }
Вы можете увидеть этот код в действии здесь, нажав на кнопку переключения на правую колонку меню навигации.
Как корректно изменить ширину
Согласно установленным техническим правилам верстки, приведенные выше стили, задают для боковой колонки ширину в 20% от ширины окна браузера, а для колонки контента — 80%, что в сумме дает 100%.
Если вы планируете изменить эти значения, убедитесь, что их общая сумма равна или меньше 100%, иначе браузер поместит одну колонку ниже другой.
Если одна из колонок смещается ниже другой: как это исправить
Если вы обнаружили, что одна из колонок помещается под другой вместо того, чтобы располагаться бок о бок, это означает, что общая ширина обеих колонок составляет более 100% от ширины окна браузера.
Это может произойти, даже если вы используете мои значения «20% » и «80% «. Например, если добавить поля, рамки и отступы для одной или обеих колонок. Ширина этих столбцов также увеличится, что приведет к тому, что общая сумма будет превышать 100%.
Кроссбраузерность и правила верстки подразумевают два способа решения этой проблемы:
- Уменьшить значение ширины колонок, пока браузер не выведет их так, как вы хотите. Но помните, что проценты являются относительной единицей измерения. Она привязана к ширине окна браузера пользователя. Поэтому, если вы тестировали макет на своей системе, и обнаружили, что при добавлении к padding-left 10 px к одной из колонок и уменьшении ширины на 1%, все работает прекрасно, то нельзя делать вывод, что 1% = 10 пикселей. Иными словами, 1% от 1024 пикселей отличается от 1% от 1920 пикселей, и так далее. Убедитесь, что вы учитываете различия ширины окна в других браузерах и диагоналях экрана;
- Решение, которое предпочитаю я, заключается в том, чтобы создать внутри блоков «#navbar » и «#content » вложенный DIV , и поместить в него все отступы, поля, рамки и фактический контент. Таким образом, для внешних блоков можно оставить старые 20% и 80%, не заботясь о поправках на поля, отступы и т.д.
Например, в демо-сайте с двумя колонками используется следующий HTML-код для создания вложенного блока DIV :
К написанным ранее стилям CSS добавьте следующие свойства для «#innercontent » и «#innernavbar «:
#innercontent { padding-left: 10px ; padding-right: 10px ; } #innernavbar { padding-left: 5px ; padding-right: 5px ; }
CSS для «#content » и «#navbar » остаются такими же, как описано в первой половине этой статьи.
Так как отступ применяется к внутреннему блоку DIV , размеры наружных блоков остаются неизменными, и у нас сохраняется макет с двумя колонками.
Как добавить шапку и подвал сайта, растягивающиеся на обе колонки
Некоторые сайты содержат шапку, охватывающую по ширине обе колонки. Согласно существующим правилам верстки сайта, в ней можно разместить логотип, заголовок сайта или даже рекламные баннеры. Некоторые ресурсы также содержат подвал, который охватывают обе колонки. Кроме этого подвал может быть использован для таких элементов, как уведомления об авторских правах.
Как разбить текст на две колонки с помощью таблицыПо просьбам трудящихся...
1. Я всегда пользуюсь расширенным редактором. Вот так выглядит окно в котором создается сообщение.
2. Если нужно разместить текст сообщения в две колонки, можно воспользоваться кнопкой "таблица" в меню расширенного редактора.
3. Откроется окно, в котором можно задать параметры таблицы. Я изменила количество строк, вместо заданных по умолчанию 3 установила 1. Я не люблю рамки, поэтому в окошке"размер бордюра" я удалила цифру 1, моя таблица теперь будет без границ. И ширину изменила, вместо 500 установила 800 пикселей.
4. У меня появилась такая табличка, в которую я начала вносить стихотворение Анны Ахматовой. Перемещаться между колонками можно с помощью стрелок на клавиатуре или клавишей Tab - табуляция.
5. Дальше созданную таблицу можно редактировать. Для этого правой кнопкой мыши вызываю контекстное меню. "Свойства таблицы" Это позволяет редактировать заданные в самом начале параметры таблицы.
6. А "свойства ячейки" дают возможность изменить параметры каждой колонки либо каждой строки, если бы мы задали строк в таблице больше одной. Например можно изменить размеры каждой ячейки, задать их в пикселях или в процентах.
7. Здесь я решила добавить картинку между двумя строфами стихотворения. Для этого в контекстном меню выбираем "колонка" - "вставить колонку после", если курсор в этот момент находится в первой колонке. Или "вставить колонку до", если курсор находится во второй колонке
8. Добавляю картинку с помощью "пакетной загрузки и кнопки "добавить к сообщению". Курсор при этом должен находиться в том месте, куда нужно вставить картинку.
9. Картинка естественно оказывается не совсем того размера, который мне нужен.
10. Это легко исправить, выделив картинку и вызвав правой кнопкой контекстное меню. В контекстном меню выбираю "свойства изображения".
11. Меняю ширину с 700 на 300. Высота изменится автоматически, только нужно проследить, чтобы замочек, указанный стрелкой, был закрыт, чтобы пропорции картинки сохранились и изображение не исказилось.
13. Сохраняю сообщение в черновике, чтобы проверить результат.
Влад Мержевич
Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.
Ширина колонок
Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут width тега
|
(пример 1).
Пример 1. Ширина колонки в пикселах
В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top . Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края. Атрибуты width и valign можно заменить стилевыми свойствами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2). Пример 2. Использование стилей
Поля внутри колонокРасстояние между колонками регулируется атрибутом cellpadding тега
В данном примере значения атрибутов cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется свойством padding-right , который добавляется к левой ячейке через идентификатор с именем leftcol . Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили. Пример 4. Поля в ячейках
Цвет фона колонокЧтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Для этого создаем новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 5). Пример 5. Цвет фона
В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1). Рис. 1. Колонки разного цвета Разделитель колонокИспользование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 6). Пример 6. Использование трех ячеек
В данном примере вводится еще одна колонка со стилевым идентификатором spacer , это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками. На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница. Линия между колонкамиРазделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить свойство border-left для правой колонки или border-right для левой (пример 7). Пример 7. Добавление линии
Результат данного примера показан ниже. РезюмеСоздание колонок с помощью таблиц процесс достаточно простой и быстрый, следует только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты. К тому же большинство параметров, определяющих вид таблицы, можно вынести в стили и таким образом ускорить процесс добавления однотипных таблиц и документов на их основе. При двухколонном макете применяются разные средства по оформлению колонок. Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется расстояние между ними или устанавливается вертикальная разделительная линия. Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет варианты модификаций таблиц и удобству разработки сайта. Не нашли ответ на свой вопрос? Посмотрите здесь
|
Список профессиональных изданий, в которых можно разместить публикацию Куда отправить материал учителю
Скачать приложение цифровые часы
Программы для удаления троянов — Рейтинг антишпионских программ