Блоки в CSS или Сайт без таблиц

Блоки в CSS или Сайт без таблиц  
Блоки в CSS или Сайт без таблиц
 

Блоки в CSS или Сайт без таблиц:

Мы уже привыкли, что создавая сайт, мы используем таблицы. Все остальные способы кажутся нам неудобными, неправильными и т.п. Сегодня я расскажу, как сделать полноценную web-страницу, не используя при этом ни одной таблицы.

Главным понятием в таком сайтостроительстве будет являться понятие блока в CSS. Чтобы понять, что это такое надо обратиться к модели визуального форматирования. Вот строка из официального мануала W3C:

“Согласно модели визуального форматирования каждый элемент дерева документа порождает произвольное количество (возможно, равное нулю) блоков в соответствии с моделью представления документа в виде блоков.”

Возможно, сейчас звучит немного непонятно, но к концу статьи вы со всем разберётесь.
В качестве блока мы представляем элемент
 
<div id=block_1’></div>

где идентификатор block_1 содержит все свойства блока.

Главные свойства блока – это конечно его длина и высота (width и height), которые могут задаваться как в пикселях, так и в процентах.
Дальше необходимо определиться со схемой позиционирования блока. Их три: нормальный поток, перемещаемый объект или абсолютное позиционирование. Описание первых двух можете посмотреть в официальном мануале по CSS, они нам сейчас ни к чему. Для создания web-страницы лучше всего использовать абсолютное позиционирование – так наши блоки никуда “не уедут” ни при каком разрешении монитора. Для задания такого позиционирования надо использовать свойство position, с заданным свойством absolute. Так же необходимо задать смещение блока с помощью свойств top, left, right и bottom. Смещение можно задавать как в пикселях, так и в процентах.
Для того чтобы понять, как работает смещение, представим, что мы создаем html документ следующего содержания:

<html>
<head>
<title>
Пример</title>
<style>

#block_1 {
width: 100px;
height: 100px;
position: absolute;
top:0px;
left:0px;
background-color: #CCCCCC;

}
</style>
</head>
<body>
<div id=
"block_1">Это наш блок</div>
</body>
</html
>

Если вы создадите такой документ, то вы в верхнем левом углу увидите серый квадрат с надписью “Это наш блок”.

Ну а теперь, как применить это к созданию интерфейса сайта. Для этого нам потребуется всего 4 блока: первый будет логотипом, второй – левым меню, третий – правым меню, а четвертый – центральным блоком. Используя свойства из предыдущего примера, создать такую страницу не составит труда. Вот пример:

<html>
<head>
<title>
Пример</title>
<style
>
#logo {
width: 800px;
height: 100px;
position: absolute;
top:0px;
left:0px;
border: 1px solid blue;
}
#left {
width: 150px;
height: 300px;
position: absolute;
top:102px;
left:0px;
border: 1px solid blue;
}
#right {
width: 150px;
height: 300px;
position: absolute;
top:102px;
left:650px;
border: 1px solid blue;
}
#center {
width: 496px;
height: 300px;
position: absolute;
top:102px;
left:152px;
border: 1px solid blue;
}

</style>
</head>
<body>
<div id=
"logo">Наш логотип</div>
<div id=
"left">Левый блок</div>
<div id=
"right">Правый блок</div>
<div id=
"center">Центр</div>
</body>
</html>

| Селектор и описание - основа CSS | Содержание | Рамки таблиц с округленными краями без использования графики. |

Баннер Profit-Partner.ru

Опрос
Вопрос: Ваш возраст ?
< 15
15 - 17
18 - 25
26 - 33
34 - 45
> 45
 
 
 


Яндекс цитирования
Rambler's Top100

  Copyright © 2005-2006 WCode.Ru Group