резиновая верстка сайта Как создать свой сайт > Вебмастеру > Создание своего сайта > Блог Андрея Морковина > «Резиновая» вёрстка на div

«Резиновая» вёрстка на div-ах

Настоящий джентельмен — это человек, который может играть на волынке,
но не играет.
Томас Бичем.
12 октября 2009 года

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

 

 

    Ранее рассмотренная нами фиксированная модель превращается в «резиновую» всего-навсего заменой ширины блока <div id="wrapper"> в пикселях на ширину в процентах. Таким образом, ширина свёрстанного сайта будет изменяться в зависимости от размера окна браузера.

    В видеоуроке (он ниже) я установил ширину блока <div id="wrapper"> в 100% от ширины окна браузера. Можно задавать и меньшее количество процентов. Тогда сайт будет занимать лишь часть окна браузера.

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

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

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

    Правильным будет указать равные левый и правый внешние отступы для элемента <div id="wrapper"> и значение их — auto. Если левый и правый отступы равны, то элемент выравнивается посередине.

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

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

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

margin: 0 auto;

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

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

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

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

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

border: 1px solid black;

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

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

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

  1. При помощи сайта csstemplater сформируем HTML-каркас вёрстки;

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

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

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

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

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

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

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

    Автор: Андрей Морковин.

 

Ещё материалы по этой теме:

 

 

Комментарии:

Вен
Спасибо, все работает.
У меня несколько другой вопрос… В общем, решила написать свой трехколончатый резиновый (для центральной колонки) шаблон. Распологаются они по горизонтали правильно, но по вертикали меню начинаются там, где заканчивается блок контента.
***
html,body {
height: 100%;
margin: 0;
padding: 0;
border: solid 1px;
}

#menu_left {
width: 150px;
float: left;
background:#FFC597;
margin-left: 0px;
position: relative;
text-align:center;
height: 100%;
}

#menu_right {
float: right;
background:#FFC597;
margin-right: 0px;
position: relative;
width: 150px;
text-align:center;
}

#container {
background-color:#0ff;
width: 100%;
height: 100%;
padding: 0px;
float: left;
overflow: hidden;
display:inline;
}

#content{

margin-left: 150px;
margin-right: 150px;
border: solid 1px;
}
Текст слева
Текст справа
Пожалуйста, подскажите, в чем ошибка… Хочется понять, а не тупо списать готовое.

Андрей Морковин
Присылайте HTML и CSS на почту (и такой, чтобы открыв HTML файл, я увидел страницу с проблемой, а то ничего не пойму )
Попробую помочь.

Вен
Ой, код-то здесь не отправишь))
В общем блоки:
body
container
content-закритие content
menu_left-закритие menu_left
menu_right-закритие menu_right
закритие container
закритие body

Андрей Морковин
На почту — на почту. Я так ничего не понимаю.

Ever
Привет.
Тоже интересует дизайн с тремя колонками, где центральная — резиновая, а боковые — фиксированной ширины. Можно об этом поподробнее?

Вен
По сути, оказалось все тоже самое, только удали хэд и футер.

Андрей Морковин
А что именно Вас интересует? Где нужна подробность?

Ever
Все уроки пока не посмотрел (ваш замечательный сайт обнаружил буквально вчера), поэтому конкретные вопросы, наверное, будут позже.
Начинаю верстать свой первый шаблон для joomla 1.5 (хотя, по большому счету, какая разница). Ну и вообще это мой первый опыт.
Дизайн планируется такой:
Три колонки, «резиновость» только за счет средней колонки, минимальная и максимальная ширина сАмого внешнего div ограничена. Ну плюс хедер и футер. примерно так :).
Или уж фиксированный делать… Никак не могу определиться, честно говоря. Сейчас ширина фиксированная и не сказать, что это как-то совсем неудобно…
Сайт небольшого города, он уже функционирует пару месяцев, но задумал сменить дизайн, сделать более удобным и наглядным.
За уроки огромное спасибо

Андрей Морковин
Если сайт на фиксированной ширине удобен, то и не нужна никакая резина.

Вен
Хотела спросить: При верстке как в примере, все колонки-middle, т.е колонки контента и меню по высоте выравниваются по высоте их содержимого. Это так и задумано?!
Пыталась сделать так, чтобы они занимали все свободное порстранство между хэдом и футером — в результате — полное отсутствие результатов. Эффект получается только при удалении height: auto !important;, причем тогда блоки middle «преползают» через футер

Валерий
Меня тоже этот вопрос интересует.
Столкнулся с проблемой, что необходимо сайд бар растянуть между хедером и футером.

Never Lex
Это отдельная тема. Думаю, Андрей запишет урок по ней А звучит она как «Колонки одинаковой ширины». Можно погуглить или поискать инфу на htmlbook.ru, а не зацикливаться на видео уроках

Дмитрий
Супер сайт!!!Очень информативный и тема очень хорошая!!!Спасибо большое Вам!

Андрей Морковин
И Вам спасибо на добром слове
Рад, что материалы сайта оказались полезными.

Oleg
Огромное спасибо за уроки, давно искал что-то подобное!!!
После просмотра возник вопрос:
А как сделать резиновыми сайдбары, а центр фиксированной ширины?

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

Саша Туманов
Андрей, помогите мне пожалуйста разобраться в логике расположения элементов выпадающих из потока, а то я уже спать не могу %)…
Как получается, что margin-left: -100% распологает левый сайдбар перед контейнером?! Получается, что плавающий блок, сдвинутый за границу экрана становится первым? Почему тогда оказывается третьим правый сайдбар? Может я не уяснил какой то важный принцип? :'(

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

Андрей Морковин
Да, все правильно, очередность расположения тут не причем. Левый сайдбар налазит поверх блока с контентом отъехав влево на 100%.

Never Lex
Да. Допереть до этого воистену сложно. Чуть моник лбом когда-то не разбил

Сергей
А подскажите пожалуйста.
Сайт эластичный должен одинаково просматриваться на мониторах с расширением 1024х768 и 1280х1024.
Вопрос: как сделать образно говоря чтобы отступы были плавающими, тобиш картинка стоит с лева margin-left: 115px; при расширении 1280х1024, а при 1024х768 должно становиться 25 px как добиться такого результата?
За ранее благодарен за ответ.

Андрей Морковин
Задать отступы в процентах.
Дело в том, что отступ можно задавать не в фиксированных единицах (в пикселах), а в процентах. В результате отступ будет изменяться в зависимости от ширины родительского элемента.
Чувствую некоторую неправильность в Вашем вопросе. У монитора посетителя могут быть любые разрешения, начиная с 1024*768, вы же ограничились только двумя. А что, если посетитель использует ноутбук с широкоформатным экраном?
Я к тому, что процентное значение отступа нужно подбирать таким образом, чтобы сайт нормально смотрелся на всех популярных разрешениях, начиная с 1024*768.

Сергей
Сразу хочу поблагодарить за быстрый ответ.
Андрей если Вам нетрудно прошу взглянуть на эти файлы
***
***
и подсказать как лучше сверстать и как задать правильно структуру этот сайт.
Макет есть в psd в двух изображениях один под расширение 1024 другой под 1280

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

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

Intcorp
Как сделать заливку content, чтобы заливка не распространялась дальше видимых границ блока? Ато залил content, а оно и весь container прихватило и залило под правой и под левой колонками, что неприемлемо.
Макет резиновый с хедером, футером и двумя колонками, сгенерирован csstamplater

Андрей Морковин
Заливка блока не может распространяться за его границы.

Сергей
Посматрел ваши ролики это хорошо… Но всёравно оcтаётся вапросик по «Резиновой верстке на div-ах» как зделать правый и левый блок фиксироваными а центр резиновым… Как фиксировать блоки много способов и ето не проблема… проблема вто что переходя с одной страницы на другую (пример главная страница дапустим я зафиксирую а на другой в этомже блоке по середине размер должен поменятся на width:100%; левая и правая просто проподает, они ненужны ) но у меня фиксировано!…(заметте что не жиматся должно а раздвинутся в шаблоне) Хорошо делаю резиновым центр! тогда правая уходит в лево падая под 1 колонку или уходит под центр еcли задать width:100%; Зато вторая страница идеальна… Я не силён CSS вот сижу всю ночь ковыряю нечего невыходит…(в table работает как часики в дивахах ну просто не хочет) Хотелось чтоб подсказали сам дадумаю… Я так думаю что я не один стакнулся с такой проблемой.

datoshka
Классные уроки и вообще Вы супер, Андрей.
Сгенерировал каркас с помощью csstemplater как и в вашем уроке («Резиновая вёрстка на div-ах»). В Opera, FF и IE всё нормально, а вот в IE6 и IE7 появились горизонтальная и вертикальная прокрутки. Подскажите пож-та в чём проблема? Я новичок в области сайтостроения. Спасибо!

datoshka
Ура! Решил эту проблему.
В style_ie.css вместо 1000px указал 100%, а в самом style.css для IE7 прописал:
*:first-child+html #wrapper {
min-width: 990px;
}
*:first-child+html #footer {
min-width: 990px;
}
и всё отлично. Во всех браузерах всё так как и должно быть: IE5.5, IE6, IE7, IE8, Opera, FF.

Руслан
Подскажите пожалуйста что такое вяленая или валеная верстка

Андрей Морковин
Валидная верстка — это верстка выполненная в соответствии со стандартами и одобренная программой автоматической проверки соответствия стандартам (валидатором).
Вот здесь можно проверить свой сайт на валидность: http://validator.w3.org/

Юс
Спасибо очень понравился ваш сайт… выяснил для себя несколько полезных вещей.

Юсуф
У меня одна проблема, а как сделать так что бы текст тоже был резиновым, тоесть на большом экране буквы подбирали свой пиксель, например 12px на экране 1920х1080 и 12 px на экране маленьких экранах??? у меня не получается…

Олег
Спасиоб за полезную инфу, то что я искад. Кидайте ссылку на статью сюда — ***

Ильмир
Спасибо за урок!

Гость
Подробный видео урок по созданию 100% резинового сайта.
***

Даниил
Спасибо за полезный урок. Хотелось бы вот какой вопрос разобрать. Страничка состоит из трех блоков (шапка, контент, подвал). Как сделать так, чтобы контент занимал все оставшееся место между шапкой и подвалом (не зависимо от того на сколько он заполнен)? Я пробовал создать такую страничку на сайте csstemplater но, к сожалению мне такой вариант не подходит так как там контент белого цвета такого-же как и тег #wrapper а у меня он должен быть другого цвета. как быть?

фотогаф
Спасибо за урок! Сам верстать хочу на divах.

Виталий
Спасибо большое за урок….но хотелось бы узнать как сделать заголовок, если у меня есть 3 картинки (т.е. 2 уголка и вырезка из центра)

Сергей
Здравствуйте, Андрей. Помогите, пожалуйста, с футером. Я уже писал Вам на почту. Не уверен, что дошло.

Александр
А существуют какие-либо исследования, какова сейчас ситуация в рунете — какая доля сайтов с резиновой версткой?

Alexlibi
Андрей, тут вот звучал вопрос
«Хотела спросить: При верстке как в примере, все колонки-middle, т.е
колонки контента и меню по высоте выравниваются по высоте их
содержимого. Это так и задумано?!
Пыталась сделать так, чтобы они
занимали все свободное порстранство между хэдом и футером — в результате
— полное отсутствие результатов. Эффект получается только при удалении
height: auto !important;, причем тогда блоки middle «преползают» через
футер».
Так вот у меня он не решился. Есть хедер. Под ним, допустим, есть мидл див. В самом низу — футер. Так вот если у меня в мидл очень мало текста, то между футером и миделом остается пространство. А я бы хотел, что бы оставшаяся часть мидела автоматом доходила до футера, а не заканчивалась вместе с текстом. Т.е. по высоте у меня ниже текста див не опускается автоматом до футера. Как это реализовать. Заранее Спасибо.

Alexander Kuzmenko
Респект тебе МОРКОВКИН!

 

⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

 

Полезные ссылки:

Кто такие «Одноклассники»? Как поставить «ёлочки»?

 


основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!