Чтобы сделать резиновый шаблон, вам нужно изменить единицы измерения ширины у селекторов #leftcol и #rightcol, а именно, вместо пикселей установить проценты. А для селектора #wrap указать минимальную ширину min-width, при которой будет появляться горизонтальная полоса прокрутки. Например, возьмем фиксированный шаблон с тремя колонками, в файле style.css укажем следующие свойства для селектора #wrap:
#wrap {
background-color: white;
min-height: 100%;
position: relative;
min-width: 700px;
}
И для боковых колонок вместо 180px установим ширину, равную 20%.
#leftcol {
width: 20%;
float: left;
}
#rightcol {
width: 20%;
float: right;
}
Посмотреть примеры для резинового шаблона можно, перейдя ссылкам:
- Резиновый шаблон с одной колонкой;
- Резиновый шаблон с двумя колонками;
- Резиновый шаблон с двумя колонками (узкая колонка справа);
- Резиновый шаблон с тремя колонками.
Все шаблоны для фиксированного макета находятся в папке fix, для резинового макета в папке float данного учебника.
Комментарии