Резиновая верстка примеры. Резиновая или фиксированная верстка

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

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

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

Без определенных стилей выравнивания блока сайт съедит в левую часть окна. И это, на мой взгляд, некрасиво. Хочется выравнять сайт посередине. Вот и вопрос, «как же это сделать?». А вот и ответ.

Выравнивание блоков посередине в случае резиновой верстки на div-ах

Первое, что приходит в голову - это указать у элемента body свойство text-align:center . Казалось бы, все, включая текст на странице, должно выровняться по центру. А уж потом, для элемента wrapper поменять центровку на выравнивание по левому краю (text-align:left). Но это неверный подход (хотя все сработает в IE). В нормальных браузерах свойство text-align устанавливает выравнивание только для текста внутри блока, к которому применяется данное свойство.

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

CSS-инструкция для блока wrapper будет иметь такой вид:

Margin-left: auto; margin-right: auto;

Или в сокращенной форме:

Margin: 0 auto;

Именно таким принципом необходимо руководствоваться при необходимости выровнять блок по центру родителя.

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

Естественно, никакой центровки вы не добьетесь, т.к. границы центруемого блока уперлись в границы родителя. Ширина контейнера становится равной ширине содержимого только в случае задания этому контейнеру свойства float:left .

В случае директивы float:left ( или float:right) , опять-таки, никакого выравнивания при помощи вышеописанного способа вы не добьетесь. Блок, с данной директивой, прилипнет своим левым краем (или правым) к родителю, а все остальные блоки нормального потока будут обтекать его справа (или слева).

Поэтому ограничивайте ширину блока свойством width (либо фиксированная ширина в пикселах, либо проценты) и, для понимания происходящего на странице, обводите блок border-ом. Например вот так:

Border: 1px solid black;

В этом случае вы будите четко видеть границы верстаемого блока. Но помните, что в нормальных браузерах к размеру блока прибавится размер border-а (ненормальным оказывается браузер IE, в котором размер border-а не влияет на ширину блока). Это может привести к спрыгиванию обведенного блока с того места, которое он будет занимать без обводки.

А теперь переходите к просмотру видео.

О чем же пойдет речь в данном видеоуроке:

При помощи сайта http://csstemplater.com/ сформируем HTML-каркас верстки.

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

Познакомимся с такими интересными свойствами CSS как outline и псевдокласс-модификатор :focus . Outline позволяет задать обводку блока без изменения его размеров. Псевдокласс :focus позволяет изменить внешний вид элемента, при передаче ему фокуса ввода. Жаль, но все эти замечательные свойства поддерживаются браузером IE начиная лишь с 8-й версии.

Детально обсудим один из способов прижатия футера к нижней части окна браузера.

Разберемся с принципами формирования основного содержимого сайта: установка левого и правого сайдбара, задание области основного содержимого сайта.

Видео с сервиса RuTube:

Первая часть видео с сервиса YouTube:

Вторая часть видео с сервиса YouTube:

Третья часть видео с сервиса YouTube:

Если хотите попрактиковаться, то можете скачать исходник верстки с Deposit Files (*.zip-архив 3.5 КБайт).

Из-за алгоритмов сжатия сервиса RuTube серьезно страдает качество картинки. Если мелкие детали плохо видны, вы можете скачать видео с Deposit Files в лучшем качестве (*zip-архив с *wmv-файлом. Размер 53.9 МБайт).

• Тема: HTML&CSS
• Время ролика: 00:22:38
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 2. Создание резинового меню, используя списки

• Тема: HTML&CSS
• Время ролика: 00:16:13
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 3. Выстраиваем элементы позиционированием

• Тема: HTML&CSS
• Время ролика: 00:23:39
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

Часто возникают ситуации, когда нужно сделать перекрытие элементов. Или заставить элемент располагаться, например, в правом нижнем углу, независимо от того, как расположены окружающие блоки. Данную проблему лучше всего решает свойство position . В уроке мы разберемся с позиционированием элементов. Поработаем над перекрытием элементов с помощью свойства z-index . Выясним необходимое условие для работы свойства z-index .

Техника 4. Центрирование элемента переменной ширины

• Тема: HTML&CSS
• Время ролика: 00:11:45
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 5. Выравнивание блоков по ширине резинового блока

• Тема: HTML&CSS
• Время ролика: 00:16:00
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

Иногда возникает задача, когда нужно расположить несколько блоков по всей ширине родительского блока. То есть первый блок должен быть у самого левого края, последний блок должен быть у правого края. А расстояния между остальными элементами чтобы было одинаковым. Такого несложно добиться при верстке макета фиксированной ширины. Но мы усложним задачу и решим ее в уроке для резинового блока.

При создании сайта в нашей студии, большое внимание уделяется качественной верстке веб-страниц. Больше информации о верстке сайта в нашей студии я писал в другой статье. Сегодня же я хотел бы рассказать о видах верстки - резиновой и фиксированной. Каждый день мы пользуемся разработками зарубежных интернет-гигантов, таких, как Google, Microsoft и Facebook. Мы сидим за АйМаками и АйБиЭм-совместимыми ПК и используем компьютерные стандарты, созданные американскими учеными. Тем не менее, именно благодаря нам появилось сделанное почти «на коленке», с огромным недостатком финансов, практически на голом энтузиазме, весьма заметное в мировом масштабе сообщество www-ресурсов, именуемое чаще всего Рунетом (РУсский интерНЕТ). Хотя никакой четкой границы между «нашими» и «ненашими» реально не существует, так как Сеть интернациональна по определению, отечественным сайтам свойственен ряд характерных особенностей, выделяющих их на общемировом фоне.

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

Один из аспектов, который неизбежно упоминается в связи с отечественным веб-дизайном – это «резиновая» верстка (разметка). В Рунете стандартом считается верстка, при которой дизайн занимает 100% экрана, независимо от разрешения, в то время как западные сайты чаще всего сделаны по жесткой сетке и зафиксированы по ширине.

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

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

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

Фиксированная верстка

Сайт с фиксированной версткой имеет неизменяющуюся ширину независимо от разрешения экрана пользователя. Наиболее часто используемая ширина составляет 960, либо 1000 пикселей – размер, который гарантирует пользователям с разрешением экрана 1024?768 px (наиболее распространенный случай) и выше возможность нормального просмотра сайта без раздражающей горизонтальной прокрутки.

Статистика использования экранных разрешений в 2011 году:

1280×1024 – 14,8%
1280×800 – 14,4%
1024×768 – 13,8%
1366×768 – 10,1%
1440×900 – 9,9%
1680×1050 – 9,2%
1920×1080 – 6,2%
1920×1200 – 4,5%
1600×900 – 2,5%
1152×864 – 1,5%
1360×768 – 1,3%
800×600 – 0,6%

Плюсы фиксированной верстки:

Ширина фиксируется для всех браузеров, так что возникает меньше проблем с картинками, формами, видео и другим контентом, имеющим фиксированную ширину;

Фиксированная верстка препятствует излишнему растяжению текстовых строк сайта по ширине;

Фиксированные макеты верстаются быстрее и легче, что очень важно на срочных проектах;

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

Минусы фиксированной верстки:

• Вид страницы может значительно ухудшиться, если пользователи будут вручную увеличивать размер шрифта в браузере (как правило, этой функцией пользуются слабовидящие). Ввиду того, что ширина текстового блока зафиксирована и не изменяется пропорционально размеру шрифта, в дизайне страницы возникают искажения.
• При разрешениях, меньших, чем тот, на который рассчитан макет, в браузере появится горизонтальная прокрутка. Хотя разрешения меньше 1024×768 px на персональных компьютерах – уже большая редкость, для распространенных сегодня смартфонов и нетбуков это обычное дело.
• Фиксированный макет будет оставлять много пустого пространства у пользователей с большим разрешением экрана;
• Относительно небольшая ширина сайта с фиксированной версткой часто ограничивает в возможностях размещения публикуемых материалов.

Хорошим примером фиксированной верстки является недавно законченный нами сайт по аренде недвижимости

Резиновая верстка

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

Плюсы резиновой верстки:

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

Минусы резиновой верстки:

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

Наиболее популярные веб-браузеры, под которые, прежде всего, проводится тестирование:

Примером резиновой вестки является наш сайт Transit production

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

При использовании эластичной верстки размер основного контейнера и других (важных) элементов задается в специальных единицах – em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.

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

01.10.2013 01:04 73845

Резиновая верстка сайта (как впрочем и верстка фиксированная) начинается с создания так называемого скелета, или каркаса для дальнейшей разработка. Вообще, html верстка - конструктор. Сначала создается основной контейнер, основа которая в дальнейшем будет отвечать за минимальную и максимальную ширину всего сайта, границ. Если правильно все сделать, то изменив максимальный размер, вы практически без правок кода(а иногда вообще без них) можете увеличить максимальный размер сайта, например, с 1280px на 1360px или 1920px. Не стоит делать бесконечную резину, так как это нечитабельно на больших мониторах. Идеальным вариантом будет html верстка, включающая в себя все основные разрешения экрана, в том числе мобильные, например, резиновая верстка под разрешения экрана от 240px до 1920px.

Есть несколько видов html верстки , которая отличается визуально. Рассмотрим кратко эти виды верстки, прежде чем перейти к практическому построению каркаса:

Визуально отличающиеся виды верстки это: Резиновая верстка, фиксированная верстка, адаптивная верстка. Адаптивная верстка может сочетаться с резиновой версткой.

Особенности каждого вида верстки:
1) Фиксированная верстка - возможность основного контейнера сайта иметь одинаковую ширину независимо от разрешения монитора. Если экран меньше чем фиксированный размер основного контейнера, то появляется боковой скроллинг(прокрутка влево-вправо).

2) Резиновая верстка - возможность основного контейнера сайта растягиваться в ширину от и до указанных минимальных и максимальных размеров. Резиновая верстка может быть без указания минимального (будет не очень прилично смотреться на экранах меньше Npx, статичные объекты могут наплывать друг на друга, если не добавить адаптивности) или максимального размера, тогда она будет расширяться бесконечно (представьте себе, как будет выглядеть статья на разрешении 7000px, практически в одну строчку), поэтому хорошая html верстка всегда имеет разумные пределы. Поэтому, всегда нужно проверять результат верстки на разных разрешениях и в разных браузерах.

3) Адаптивная верстка - возможность как основного контейнера так и любого из элементов сайта подстраиваться под разрешение экрана, позволяя, таким образом, менять размер шрифта, расположение объектов, цвет и все, что только можно пожелать. Причем, делается это динамически, без действия пользователя, например с использованием медиа запросов, позволяющих автоматически определять разрешение монитора, тип устройства (мобильный, смартфон, планшет), и подставлять указанные значения в автоматическом режиме. Это дает большие возможности. Например, при комбинировании резиновой верстки с адаптивной можно настроить отображение сайта, начиная от самых мелких мобильных разрешений, и заканчивая самыми большими мониторами. Адаптивная верстка не затрагивает возможности резиновой или фиксированной, она их дополняет.

Поэтому, оптимальным вариантом на сегодняшний день будет html верстка, изначально построенная как резиновая верстка, например 980px-1920px, модернизированная до 240px с помощью адаптивной верстки. Нужно всегда помнить главное отличие:

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

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

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

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

Верстка каркаса

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

Для того чтобы создать основной каркас , который и будет уменьшаться до 240px и увеличиваться до 1920px , а при разрешении больше чем 1920px выравниваться по центру, нужно разместить контейнер сразу после тега body, и закрыть его перед закрывающим тегом body. Всю остальную начинку уже нужно внедрять внутри него.

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

Например, если вы в стилях css пропишите класс , допустим redblock , и назначите ему фон красного цвета, то любой блок, которому вы присвоите этот класс, будет иметь в качестве фона красный цвет. Присваивается класс очень просто. В кавычках нужному блоку прописывается нужное имя, например redblock или wrapper, или privetvasya. Это абстрактный класс, который вы придумываете сами, как кличку для щенка.
Поэтому, наш обволакивающий контейнер, которому мы решили присвоить класс wrapper, мог бы выглядеть так:

Но, так как мы уверены, что обволакивающий контейнер у нас будет только один на всем сайте, целесообразнее присвоить ему не класс а идентификатор. Отличается идентификатор от класса тем, что класс можно использовать сколько угодно, а идентификатор может быть только один на странице. Идентификатор имеет более приоритетное значение так как он один, к нему можно обратиться конкретно. Это можно сравнить с очередью на вокзале. Все слышали как на жд вокзале объявляют, например, гражданка Кутузова Аделина Матвеевна, пройдите к диспетчеру...

В данном случае обращение к гражданке по ФИО и есть аналог идентификатора в html (еще говорят айди, айдишник, ID). А обращение типа уважаемые пассажиры, отправка поезда..
Будет сравнимо с классом, так как обращение идет ко всем пассажирам, без конкретного обращения.

Наличие идентификатора не запрещает использовать класс, причем одинаковое имя класса и идентификатора(ID) являются разными, и можно к такому блоку обратиться что по классу, что по id.
Например:

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

Каркас готов, теперь согласно правилам html5 , будем использовать семантические теги, облегчающие понимание поисковиками структуры, чтобы главное не осталось незамеченным. Опять же повторюсь, описанием тегов мы в этом уроке не будем загружаться, для этого есть специальный раздел, в котором подробно описаны тэги html , с демонстрацией и возможностью самостоятельно поэкспериментировать.

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

Сайдбары и футер должны находиться в исходном коде ниже чем основная часть, которую нужно выделить тегом article, указывающий поисковику основной контент. Помимо этого будем использовать теги:header, main, article, aside, footer, назначение которых, в первую очередь, показать семантическую значимость и приоритеты в структуре. Поэтому, верстка нашего пока что не резинового макета, после добавления этих тегов будет иметь такой вид:

Html код

Показать код

Верстка каркаса от сайт Шапка Каркас шаблона Для будущего сайта

контент

Левый сайдбар Правый сайдбар Футер

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

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

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

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

Теперь прежде чем приступить к обзору css кода (в котором нет ничего лишнего, я оставил только то что нужно для данного урока, плюс для видимости добавил фон для блоков, и минимальную высоту чтобы блоки было видно хорошо), давайте обратим внимание на несколько нюансов:

1) Если внимательно присмотреться, то футер находится за пределами основного контейнера. Это не случайно, так как такое расположение даст возможность прижать футер к низу. Думаю многие видели на сайтах футер который при любом масштабе остается внизу. И многие хотели узнать как это делается. Поэтому я по ходу объясню механизм, после чего все станет ясно.

2) Многие, увидев на сайте растягивающийся на 100% футер и хеадер, и резиновый центр, уже считают это адаптивным дизайном. Это не совсем так, адаптивность - это более широкое понятие и более совершенные трансформации, но в данном уроке это не рассматривается. Тем не менее, резиновая верстка может быть различных видов, в том числе и вышесказанного вида. Поэтому, давайте сразу модернизируем наш шаблон, чтобы в итоге шапка и футер были всегда 100%, но при этом видимая часть содержащегося в них контента была от 240px до 1920px и по центру.
Такой метод я использовал на этом сайте.

3) Поэтому, нужно добавить еще кое-что в нашу верстку, чтобы осуществить задумки, описанные во втором пункте. Итак, для того чтобы наш футер и хеадер были всегда 100% (обычно эти блоки заполняют фоном, изображениями и тд) и при этом их наполнение не выходило дальше 1920px, сделаем следующее:

1) Вынесем над обволакивающим контейнером, прямо перед body
2) Создадим несколько блоков с одинаковым классом, например, я обычно называю его.maxw, поэтому не буду отходить от своих правил. Добавим его в header и footer, и присвоим этот класс нашей основной секции с классом.section. Также добавим условие для старых версий IE, с вызовом набора правил при условии захода с IE < 9 (если такие пользователи еще есть), и специальный метатег meta name =" viewport " для корректного соотношения масштаба на устройствах типа планшет, смартфон, и тд (такие пользователи точно есть).
3) Для того чтобы управлять поведением наших блоков на разрешениях экрана ниже 980px, в самый низ файла стилей добавим правила @media, в которых и пропишем нужные изменения для определенных блоков, в нашем случае для сайдбаров. Заставим их при разрешении экрана ниже 980px перемещаться под контентную часть, и выравниваться по центру.
В результате наша html верстка будет выглядеть так:

Итоговый html код

Показать html код

Верстка каркаса от сайт Шапка Каркас шаблона Для будущего сайта

контент

Левый сайдбар Правый сайдбар Футер

Наш файл стилей будет выглядеть так:

Css код

Показать css код

* { margin: 0; padding: 0; } html { height: 100%; } header, nav, section, main, article, aside, footer { display: block; } body { height: 100%; width: 100%; background: #fefefe; } .maxw { margin: 0 auto; min-width: 240px; max-width: 1920px; } header { min-width: 240px; width: 100%; height: 220px; background: #74C9FF; } #wrapper { position: relative; margin: 0 auto; height: auto !important; height: 100%; /*min-height: 100%; - Нужно для прижатия футера к низу*/ padding: 5px 0; } .section { width: 100%; padding: 0 0 220px; position: relative; } .section:after { content: ""; clear: both; display: table; } .mainwrap { width: 100%; float: left; overflow: hidden; } main { padding: 0 240px 0 240px; min-height: 350px; margin: 0; } article { padding: 0 5px; margin: 0 5px; background: #EAF2F5; min-height: 350px; } #s_left { float: left; width: 240px; margin-left: -100%; left: 0; position: relative; background: #E88139; min-height: 350px; } #s_right { float: left; width: 240px; margin-left: -240px; right: 0; position: relative; background: #E86A3B; min-height: 350px; } footer { margin: -220px auto 0; width: 100%; min-width: 240px; height: 220px; background: #AFBFC6; position: relative; } /* Для отображения на устройствах меньше 980px*/ @media screen and (min-width:240px) and (max-width:479px) { main { padding:10px; } #s_left { padding: 0; margin: 0 auto; float: none; clear: both; left: 0; } #s_right { padding: 0; margin: 0 auto; float: none; clear: both; right: 0; } } @media screen and (min-width:480px) and (max-width:799px) { main { padding:10px; } #s_left { padding: 0; margin: 0 auto; float: none; clear: both; left: 0; } #s_right { padding: 0; margin: 0 auto; float: none; clear: both; right: 0; } } @media screen and (min-width:800px) and (max-width:979px) { main { padding:10px; } #s_left { padding: 0; margin: 0 auto; float: none; clear: both; left: 0; } #s_right { padding: 0; margin: 0 auto; float: none; clear: both; right: 0; } }

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

1) Мы вынесли header за пределы, так как в первом варианте он был внутри обволакивающего контейнера. А обволакивающий контейнер, в свою очередь, был максимум 1920px, как было сказано в самом начале. Это не дало бы возможности сделать header шириной 100%, он бы упирался в родительские 1920px. Поэтому мы убрали у обволакивающего максимальную ширину, и вынесли за его пределы, плюс создали класс.maxw , которому и назначили эти максимум 1920px и выравнивание по центру. Теперь у нас получилось, что 1920px будет у любого блока с классом.maxw. Поэтому, внутрь header и footer мы положили div контейнер с этим классом, благодаря чему все что внутри него будет находится, растянется от 240px до 1920px, и будет выравниваться по центру если разрешение больше чем 1920px. Это можно увидеть, меняя разрешение масштабом, например, ползунком в опере.

2) Футер, прижатый к низу. Это тоже важная особенность верстки. Здесь секрет заключается в следующем:
Сам футер находится за пределами обволакивающего контейнера, а тот, в свою очередь, имеет 100% высоты. Также section, который находится внутри обволакивающего, но сам обволакивает сайдбары и центральную часть, он дает отступ снизу на высоту футера с помощью padding. Это создает пустое место внизу под контентом. Так как высота 100%, а футер находится за пределами блока, он сдвинут за пределы видимости на расстояние равное его высоте. Создавая отступ снизу с помощью padding:0 0 100px мы готовим место для футера, чтобы его сдвинуть на высоту с отрицательным значением. Это даст отступ сверху в обратном порядке, а значит он сдвинется вверх на свою высоту. В итоге мы имеем отступ снизу 100px, футер сдвинутый на 100px ниже экрана, и это постоянная позиция. Когда мы даем футеру команду margin:-100px auto 0 , мы таким образом подымаем его из под низа экрана в созданную полость. В итоге имеем футер прижатый к низу экрана.

3) Резиновая верстка интересует многих, поэтому наш урок посвящен верстке сайта, точнее сказать верстке каркаса сайта, который должен иметь два сайдбара фиксированной ширины, в нашем случае это 240px, но при этом на любом экране от 240px до 1920px наш каркас должен произвольно растягиваться по ширине, причем html верстка должна понимать, что нам нужно только центральную часть растянуть, сайдбар не трогать!

Ну что ж, надо так надо. Верстка готова. Нам осталось разобрать, за счет чего же она себя так ведет?
С обволакивающим контейнером все понятно, но как html верстка удерживает сайдбары, растягивая контентную часть?

Здесь все не так сложно как могло бы показаться на первый взгляд. Верстка css стилей, это тоже верстка, а значит подчиняется определенным правилам верстки стилей сайта.
Важную роль в этом играет отступ слева и справа, который мы прописали для тега article. Если посмотреть html код, то увидим, что есть некий контейнер с id=container, имеющий 100% ширины. Внутри него есть наш article, который имеет внутренние отступы слева и справа, padding:10px 270px. Но ширина для него не указана, а с учетом того, что он имеет display:block(мы указали для html5 элементов, чтобы они перестали быть инлайновыми), он будет на всю ширину, а не имея явной ширины, отступы внутрь будут в пределах контейнера, а не за ними. Благодаря такой комбинации мы имеем id=container, внутри которого article с отступами слева и справа по 270px. Сайдбары у нас по 240px, а по 20 на отступы от центрального article.

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

Закрывается перед левым и правым aside, таким образом они находятся под main, который уже сделал отступы слева и справа по 240px, то есть мы как и в случае с прижатым к низу футером имеем слева и справа пустое место по 240px, а сайдбары сразу под левым сайдбаром, оба. Им просто очень нравится правило по умолчанию находиться в левом верхнем углу. Учитывая что над ними находится , место слева под ним и будет являться следованию правилам. Вот такая она хитрая, эта верстка, а резиновая верстка еще хитрее. Но лекарство от этого есть, и мы как раз его и обсуждаем. Поэтому для нас это просто верстка..

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

Левый блок идет первый, поэтому дадим ему отрицательный отступ на margin-left:-100% , и он обхитрит сам себя, появившись ровно в пустом месте, которое нам приготовил article. Верстка это хорошо, резиновая верстка еще лучше, а готовая верстка, это еще лучше, особенно после долгих сражений. Поэтому контрольный выстрел в нашего оппонента под названием резиновая верстка - это сдвиг правого сайдбара на его же ширину влево. Почему влево?
Да потому что он был справа, не влез на 240px, и его сместило вниз, в левый угол, все по правилам, html тут не виноват, а css тоже с характером. Поэтому margin-left:-240px решит оставшуюся проблемку, сдвинув правый блок ровно в приготовленное пустое место справа от aside.

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

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

Резиновая верстка

В сайтостроении используется такой термин, как резиновая верстка. Попробуем разобраться, что он означает.

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

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

Виды верстки сайта можно классифицировать по способу реализации и способу отображения. По способу реализации верстка может быть:

• Табличная;
• Блочная;
• Комбинированная.

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

А вот способ отображения важен для посетителя сайта. По этому признаку верстка бывает:

• Фиксированная (статическая);
• Резиновая (тянущаяся);
• Гибридная;
• Респонсивная (адаптивная).

В этой статье подробнее остановимся на резиновой верстке сайта, ее достоинствах и недостатках.

При резиновой верстке сайт масштабируется в зависимости от ширины окна браузера. Такой способ верстки появился в связи с ростом размеров мониторов и их разрешения. Первые массовые мониторы имели разрешение 640*480, потом активно начали внедряться мониторы с разрешением 800*600 и 1024*768. Возникла необходимость делать сайты, ширина которых менялась с изменением ширины окна браузера, так как сайты с фиксированной шириной не всегда адекватно отображались на различных мониторах. С одной стороны, разработчик сайта стремится использовать всю площадь больших экранов для размещения информации, с другой стороны, ему нужно учесть возможности тех пользователей, которые имеют старые мониторы с небольшим разрешением. В настоящее время размеры мониторов выросли еще больше, и никого не удивишь разрешением 2048*1152.

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

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

Но зато пользователь может сам решать, в каком виде просматривать сайт. С помощью браузера он может настраивать нужную ему ширину.

Web-страница состоит из элементов различных типов, которые масштабируются по-разному. Например, текстовые блоки можно легко растягивать по горизонтали. Именно в них содержится обычно большая часть информации, а, значит, при резиновой верстке экран будет максимально информативен. Но растягивать бесконечно страницу нельзя, ее будет трудно читать. Считается, что оптимальная ширина текста должна составлять около 45 символов. Глаз должен охватывать всю строку целиком, тогда при чтении утомляемость будет минимальной. Если же текст на странице резинового сайта растянуть на всю ширину монитора размером, например, 27”, то при чтении придется даже поворачивать голову. В этом случае текст можно располагать колонками, но такое решение возможно, если контент состоит из отдельных не связанных друг с другом коротких блоков. Если же расположить колонками большой непрерывный текст, его придется прокручивать сначала вниз, а потом – вверх, на начало следующей колонки, что неудобно для пользователя.

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

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

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

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

Таким образом, резиновая верстка сайта имеет как плюсы, так и минусы. Растяжение ширины страницы позволяет увеличить ее информативность, но тянуть бесконечно нельзя, как и сжимать.

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

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

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

Для освоения возможностей резиновой верстки сайта рекомендую единственный в своем роде курс «5 техник резиновой верстки».

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Физика Падения

Любите ли вы физику? В Физике Падения вам нужно будет проделать серию успешных физических экспериментов. Вам нужно будет расположить имеющиеся детали так, чтобы шарик попал в вентилятор. Чем быстрее вы все организуете, тем больше очков получите. Ну что же, желаем удачи!