В 6-ом уроке мы довели хтмл-страницу почти до нужного вида, но хотелось бы оторвать шапку сайта от блоков меню и контента. Для этого используем специальный параметр margin, который отвечает за параметры полей, допишем этот параметр в таблицу стилей для шапки (header):
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:10px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }
Вы заметили, что дописана строка не просто margin:10px, а вот так margin-bottom:10px - так мы указали параметры полей только для нижней стороны слоя, а не для всех сторон.
Итак, вы запомнили что поля задаются параметром margin, но это поля внешние, а можно еще задать поле (отбивка) и внутри слоя с помощью параметра padding, попробуйте дописать его в таблицу:
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:10px; padding:10px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }
Теперь посмотрите как изменилась хтмл-страница, текст в шапке должен находиться на расстоянии 10 пикселей от края слоя:
Можно задать отбивки и для остальных слоев, но мы не будем этого делать, поскольку мы уже сделали отступы между слоями и делать еще поля внутри слоев нет надобности, поэтому просто оставим внешние поля и немного их увеличим:
/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:15px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:645px; height:300px; float:right; }
С полями (margin) и отбивками (padding) разобрались и теперь перейдем к форматированию шрифтов.
Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS
Научитесь зарабатывать в Интернете + ПартнЁрка
Оставить комментарий
Связанные записи
- Уроки FrontPage (0)
- Уроки Dreamweaver (0)
- Уроки CSS (0)
- Урок 8. Форматирование шрифтов (CSS) (0)
- Урок 6. Положение слоев относительно горизонтали (0)
- Уроки CSS для новичков (0)
- Урок 5. Собираем 3 блока в один (в 4-й) (0)
Все записи