Gaist-Endruy ( off )
( 08:16 01-09-2009 )
Тэгом к странице подгружаются CSS стили из внешних файлов. Общий стиль style.css лежит в корне сайта (как правило, это папка /public_html) и предназначен для компьютерных браузеров (media="screen"). Стиль print.css будет использоваться для печати, об этом чуть ниже. Далее с помощью JavaScript определяем браузер пользователя и, если это Internet Explorer 5, ему отдается CSS стиль из файла ie5.css.

---

Gaist-Endruy ( off )
( 08:17 01-09-2009 )
Первым следует div-блок header, предназначенный для заголовка страницы. В служебном блоке main нет текста, но в него вложено 4 блока: content для основного текста страницы, leftmenu и rightmenu для левого и правого меню соответственно и блок footer для «подвала» макета.

---

Gaist-Endruy ( off )
( 08:17 01-09-2009 )
Все блоки лишь определены в XHTML коде, за их свойства и расположение отвечает CSS.

---

Gaist-Endruy ( off )
( 08:17 01-09-2009 )
Общий CSS стиль

---

Gaist-Endruy ( off )
( 08:18 01-09-2009 )
body {
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
}
Прикрепленный файл .txt: скачать (66b)

---

Gaist-Endruy ( off )
( 08:18 01-09-2009 )
Первым делом определимся со стилем (т. е. окна браузера) - убираем внешние и внутренние отступы, добавляем фоновый цвет (#f0f0f0 - светло-серый).

---

Gaist-Endruy ( off )
( 08:19 01-09-2009 )
#header {
width: 98%;
margin: 0px;
padding: 1%;
background-color: orange;
}
Прикрепленный файл .txt: скачать (80b)

---

Gaist-Endruy ( off )
( 08:19 01-09-2009 )
Для блока заголовка удалены внешние отступы (margin: 0px;), выбрана оранжевая заливка и ширина в 100% родительского элемента (им является ). 100% складывается из 98% ширины содержимого блока и по 1% для padding-left и padding-right. Сокращенная запись padding: 1%; задает отступ со всех четырех сторон (top, left, bottom, right).

---

Gaist-Endruy ( off )
( 08:19 01-09-2009 )
Блок будет располагаться в нормальном потоке, что нас пока устраивает, поэтому в позиционировании нет необходимости.

---

Gaist-Endruy ( off )
( 08:20 01-09-2009 )
#main {
position: relative;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #ccc;
overflow: hidden;
Прикрепленный файл .txt: скачать (115b)

---