Резиновая по ширине и высоте верстка (заготовка)
В современной практике верстки веб страниц используется два варианта. Резиновая верстка и фиксированная. Вариант резиновой верстки мы с вами и рассмотрим поподробнее.
Нашей целью будет создать вот такой макет
Начать стоит со стуктуры макета. У меня она выглядит так:
<div class="wrap">
<div class="header">
Шапка
</div>
<div class="sidebar-left">
Левая колонка
</div>
<div class="sidebar-right">
Правая колонка
</div>
<div class="content">
Центральная колонка
</div>
<div class="clear"></div>
<div class="empty"><!-- --></div>
</div>
<div class="footer">
Футер
</div>
В файле стилей зададим странице и основному контейнеру высоту в 100%
html,body{height:100%;}
.wrap{position:relative;min-height:100%;height:auto !important;height:100%;} /* также надо задать относительное позиционирование */
Теперь зададим слою empty высоту 100 пикселей (равна высоте подвала). Также пропишем стили подвала
.empty{height:100px;}
.footer{position:relative;height:100px;margin-top:-100px;background:#ddd}
Все вместе это дает нам прижатый к низу футер, вне зависимости от высоты страницы (если конечно контента не больше)
Далее зададим остальные стили. В нашем случае это шапка три колонки
.header,.footer,.sidebar-left,.sidebar-right,.content{font-size:24px;text-transform:uppercase;background:#eee;line-height:100px;padding:0 30px;}
.header{height:100px;padding:0 30px;}
.sidebar-left,.sidebar-right{width:220px;background:#ccc;}
.sidebar-left{float:left;}
.sidebar-right{float:right;}
.content{margin:0 280px;background:#fafafa;}
Результат работы можно посмотреть по ссылке: тыц
Tweet
БлОг кРеАт�вНоГо КоТа
Блог Nubic’а
Форум о Shop-Script'е
Комментарии
Отличная статья !
Выбирать резина или фиксированный размер, я обычно привык полагаясь на интуицию, еще до того как макет будет завершен. Но все не могу для себя определить что из этих типов удобнее. Наверное по обстоятельствам все ж.
Часто возникает вопрос как лечить набегание блок друг на друга при уменьшении окна браузера. например задать все же фикс размеры, например минимальная ширина и пр. Есть идеи ?
задавай минимум 1000 пикселей ширине макета. Для 6 осла экспешн делать правда надо будет
Находил много на блогаг готовых заготовок, но только у тебя ето с инструкцией и полным описание строк. Очень классно. Побольше такого
цитата “Для 6 осла экспешн делать правда надо будет”
неплохо было бы написать сразу об этом, а то тут же возникает вопрос “че-как-зачем”
@KAMA3 HABO3A: для этого есть гугол ))
Пример нерабочий. Попробуйте вставить в левую колонку 8 и посмотрите что получится.
@alexanderfazylov:
что вставить в левую колонку?
Полный бред – ты сам хоть пробовал вставить в блоки больше одного слова, пробовал в разных броузерах проверять – полное гавно
@123:
Если не можешь даже скопипастить нормально, то я тут нипричем
наличие рук из жопы не освобождает от ответственности
После div style=”clear:both” в центральной части вся дальнейшая информация будет располагаться с огромным промежутком равным высоте левой или правой колонок (самой длинной). Неудобно – пошла искать другую верстку.
worchik
центральную колонку можно сделать с помощью отрицательного отступа еще
Говно. Вот так лучше сделай:
HTML:
Левое меню
Правое меню
{info}{content}
CSS:
#maket {
width:100%;
margin:0 auto;
}
#content {
margin-left:208px;
margin-right:208px;
}
#left {
width:200px;
float:left;
}
#right {
width:200px;
float:right;
}
блин, тут html не публикуется
Короче, кому нужен правильный – рабочий макет на мыло пишите steepseller@mail.ru
Товарищи, тут упущен важный момент.
Если сделать вот такой порядок div-ов в разметке:
[code]
Левая колонка
Центральная колонка
Правая колонка
[/code]
то магии не будет
Важно, чтобы div-ы с float-ом шли до контентного div-а. То есть как указано в примере (повторю):
[code]
Левая колонка
Правая колонка
Центральная колонка
[/code]
нормальная верстка!
Спасибо за статью! Сделал по аналогии, все работает.