Урок 5. Собираем 3 блока в один (в 4-й)

Рубрика: Уроки CSS
Метки/Tags: , , ,

У нас есть три блока, которые нужно собрать в один, 4-й блок, он будет определять размеры хтмл-страницы. Для этого в код файла index.html добавьте следующие строки:

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
 <div id=page>
<div id=header>Первый блок</div>
<div id=menu>Второй блок</div>
<div id=content>Третий блок</div>
 </div>
</body>
</html>

Так мы сделали 4-й слой под названием page, он обьединил в себе все три слоя header, menu и content. Теперь для слоя page нужно задать параметры с таблице стилей:

/* таблица стилей */
/* задаем размещение блоков */
 #page { width:800px; background:#ffffcc;}
#header { background:red; width:800px; height:100px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; }

Мы задали только ширину и фон для слоя. Если теперь посмотреть на нашу страницу, то видно, что слой page объединил все три слоя:

Шапка (header) и меню (menu) находятся на своих местах и двигать их не нужно, а вот слой content должен находиться справа от меню, как решить эту задачу читайте в следующем 6-ом уроке.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS



Комментариев нет
<NOINDEX>

Оставить комментарий

</NOINDEX>



« Урок 4. Ширина и высота слоев (div)
Урок 6. Положение слоев относительно горизонтали »


Связанные записи

Все записи