Макет на две колонки (меню справа)
Макеты, которые мы собрали выше, можно использовать как шаблоны. На их основе сформируем страницу, с блоком "menu" заданной ширины, находящимся справа.
Задача 3: Создать макет из двух колонок с "шапкой" и "подвалом". Область основного содержимого (контента) - слева, вторая колонка (меню) - справа.
Рассмотрим вариант, когда правая колонка занимает 20% от ширины страницы, а ширина левой колонки устанавливается автоматически, исходя из размера окна браузера.
Положение слоев в листе стилей не меняется. Вначале идет слой "menu", а потом "content". Это правило действует независимо от того, как будут отображаться на Web-странице колонки - меню слева от контента или наоборот, справа. Код модифицируется незначительно:
| меню слева | меню справа | |
| #menu {
width: 20%; float: left; background: #f4dac0; font-size: 90%; padding: 40 0px } #content { margin-left: 20%; font-size: 90%; text-indent: 20px; text-align: justify; padding: 20 15px } |
#menu {
width: 20%; float: right; background: #f4dac0; font-size: 90%; padding: 40 0px } #content { margin-right: 20%; font-size: 90%; text-indent:20px; text-align: justify; padding: 20 15px } |
|
| #container {
background: #faf0e6 url(image/back.gif) repeat-y left; width:100%; margin: auto; } |
#container {
background: #faf0e6 url(image/back.gif) repeat-y right; width:100%; margin: auto } |
Изучаем HTML-код, смотрим, что получилось.
