Резиновая верстка на div-ах
Объявления:
Уважаемый читатель, устраивайтесь поудобнее и я познакомлю вас с принципами резиновой блочной верстки сайта.
Ранее рассмотренная нами фиксированная модель превращается в резиновую всего-на-всего заменой пикселной ширины блока <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-а не влияет на ширину блока). Это может привести к спрыгиванию обведенного блока с того места, которое он будет занимать без обводки.
А теперь переходите к просмотру видео.
О чем же пойдет речь в данном видеоуроке:
- При помощи сайта 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 МБайт).
С уважением, Андрей Морковин.
Метки: Верстка видео допы
Похожие материалы:
Отзывов: 35 на «Резиновая верстка на div-ах»
, 25.10.2009 в 18:11
Спасибо, все работает.
У меня несколько другой вопрос… В общем, решила написать свой трехколончатый резиновый (для центральной колонки) шаблон. Распологаются они по горизонтали правильно, но.. по вертикали меню начинаются там, где заканчивается блок контента.
***
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;
}
Текст слева
Текст справа
Пожалуйста, подскажите, в чем ошибка… Хочется понять, а не тупо списать готовое.
, 25.10.2009 в 18:15
Присылайте HTML и CSS на почту (и такой, чтобы открыв HTML файл, я увидел страницу с проблемой, а то ничего не пойму
)
Попробую помочь.
, 25.10.2009 в 18:14
Ой, код-то здесь не отправишь))
В общем блоки:
body
container
content-закритие content
menu_left-закритие menu_left
menu_right-закритие menu_right
закритие container
закритие body
, 25.10.2009 в 18:16
На почту – на почту. Я так ничего не понимаю.
, 29.10.2009 в 16:07
Привет.
Тоже интересует дизайн с тремя колонками, где центральная – резиновая, а боковые – фиксированной ширины. Можно об этом поподробнее?
, 29.10.2009 в 20:01
По сути, оказалось все тоже самое, только удали хэд и футер.
, 30.10.2009 в 18:28
А что именно Вас интересует? Где нужна подробность?
, 30.10.2009 в 18:46
Все уроки пока не посмотрел (ваш замечательный сайт обнаружил буквально вчера), поэтому конкретные вопросы, наверное, будут позже.
.
Начинаю верстать свой первый шаблон для joomla 1.5 (хотя, по большому счету, какая разница). Ну и вообще это мой первый опыт.
Дизайн планируется такой:
Три колонки, “резиновость” только за счет средней колонки, минимальная и максимальная ширина сАмого внешнего div ограничена. Ну плюс хедер и футер. примерно так
Или уж фиксированный делать… Никак не могу определиться, честно говоря. Сейчас ширина фиксированная и не сказать, что это как-то совсем неудобно…
Сайт небольшого города, он уже функционирует пару месяцев, но задумал сменить дизайн, сделать более удобным и наглядным.
За уроки огромное спасибо
, 31.10.2009 в 18:39
Если сайт на фиксированной ширине удобен, то и не нужна никакая резина.
, 30.10.2009 в 20:25
Хотела спросить: При верстке как в примере, все колонки-middle, т.е колонки контента и меню по высоте выравниваются по высоте их содержимого. Это так и задумано?!
Пыталась сделать так, чтобы они занимали все свободное порстранство между хэдом и футером – в результате – полное отсутствие результатов. Эффект получается только при удалении height: auto !important;, причем тогда блоки middle “преползают” через футер
, 04.11.2009 в 16:46
Меня тоже этот вопрос интересует.
Столкнулся с проблемой, что необходимо сайд бар растянуть между хедером и футером.
, 14.12.2009 в 22:48
Это отдельная тема. Думаю, Андрей запишет урок по ней
А звучит она как “Колонки одинаковой ширины”. Можно погуглить или поискать инфу на htmlbook.ru, а не зацикливаться на видео уроках 
, 03.11.2009 в 09:13
Супер сайт!!!Очень информативный и тема очень хорошая!!!Спасибо большое Вам!
, 04.11.2009 в 00:28
И Вам спасибо на добром слове
Рад, что материалы сайта оказались полезными.
, 08.11.2009 в 16:04
Огромное спасибо за уроки, давно искал что-то подобное!!!
После просмотра возник вопрос:
А как сделать резиновыми сайдбары, а центр фиксированной ширины?
, 08.11.2009 в 20:34
Попробуйте заменить пиксельное задание ширины сайдбаров на процентное, а процентную ширину средней части на пиксельную. Что-то в этом духе
, 20.11.2009 в 22:15
Андрей, помогите мне пожалуйста разобраться в логике расположения элементов выпадающих из потока, а то я уже спать не могу %)…
Как получается, что margin-left: -100% распологает левый сайдбар перед контейнером?! Получается, что плавающий блок, сдвинутый за границу экрана становится первым? Почему тогда оказывается третьим правый сайдбар? Может я не уяснил какой то важный принцип? :’(
, 20.11.2009 в 22:31
Все, спасибо )) сам допер ))))
Получается, что плавающие элементы как бы образуют свой поток, слева на право, сверху вниз. Сдвигая левый сайдбар на ширину экрана, я размещаю его на том же месте, только выше!! и очередность расположения элеметнов тут не при чем )))
, 20.11.2009 в 23:00
, 14.12.2009 в 22:51
Да. Допереть до этого воистену сложно. Чуть моник лбом когда-то не разбил
, 29.11.2009 в 12:36
А подскажите пожалуйста.
Сайт эластичный должен одинаково просматриваться на мониторах с расширением 1024х768 и 1280х1024.
Вопрос: как сделать образно говоря чтобы отступы были плавающими, тобиш картинка стоит с лева margin-left: 115px; при расширении 1280х1024, а при 1024х768 должно становиться 25 px как добиться такого результата?
За ранее благодарен за ответ.
, 29.11.2009 в 12:46
Задать отступы в процентах.
Дело в том, что отступ можно задавать не в фиксированных единицах (в пикселах), а в процентах. В результате отступ будет изменяться в зависимости от ширины родительского элемента.
Чувствую некоторую неправильность в Вашем вопросе. У монитора посетителя могут быть любые разрешения, начиная с 1024*768, вы же ограничились только двумя. А что, если посетитель использует ноутбук с широкоформатным экраном?
Я к тому, что процентное значение отступа нужно подбирать таким образом, чтобы сайт нормально смотрелся на всех популярных разрешениях, начиная с 1024*768.
, 29.11.2009 в 13:47
Сразу хочу поблагодарить за быстрый ответ.
Андрей если Вам нетрудно прошу взглянуть на эти файлы
http://test-s2.freetzi.com/1024.jpg
http://test-s2.freetzi.com/1280.jpg
и подсказать как лучше сверстать и как задать правильно структуру этот сайт.
Макет есть в psd в двух изображениях один под расширение 1024 другой под 1280
, 01.12.2009 в 13:08
Красивый сайт.
Тут ничего конкретного я посоветовать не могу. Нужно знать требования заказчика, дизайнера ну и кроссбраузерно (по возможности дивами) верстать в соответствии требованиям и макетам используя минимум вложенных друг в друга тегов.
Из двух картинок вижу, что макет (вроде как) фиксированной ширины с левым сайдбаром.
, 01.12.2009 в 15:29
Два макета для того, что бы Вы могли увидеть как должен сайт отображаться при вышеуказанных расширениях.
Требование заказчика особого нету, главное что бы отображался одинаково при данных расширениях и конечно дивами.
, 22.12.2009 в 19:06
Как сделать заливку content, чтобы заливка не распространялась дальше видимых границ блока? Ато залил content, а оно и весь container прихватило и залило под правой и под левой колонками, что неприемлемо.
Макет резиновый с хедером, футером и двумя колонками, сгенерирован csstamplater
, 22.12.2009 в 19:11
Заливка блока не может распространяться за его границы.
, 05.01.2010 в 14:13
Посматрел ваши ролики это хорошо… Но всёравно оcтаётся вапросик по “Резиновой верстке на div-ах” как зделать правый и левый блок фиксироваными а центр резиновым… Как фиксировать блоки много способов и ето не проблема… проблема вто что переходя с одной страницы на другую (пример главная страница дапустим я зафиксирую а на другой в этомже блоке по середине размер должен поменятся на width:100%; левая и правая просто проподает, они ненужны ) но у меня фиксировано!…(заметте что не жиматся должно а раздвинутся в шаблоне) Хорошо делаю резиновым центр! тогда правая уходит в лево падая под 1 колонку или уходит под центр еcли задать width:100%; Зато вторая страница идеальна… Я не силён CSS вот сижу всю ночь ковыряю нечего невыходит…(в table работает как часики в дивахах ну просто не хочет) Хотелось чтоб подсказали сам дадумаю… Я так думаю что я не один стакнулся с такой проблемой.
, 08.02.2010 в 05:52
Классные уроки и вообще Вы супер, Андрей.
Сгенерировал каркас с помощью http://csstemplater.com/ как и в вашем уроке (”Резиновая вёрстка на div-ах”). В Opera, FF и IE всё нормально, а вот в IE6 и IE7 появились горизонтальная и вертикальная прокрутки. Подскажите пож-та в чём проблема? Я новичок в области сайтостроения. Спасибо!
, 08.02.2010 в 08:54
Ура! Решил эту проблему.
В 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.
, 10.02.2010 в 15:48
Подскажите пожалуйста что такое вяленая или валеная верстка
, 12.02.2010 в 13:11
Валидная верстка – это верстка выполненная в соответствии со стандартами и одобренная программой автоматической проверки соответствия стандартам (валидатором).
Вот здесь можно проверить свой сайт на валидность: http://validator.w3.org/
, 03.03.2010 в 22:28
Спасибо очень понравился ваш сайт… выяснил для себя несколько полезных вещей.
, 07.05.2010 в 18:02
У меня одна проблема, а как сделать так что бы текст тоже был резиновым, тоесть на большом экране буквы подбирали свой пиксель, например 12px на экране 1920х1080 и 12 px на экране маленьких экранах??? у меня не получается…
, 18.05.2010 в 14:37
Спасиоб за полезную инфу, то что я искад. Кидайте ссылку на статью сюда – http://rucoders.ru/t166.htm