Как сделать резиновый блок div. CSS макеты: фиксированные, резиновые, эластичные

Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой - использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.

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

Фиксированная ширина макетной сетки Вёрстку загоняют в горизонтальный габарит 960-980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко - тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.«Резиновая» макетная сетка по ширине окна Опять же при больших горизонтальных размерах окна есть другая проблема: строки текста становятся очень длинными, и читать их становится совсем не так комфортно, как хотелось бы.
Ещё одна распространённая проблема этого решения - боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет.

Хочу предложить нехитрый вариант решения - ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.

Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже - это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.

Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе , для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.

Создаём контейнер макета:
... ...
Оформляем его незатейливым кодом стиля:
div.page-container { min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; }
Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400-1600 пикселей). Опять же используем лишь средства CSS 2.0. Такое решение вместо предложенного в первом комментарии простого добавления ширины в процентах для исходного контейнера будет работать ещё и в IE, который вплоть до 9 версии не понимает одновременного указания значений.

Дополняем HTML:
... ...
И немного меняем CSS:
div.page-container { max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; } div.page-container-inner { min-width: 960px; max-width: 1600px; margin: 0 auto; padding: 0; }
Как видите - решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.

От автора: приветствую дорогих читателей моего блога! Наверняка многие из вас уже слышали легенды о драконах, Санта-Клаусе и непонятном звере под названием резиновый веб-дизайн, который способен менять свою форму. О первом персонаже вам поведают рукописи Джона Толкина, о втором родители, а вот информацию о третьем я беру на себя. Как бы странно это не звучало, однако, в этой статье я постараюсь разжевать резиновый веб-дизайн и расскажу о его преимуществах и недостатках.

При разработке сайта веб-мастер, в первую очередь, должен отталкиваться от целей проекта. Если заказчику важно, чтобы веб-страница могла подстраиваться под любой экран монитора, то здесь на помощь придет резиновый (адаптивный) дизайн.

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

Чтобы ваша карьера веб-дизайнера стремительно развивалась, в обязательном порядке необходимо изучить это направление. Многие заказчики с уже собранной лояльной базой клиентов особенно требовательны к данному моменту, ведь они хотят обеспечить своим пользователям максимальное удобство.

Зарождение резинового веб-дизайна

В качестве интересного наблюдения можно отметить тот факт, что в нашей стране «резиновый» веб-дизайн специалисты начали воспринимать с позитивной точки зрения раньше, чем на западе. Дело в том, что там при зарождении веб-направления в эту сферу пришло большое количество узкомыслящих полиграфистов.

Зарубежные специалисты попросту не осознавали возможности создания нефиксированных графических разработок. А вот к нам понятия «веб» и «дизайн» пришли практически равномерно, вследствие чего подобная визуальная гибкость изображения воспринималась разработчиками как обычная творческая свобода.

Резиновый и адаптивный веб-дизайн - это одно и то же?

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

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

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

Преимущества резинового веб-дизайна

Благодаря резиновому дизайну css у вас есть возможность разработки веб-страницы, которая бы заполняла все свободное пространство браузера вне зависимости от размеров экрана. Если произойдут какие-либо изменения параметров, связанные с разрешением, вся структура сайта вновь подстроится под обновленные условия. Чудеса и волшебство, не правда ли?

Подобная особенность гарантирует тот факт, что веб-страница полностью займет браузерное окно независимо от того, отображается картинка на малютке HTC или на 20-ти дюймовом широкоформатном мониторе. Именно это и можно отнести к основному преимуществу резинового дизайна.

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

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

Именно исходя из этого резиновый веб-дизайн широко применяется при создании новостных порталов, блогов, а также всевозможных информационных сайтов. В этих случаях его применение наиболее целесообразно.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Недостатки резинового веб-дизайна

Помимо положительных моментов, подобный веб-дизайн обладает и некоторыми специфическими минусами. Один из них заключается в том, что, по сути, итоговый результат «автоподстраивания» страницы под определенные условия разрешения экрана непредсказуем. Некоторые графические элементы на сайте могут внезапно оказаться на другом месте, так как их вытеснили соседние коллеги.

Еще одним недостатком подобной «резины» является тот факт, что загрузка страницы с ним может увеличиться в 2–3 раза по сравнению со стандартной длительностью. Случается это по причине придирчивости некоторых браузеров к макетам страниц данного формата. Они тяжело справляются с задачей отображения элементов переменной ширины, вследствие чего также повышается риск возникновения визуальных ошибок.

Примеры резинового и адаптивного веб-дизайна

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

1. http://www.simplebits.com/

Для начала рассмотрим резиновый сайт одного американского блогера, занимающегося параллельно веб-разработками. Полная версия сайта:

Мобильная версия сайта:

Как видим, в этом случае картинка лишь подстраивается под размеры устройства, а общая структура сайта остается неизменной.

2. http://www.fork-cms.com/

Теперь же предлагаю ознакомиться с веб-сайтом, который адаптируется под определенное устройство и в зависимости от его размеров перестраивает полностью собственную структуру. Полная версия сайта:

Мобильная версия сайта:

Вот так-то. Надеюсь, сегодняшний материал был интересен, и вы не зря потратили свое время. Если это так, то оставляйте комментарии по этому поводу и делитесь собственным мнением. Мне приятны как позитивные отзывы, так и экспертные заключения мастеров веб-дизайна 2.0. Подписывайтесь на блог, чтобы не пропустить дальнейшую интересную и полезную информацию.

На этом у меня все, скоро увидимся!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Влад Мержевич

Резиновый макет с тремя колонками, пожалуй, самый гибкий и настраиваемый из существующих макетов. Сочетание процентов и пикселов для указания ширины колонок позволяет делать разные макеты, выбирая их под свои задачи. На рис. 5.17 представлены варианты трёхколоночных макетов, для удобства они пронумерованы.

Рис. 5.17. Трёхколоночные макеты

Здесь символ процентов (%) означает, что ширина колонки задана в процентах от ширины макета, px - ширина колонки указана в пикселах, а знак бесконечности (∞), что колонка занимает оставшееся пространство. Несмотря на обилие разных макетов, принципы их построения остаются одинаковыми и включают два основных способа: позиционирование и плавающие элементы. Также можно воспользоваться таблицами для создания колонок одинаковой высоты.

Использование позиционирования

Для управления положением слоёв относительно родительского элемента необходимо для родителя установить свойство position со значением relative , а дочерним элементам, которые формируют колонки, значение absolute . Структура кода для первых четырёх макетов будет одинаковой и представлена в примере 5.13.

Пример 5.13. Две колонки в пикселах или три в процентах

Три колонки Шапка сайта Колонка 1 Колонка 2 Колонка 3

Здесь колонки пронумерованы по порядку, т.е. колонка 1 располагается слева, колонка 2 по центру, а колонка 3 справа.

У позиционирования есть определённый недостаток, который ограничивает применение этого метода - при добавлении подвала он будет скрыт под колонками. Это связано с тем, что у слоя layout нет высоты как таковой, поэтому он не «толкает» слой с подвалом вниз. Если подвал непременно требуется на странице, следует воспользоваться методом построения колонок, основанным на плавающих элементах. Ещё этот метод не работает в IE6 из-за наличия в нём ошибок.

Для макета № 1, в котором ширина первой колонки резиновая, а остальных фиксирована, стиль будет следующим (пример 5.14).

Пример 5.14. Макет № 1

Header { background: #D5BAE4; } .layout { position: relative; /* Относительное позиционирование */ } .layout DIV { position: absolute; /* Абсолютное позиционирование */ } .col1 { background: #C7E3E4; /* Цвет фона */ left: 0; /* Положение левого края */ right: 300px; /* Положение правого края */ } .col2 { background: #E0D2C7; width: 200px; /* Ширина колонки */ right: 100px; /* Сдвигаем влево на ширину колонки 3 */ } .col3 { background: #ECD5DE; width: 100px; right: 0; }

У колонок с заданной шириной стоит свойство width , а их положение слева или справа задаётся соответственно свойством left или right . Резиновая ширина оставшейся колонки строится после одновременного добавления left и right , значения которых совпадают с шириной фиксированных колонок.

Макеты № 2 (пример 5.15) и № 3 (пример 5.16) построены на том же принципе.

Пример 5.15. Макет № 2

Header { background: #D5BAE4; } .layout { position: relative; } .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; left: 100px; right: 200px;} .col3 { background: #ECD5DE; width: 200px; right: 0; }

Пример 5.16. Макет № 3

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; width: 200px; left: 100px; } .col3 { background: #ECD5DE; left: 300px; right: 0; }

Макет № 4, в котором ширина всех колонок задана в процентах имеет некоторые нюансы. Если требуется одинаковая ширина всех колонок, её можно задать дробно (33.33%), но браузер Opera не умеет работать с дробными значениями процентов, поэтому в нём между колонками появятся «дыры» (рис. 5.18).

Рис. 5.18. Ширина колонок, заданная в дробных процентах

В подобных ситуациях следует перейти на неравные доли, к примеру, 33%, 34%, 33%, как показано в примере 5.17.

Пример 5.17. Макет № 4

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 33%; } .col2 { background: #E0D2C7; left: 33%; width: 34%; } .col3 { background: #ECD5DE; right: 0; width: 33%; }

В некоторых браузерах возможно появление небольшого промежутка между колонками. Решается использованием не целых, а дробных значений процентов, т.е. 33.3% вместо 33%.

Оставшиеся макеты, в которых две колонки из трёх резиновые, представляют особую группу, потому что их можно трактовать по-разному. Так, ширина одной колонки указывается в пикселах, другой в процентах от ширины макета, а ширина оставшейся вычисляется автоматически. На рис. 5.19 показаны разные подходы к вычислению ширины колонок на примере макета № 5.

Рис. 5.19. Ширина двух резиновых колонок

В первом варианте ширина первой колонки задана в процентах от ширины макета, ширина второй колонки вычисляется автоматически, а третья колонка имеет фиксированную ширину в пикселах. Во втором варианте колонки меняются между собой, и автоматически вычисляется ширина первой колонки. Третий вариант предполагает, что общая ширина резиновых колонок принимается за 100% и ширина первой и второй колонки вычисляется от неё.

Первый и второй вариант легко реализуется аналогично коду с двумя колонками в пикселах. Только вместо ширины в px указываем %. В примере 5.18 приведён стиль макета № 5 с первой колонкой заданной в процентах.

Пример 5.18. Макет № 5. Ширина второй колонки вычисляемая

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 50%; } .col2 { background: #E0D2C7; left: 50%; right: 200px; } .col3 { background: #ECD5DE; right: 0; width: 200px; }

Стиль макета № 5 с вычисляемой первой колонкой показан в примере 5.19.

Пример 5.19. Макет № 5. Ширина первой колонки вычисляемая

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; left: 0; right: 200px; margin-right: 50%; } .col2 { background: #E0D2C7; width: 50%; right: 200px; } .col3 { background: #ECD5DE; width: 200px; right: 0; }

Первой колонке нельзя задать ограничение справа через свойство right , поскольку значение будет равно 50%+200px, в CSS2 таких вычисляемых значений нет. Поэтому применим фокус - ограничим первый слой справа шириной 200px через right и сдвинем его влево на ширину второй колонки 50% с помощью margin-right . Слой у нас абсолютно позиционированный, поэтому такие махинации никак на ширине не скажутся.

Третий вариант с двумя резиновыми колонками требует наличия дополнительного слоя, назовём его rubber , относительно которого будет задаваться ширина колонок (пример 5.20).

Пример 5.20. Макет № 5. Ширина двух колонок в процентах

Три колонки .header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .rubber { left: 0; right: 200px; } .col1 { background: #C7E3E4; width: 60%; } .col2 { background: #E0D2C7; width: 40%; left: 60%; } .col3 { background: #ECD5DE; width: 200px; right: 0; } Шапка сайта Колонка 1 Колонка 2 Колонка 3

Построение макета № 6 аналогично макету № 5, поэтому останавливаться на нём не будем. Что касается макета № 7, то для него существует вариант, который может вызвать трудность. Это касается того случая, когда требуется сделать ширину левой и правой колонки вычисляемыми и равными между собой. Для этого ширину первой и третьей колонки следует сделать равной 50% (рис. 5.20).

Рис. 5.20. Макет № 7 с равными по ширине колонками

Чтобы осталось место под вторую колонку, воспользуемся свойством margin-right для первой колонки и margin-left для третьей. Значением этих свойств будет половина ширины второй колонки. Так, если она равна 200px, то получится margin-right : 100px (пример 5.21).

Пример 5.21. Макет № 7. Ширина резиновых колонок одинакова

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; left: 0; right: 50%; margin-right: 100px; } .col2 { background: #E0D2C7; width: 200px; left: 50%; margin-left: -100px; } .col3 { background: #ECD5DE; left: 50%; right: 0; margin-left: 100px; }

Напрямую свойством width пользоваться нельзя, поскольку добавление margin только увеличит ширину, а не уменьшит, как нам требуется. Поэтому ширина формируется одновременно заданными свойствами left и right . С позиционированием второй колонки возникают сложности в указании значения left или right , поскольку оно будет равно 50%-200px. Так что устанавливаем положение левого края на 50% (left : 50% ), а затем колонку целиком сдвигаем влево на половину её ширины через свойство margin-left (margin-left : -100px ).

Поскольку ширина некоторых колонок вычисляется автоматически, рекомендуется сделать ограничение по минимальной ширине макета, добавив свойство min-width для селектора BODY . Тогда ширина колонок не станет уменьшаться при достижении заданного предела.

BODY { min-width: 800px; /* Минимальная ширина макета */ }

Значение min-width зависит от макета и содержимого страницы и обычно подбирается опытным путём.

Использование плавающих элементов

Плавающие элементы это ещё один универсальный метод построения разнообразных трёхколоночных макетов. В отличие от позиционирования он позволяют не заботиться о проблеме подвала, поскольку подвал всегда будет располагаться на своём месте под самой высокой колонкой.

Построение колонок происходит с помощью свойства float в сочетании со свойствами margin и width . В зависимости от выбранного макета меняется и порядок колонок в коде, вначале всегда следуют слои, к которым добавляется float .

Макет № 1. Резиновая первая колонка

Ширина второй и третьей колонки указывается в пикселах, а их положение через свойство float со значением right . Для первой колонки также требуется задать свойство margin-right со значением равным суммарной ширине остальных колонок (пример 5.22).

Пример 5.22. Макет № 1

Макет 1 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; /* Отменяем обтекание */ } .col1 { background: #C7E3E4; /* Цвет фона */ margin-right: 300px; /* Сдвиг влево на ширину колонок 2 и 3 */ } .col2 { background: #E0D2C7; width: 200px; float: right; /* Обтекание слева */ } .col3 { background: #ECD5DE; width: 100px; float: right; /* Обтекание слева */ } Шапка сайта Колонка 3 Колонка 2 Колонка 1 Подвал

Макет № 2. Резиновая средняя колонка

Ширина первой и третьей колонки задана в пикселах, а их положение - через свойство float со значением left для первой колонки и right для третьей. Средняя колонка, чтобы она сохраняла свой вид, содержит универсальное свойство margin , задающее отступ слева и справа (пример 5.23).

Пример 5.23. Макет № 2

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 2 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .col1 { background: #C7E3E4; float: left; width: 200px; } .col2 { background: #E0D2C7; margin: 0 100px 0 200px; /* Отступ справа и слева */ } .col3 { background: #ECD5DE; width: 100px; float: right; } Шапка сайта Колонка 1 Колонка 3 Колонка 2 Подвал

Макет № 3. Резиновая третья колонка

Положение первой и второй колонки указывается через свойство float со значением left , для третьей колонки нужно установить отступ слева (margin-left ) на суммарную ширину остальных колонок (пример 5.24).

Пример 5.24. Макет № 3

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 3 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .col1 { background: #C7E3E4; float: left; width: 100px; } .col2 { background: #E0D2C7; float: left; width: 200px; } .col3 { background: #ECD5DE; margin-left: 300px; /* Отступ слева на ширину колонок 1 и 2 */ } Шапка сайта Колонка 1 Колонка 2 Колонка 3 Подвал

Макет № 4. Ширина всех колонок задана в процентах

Для построения этого макета подойдёт множество вариантов, основанных на предыдущих макетах, только вместо пикселов следует указать проценты. Ещё один способ показан в примере 5.25, где используется только свойство float и width .

Пример 5.25. Макет № 4

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 4 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .layout DIV { float: left; } .col1 { background: #C7E3E4; width: 20%; } .col2 { background: #E0D2C7; width: 60%; } .col3 { background: #ECD5DE; width: 20%; } Шапка сайта Колонка 1 Колонка 2 Колонка 3 Подвал

Макет № 5. Ширина двух колонок резиновая

На рис. 5.19 было продемонстрировано, что макет № 5, у которого две резиновые колонки, можно трактовать по-разному.

Ширина первой колонки указана в процентах от ширины макета, третьей колонки в пикселах, а средняя колонка занимает оставшееся место.

Ширина второй колонки указана в процентах от ширины макета, третьей колонки в пикселах, а первая колонка занимает оставшееся место.

Суммарная ширина двух резиновых колонок принимается за 100%, и ширина колонок указывается в процентах от этой величины.

Ширина средней колонки вычисляемая

Здесь ширина первой колонки указывается в процентах, а её положение через свойство float со значением left , для третьей колонки ширина задана в пикселах, а значение свойства float как right . Для средней колонки остаётся только установить отступы слева и справа на ширину колонок (пример 5.26).

Пример 5.26. Макет 5.1

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 5.1 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .col1 { background: #C7E3E4; width: 40%; float: left; } .col2 { background: #E0D2C7; margin: 0 200px 0 40%; } .col3 { background: #ECD5DE; width: 200px; float: right; } Шапка сайта Колонка 1 Колонка 3 Колонка 2 Подвал

Ширина первой колонки вычисляемая

Это наиболее хитрый макет, поскольку для первой колонки её ширина напрямую не указывается. Но чтобы ограничить контент необходимо для свойства margin-right указать значение совмещающее проценты и пикселы. В CSS2, как уже говорилось, подобное задать нельзя, поэтому добавим внутрь слоя col1 ещё один слой с именем wrap и добавим отступ каждому из этих слоёв. Одному в процентах, другому в пикселах (пример 5.27).

Пример 5.27. Макет 5.2

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 5.2 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .col1 { margin-right: 40%; } .col1 .wrap { margin-right: 200px; background: #C7E3E4; } .col2 { background: #E0D2C7; width: 40%; float: right; } .col3 { background: #ECD5DE; width: 200px; float: right; } Шапка сайта Колонка 3 Колонка 2 Колонка 1 Подвал

Ширина двух колонок в процентах

В этом макете общая ширина резиновых колонок принимается за 100%, поэтому нам потребуется дополнительный слой, относительно которого будет отсчитываться ширина внутренних колонок. Этот слой с именем rubber совместно со слоем col3 работает как двухколоночный макет, а внутренние слои col1 и col2 выстраиваются по горизонтали за счёт применения свойства float (пример 5.28).

Пример 5.28. Макет 5.3

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 5.3 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .rubber { margin-right: 200px; } .col1 { background: #C7E3E4; width: 60%; float: left; } .col2 { background: #E0D2C7; width: 40%; float: left; } .col3 { background: #ECD5DE; width: 200px; float: right; } Шапка сайта Колонка 3 Колонка 2 Колонка 1 Подвал

Макеты 6, 7 и их разновидности строятся по тому же принципу, что и макет № 5, за исключением макета № 7, в котором ширина левой и правой колонки резиновая и равна между собой.

Вначале готовим основу, указываем порядок слоёв в HTML-коде.

Колонка 1 Колонка 3 Колонка 2

Col1 { width: 50%; float: left; } .col2 { width: 200px; float: left; } .col3 { width: 50%; float: right; }

Это ещё не всё, слои пока никаких колонок не формируют и выстраиваются совершенно не подходящим для нас способом. Требуется сместить вторую колонку влево на половину её ширины (margin-left : -100px ) и заставить третью колонку встать на своё место. Для этого надо увеличить её ширину так, чтобы она была равна или больше, чем 50%+100px (половина второй колонки). Лучше всего подойдёт свойство margin-left с отрицательным значением, после этого колонки будут созданы. Есть ещё некоторые нюансы. Крайние колонки состыкованы между собой, что хорошо заметно, когда их высота превышает высоту средней колонки (рис. 5.21).

Рис. 5.21. Состыкованные колонки

К тому же в левой колонке текст справа, а в правой колонке текст слева скрывается под фоном центральной колонки. Это будет не заметно, если высота этой колонки большая, но это не всегда возможно. Чтобы преодолеть указанные недостатки, необходимо вложить внутрь крайних колонок ещё по одному слою (в примере он называется wrap ) и уже для них задать цвет фона колонки, необходимые поля и отступы. Окончательный код приведён в примере 5.29.

Пример 5.29. Макет № 7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 7 .header, .footer { background: #D5BAE4; } .layout { overflow: hidden; } .col1 { width: 50%; float: left; } .col1 .wrap { background: #C7E3E4; margin-right: 100px; /* Сдвигаем влево на половину ширины колонки 2 */ padding: 10px; /* Поля вокруг текста */ } .col2 { background: #E0D2C7; width: 200px; float: left; margin-left: -100px; } .col3 { width: 50%; float: right; margin-left: -100px; } .col3 .wrap { background: #ECD5DE; margin-left: 100px; /* Сдвигаем вправо на половину ширины колонки 2 */ padding: 10px; } Шапка сайта Колонка 1 Колонка 3 Колонка 2 Подвал

Поля и границы в трёхколоночном макете

В приведённые примеры макетов намеренно не добавлялось свойство padding , поскольку код служит лишь основой макета, и вы сами должны в конкретных случаях решать, нужны поля в колонках или нет. Добавление полей и границ к блочному элементу увеличивает его ширину, что надо учитывать при вёрстке. Однако ширина вырастает, только если для слоя установлено значение width . Рассмотрим несколько примеров, где ширина будет меняться, а где нет.

Div { /* padding влияет на ширину */ width: 200px; padding: 10px; } div { /* padding не влияет на ширину */ position: absolute; left: 20px; right: 20px; padding: 10px; } div { /* padding влияет на ширину */ float: left; width: 50%; padding: 10px; } div { /* padding не влияет на ширину */ margin-right: 50%; padding: 10px; }

В тех колонках, где padding или border требуется, но их добавление приведёт к «ломке» макета, можно воспользоваться вложенным слоем и установить необходимые свойства для него.

Колонка

В этом примере ширина слоя заданная как 200 пикселов меняться не будет, но поля и рамка будут добавлены.

Таблица в качестве колонок

Таблицу удобно использовать для простого и быстрого создания колонок одинаковой высоты. Такая быстрота достигается несколькими вещами. Во-первых, структура кода для любого макета остаётся одинаковой, колонки в коде, как в случае с float , свой порядок никогда не меняют. Во-вторых, ширина ячеек вычисляется автоматически исходя из их содержимого, поэтому достаточно указать ширину нужных колонок, а оставшиеся подстроятся под общую ширину таблицы. В примере 5.30 показан макет № 1 сделанный на таблице.

Пример 5.30. Макет № 1

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 1 .header, .footer { background: #D5BAE4; } .layout { width: 100%; /* Ширина таблицы */ } .layout TD { padding: 5px; /* Поля в ячейках */ vertical-align: top; /* Выравнивание по верхнему краю */ } .col1 { background: #C7E3E4; } .col2 { background: #E0D2C7; width: 200px; } .col3 { background: #ECD5DE; width: 100px; } Шапка сайта

Колонка 1

Колонка 2

Колонка 3

Подвал

Добавление свойства padding к селектору TD отменяет действие атрибута cellpadding тега

и добавляет поля к содержимому ячеек. При этом сама ширина колонок никак не изменится.

Макет № 2

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; } .col3 { background: #ECD5DE; width: 200px; }

Макет № 3

Макет № 4

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 33%; } .col2 { background: #E0D2C7; width: 34%; } .col3 { background: #ECD5DE; width: 33%; }

В макете 6.1 ширина первой колонки установлена в пикселах, третьей в процентах, а средняя колонка занимает оставшееся место.

Макет № 6.1

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 200px; } .col2 { background: #E0D2C7; } .col3 { background: #ECD5DE; width: 40%; }

Остальные макеты с помощью таблицы строятся аналогично, меняется только значение свойства width . Для макета № 7, в котором ширина крайних колонок резиновая и равна между собой имеются некоторые хитрости, так что на нём остановимся подробнее.

Ширина для крайних колонок устанавливается равной 50%, а для средней колонки она задаётся в пикселах. Чтобы все размеры соблюдались к таблице необходимо добавить свойство table-layout со значением fixed .

Layout { width: 100%; table-layout: fixed; } .col1 { width: 50%; } .col2 { width: 200px; } .col3 { width: 50%; }

Хотя суммарная ширина ячеек превышает ширину таблицы, никакого расширения и смещения таблицы не произойдет, как это случилось бы с блочными элементами. Как в таких случаях говорится, это не баг, это фича!

В примере 5.31 приведён полный код макета № 7.

Пример 5.31. Макет № 7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет 7 BODY { margin: 0; background: #6D775B; } .layout { width: 100%; table-layout: fixed; } .layout TD { padding: 7px; vertical-align: top; } .col1 { background: #6D775B; width: 50%; } .col2 { background: #F5E8D0; width: 300px; } .col3 { background: #6D775B; width: 50%; text-align: right; }

Он встал под дерево и ждет,
И вдруг граахнул гром.
Летит ужасный бармаглот,
И пылкает огнем.

Раз-два, раз-два! Горит трава, Взы-взы - стрижает меч,
Ува! Ува! И голова
Барабардает с плеч.

Льюис Кэрролл, перевод Дины Орловой, рисунки Джона Тенниела

Результат примера показан на рис. 5.22.

Рис. 5.22. Колонка по центру макета

Приветствую Вас в очередном уроке, который будет посвящен сегодня языку CSS . И мы реализуем с Вами трехколоночный резиновый макет для сайта. В дальнейшем Вы просто можете копировать этот каркас и приступать к созданию сайта . Макет будет состоять из таких блоков как: шапка сайта, левый сайдбар, правый сайдбар, область контента и футер. Ничего сложного, обычный, довольно просто шаблон. Ну что же, пришло время его реализовать. Для начала напишем следующую структуру html кода :

Структуру мы реализовали. Пришло время применять стили, благодаря которым мы реализуем трехколоночный макет .

Вот мы и завершили написание стилей, давайте немного их разберем.
За основу мы взяли блок, в котором размещаем все остальные блоки, и задали для него максимальную ширину, выравнивание по центру, а также ширину равную ста процентам (это не является обязательным, но и лишним не будет).
В блок, отвечающий за шапку сайта, поместили заголовок, а самому блоку установили цвет фона, и выравнивание текста по центру. После этого мы приступили к самой важной части, к нашим резиновым колонкам.
Для левого сайдбара установили цвет фона, фиксированную высоту, чтобы мы могли наглядно представить себе, как будет выглядеть сайт в дальнейшем. Установили ширину равную двадцати процентам, а также задали обтекание элементов слева.
С правым сайдбаром аналогичная ситуация, только мы отправляем данный элемент в правую часть экрана, задавая обтекание элементов справа. После такого способа контент автоматически становится по центру экрана между этими двумя сайдбарами.
Но для контента мы также задаем цвет фона, высоту, отступы с левого и правого края, которые равны 21 процент, и соответственно ширину в 58 процентов. У вас может возникнуть вопрос, почему именно 58 процентов. Исходя из ширины равной ста процентам, мы вычитаем отступы с левой и правой стороны, которые равны по 21 проценту, итого 100 — 21 — 21 = 58. Вот откуда данная цифра. Все, резиновые блоки готовы, осталось лишь реализовать футер.
Он реализуется по принципу шапки сайта, тоже создаем блок, с заголовком внутри, задаем фон, цвет текста, а также выравнивание текста по центру.

Посмотрев на результат, можно сказать, что все довольно просто, причем сайт будет сжиматься до предела, и растягиваться на максимальную ширину, заданную нами. Если хотите, Вы можете указать минимальную ширину, до которой будет сжиматься ваш сайт. Указывается данное свойство для блока с id container , т.к., он является родительским для остальных блоков. Вот мы с Вами и рассмотрели возможность создания трехколоночного резинового сайта, на этом я буду прощаться с Вами. Всего Вам доброго, успехов!

Резиновая верстка сайта. Резиновый веб-дизайн. Что и куда будем растягивать?

Особенности, преимущества и недостатки

Один из самых популярных типов верстки сайта - резиновая верстка. Главной особенностью резиновой верстки является способность подстраиваться под различные разрешения экрана и размеры окна браузера.

Из всех типов html верстки сайтов можно условно выделить три основных - фиксированная, резиновая и адаптивная.

Особенности резиновой верстки

В отличие от фиксированной, резиновая верстка предусматривает изменения размера окна браузера и рассчитана на различные разрешения экрана. Дело в том, что при современном стремительном развитии технологий и постоянном появлении все более совершенной техники, возникает проблема с версткой сайтов. Обычная фиксированная верстка перестала отвечать всем необходимым требованиям и постепенно себя изжила. Сейчас использование старых методов - скорее исключение, чем правило и это вполне закономерно.

Представьте себе такой простой пример - пользователь ехал в вагоне метро, возвращаясь домой с работы и зашел на ваш сайт с мобильного телефона, разрешение экрана которого 320х480 пикселей, потом уже дома он зашел со стационарного компьютера и просматривал ваш сайт на мониторе, диагональю 24″ и разрешением 1920х1200 пикселей (и это еще далеко не предел). Вопрос в том, как используя фиксированную верстку, добиться одинаковых результатов на смартфоне и на большом мониторе (если отбросить в сторону автоматическое масштабирование). Т.е., иными словами, нужно, чтобы в телефоне не появилась горизонтальная прокрутка и в то же время на мониторе сайт не смотрелся как несчастная узкая полосочка посередине белого пустого экрана. Ответ - никак.

И тут нам на помощь приходит резиновая верстка , которая легко справляется с поставленной задачей. На большом мониторе не грех растянуть сайт на весь экран, либо ограничиться определенной шириной шаблона, например, 75% ширины экрана. Для этой задачи есть замечательные CSS свойства max-width и min-width , которые позволят держать ширину сайта в определенных рамках, что является наиболее правильным и эстетичным решением.

Преимущества и недостатки резиновой верстки

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

Недостатков у резиновой верстки не так много, отсюда ее популярность и повсеместность. Главным недостатком является то, что сверстать резиновый сайт гораздо сложней, чем фиксированный. В случае с большими изображениями или фонами, нужно будет искать места в картинках, которые поддаются растяжению, сохраняя адекватность изображения. Практически все размеры в макете нужно будет указывать в процентах, которые, разумеется, нужно рассчитывать с умом. А если исходное изображение слишком маленькое, то при масштабировании в большую сторону оно будет сильно терять качество.

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

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

HTML-верстка

Пример — резина

Cтраница 1

Примеры резин с достаточно высоким сопротивлением многократному изгибу, содержащие дифенилгуа-нидин, приведены в табл. 4.15. При каждом значении модуля или степени поперечного сшивания у резин с ДФГ наблюдалось наибольшее сопротивление утомлению.

На примере резин для боковин шин показано, что методы ДСК и ДТГ при разложении образцов в среде азота дают наилучшие результаты при идентификации композиций НК, БСК, СКЭПТ и галобу-тилкаучука.

При разложении в среде кислорода кривые не столь информативны, но согласуются с кривыми, полученными в среде азота.

Рассмотрим эти эффекты на примере резин на основе кристаллизующихся каучуков, где они проявляются наиболее наглядно.

В работе К. А. Керимова (1965) на примере резины и поливинила было показано, что динамические кривые напряжение — деформация, близкие к прямым, лежат выше статических, причем в области напряжений, близких к нулю, остаточные деформации от динамических нагрузок могут втрое превышать статические.

Влияние влаги на химические реакции при озонном растрескивании должно было бы проявиться одинаково на резинах из каучуков сходной химической структуры, между тем этого не наблюдается, как видно на примере резин из НК и СКИ.

Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы

Большое принципиальное значение имеют результаты, полученные П. А. Ребиндером и В. В. Маргаритовым о влиянии природы поверхности зерен наполнителя на его упрочняющее действие. На примере резины они показали, что наполнители разделяются на три группы по молекулярной природе поверхностей.

К резинам предъявляются различные требования. Рассмотрим в качестве примера резины, используемые в буровом и нефтепромысловом оборудования.

Однако разный характер межмолекулярных сил взаимодействия полимера и растворителей может привести к совершенно различному набуханию полимера при близких значениях параметров растворимости для этих сред. Наиболее подробно этот вопрос изучен на примере резин.

Примеси и наполнители могут составлять значительную часть общего веса, а нередко вообще превышают вес самого каучука. Как многообразны и сложны могут быть примеси, добавляемые в каучук-сырец, видно на примере резины для автомобильных шин.

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

Важной характеристикой процесса износа резины, скользящей по металлической поверхности с большими скоростями, является критическая температура ее разрушения при трении. При скольжении резины по металлической поверхности в условиях высоких температур воздействия (200 — 400 С) возможны следующие основные виды ее разрушения: возникновение трещин на поверхности трения, образование на обоих контактирующих поверхностях пары трения слоев наволакивания резины и протекание процесса катастрофического износа. На примере резин на основе бу-тадиен-нитрильного и эти-лен-пропиленового каучуков разберем причины, вызывающие разрушение этих материалов.

Введение наполнителей увеличивает эффект размягчения резин. Вывод о том, что эффект размягчения больше в присутствии наполнителя, — кажущийся и связан только с тем, что сравнение резин производится при разных фактических деформациях каучуковой фазы, носит частный характер. Такое заключение базируется на обширном материале, собранном при исследовании резин из НК. Однако более детальный анализ на примерах резин из других каучуков показывает другое.

Страницы: 1

На данный момент как сделать сайт самому — не является запредельной фантазией и не представляет чего-то сложного, как это было в начале 2000-ых годов.

Чтобы сотворить своё чудо в интернете, можно конечно воспользоваться готовыми и бесплатными движками для сайтов и программами (конструкторами сайтов) с помощью которых, не имея даже элементарных познаний в html и css, вы за считанное время сможете сделать сайт с нуля на профессиональной основе с точки зрения оптимизации и SEO.

А можно пойти и другим путём более правильным: изучить программный код html и стилевое оформление элементов на css. В этом направление вам под силу будет сделать сайт любой конструкции и придать ему неповторимый внешний вид.

ОБУЧЕНИЕ HTML ОНЛАЙН

Я вам настоятельно рекомендую потратить немного времени и начать с изучения азов html и css, потому как не зная этих вещей, вы никогда не сможете сами подкорректировать любой из фрагментов, так как вы бы этого хотели, и тем более добавить что-то новое в не рамках шаблона.

лабы по информатике, егэ

И обучающих материалов по этой теме в интернете много.

ЭЛЕМЕНТЫ ДЛЯ САЙТА

Чтобы сделать сайт нужно знать, как вставлять на html страницы меню css, ссылки, картинки и видео, уметь правильно оптимизировать сайт и задать грамотно мета теги. Будет полезно освоить где и как размещать веб-сайт в интернете и какое имя придумать для нового портала, как сделать сайт прибегнув к помощи различных программ и инструментов.

Зачем же нужен адаптивный дизайн? Начну со статистики. Данные TNS за март 2013 года вы можете видеть на слайде ниже.

Как Вы можете видеть, примерно треть аудитории заходит со смартфонов и планшетов. И это при условии того, что процент каждый месяц только растёт. Как Вы понимаете, лучше держать нос по ветру!)

Как реализовать на своём сайте адаптивную вёрстку?

Поскольку средствами одного CSS решить проблему явно недостаточно (менять надо не только стили, но и структуру и содержание блоков), то воспользуемся jQuery. Зачастую сайт состоит из нескольких блоков: главный и сайдбары. Если адаптировать сайт под мобильные устройства, то это не более 2-х блоков (слева и справа).

Ниже привёл пример кода адаптивной вёрстки. В нём самые азы — остальное можете добавить на усмотрение. И не забудьте подключить библиотеку jQuery! (см. Как подключить библиотеку jQuery?)

Код JS (jQuery)

$(document).ready(function() {

var w = $(window).width(); // Ширина окна
var h = $(window).height(); // Высоту окна. Не используем. Для справки

if (w