Сделать стартовойДобавить в закладки  
Главная страничка Главная страничка
В номере:

Выходит с 17 июля 2008 г. цена договорная

Опрос

увольнение
задержка зп
снижение зп
повышение зп
рост цен
а мне по барабану, я олигарх
какой кризис?


Календарь
«    Октябрь 2009    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Архив новостей
Апрель 2012 (4)
Март 2012 (1)
Январь 2012 (2)
Декабрь 2011 (2)
Ноябрь 2011 (1)
Октябрь 2011 (4)

Информация
 
Тег DIV - прямоугольный блок
Web » css
автор: dimon, опубликовано: 13 октября 2009

Считается что, верстка блоками DIV имеет ряд преимуществ по сравнению с табличной версткой:
- более быструю загрузку страницы сайта, т.к. содержимое блоков DIV отображается по мере загрузки (в отличие от таблицы, в которой содержимое не отобразиться до тех пор, пока все ее содержимое не загрузиться)
- более удобочитаемый код страницы.

Но и блочная верстка не идеальна, есть и недостатки:
- нельзя получить представление данных как это делает таблица.

Самый оптимальный вариант сочетать табличную верстку с верской блоками DIV.

Рассмотрим тег DIV более подробно:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Тег DIV</title>
  <style type="text/css">
   .block1 {
    width: 200px;
    background: #cсcсcс;
    padding: 5px;
    padding-right: 20px;
    border: solid 1px black;
    float: left;
   }
   .block2 {
    width: 200px;
    background: #fаcс00;
    padding: 5px;
    border: solid 1px black;
    float: left;
    position: relative;
    top: 40px;
    left: -70px;
   }
  </style>
  </head>
<body>

  <div class="block1">Text1 Text1 Text1 Text1 Text1 Text1 Text1</div>
  <div class="block2">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2</div>

</body>
</html>


вот так это будет выглядить на страничке:

Text1 Text1 Text1 Text1 Text1 Text1 Text1Text1 Text1 Text1 Text1 Text1 Text1 Text1

Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2











параметры:

width - ширина

background - цвет фона

padding - растояние от текста до границы блока

padding-right - растояние от текста до границы блока справа

border - граница

float - управляет позиционированием перемещаемого блока:
- left - элемент страницы принудительно выравнивается по левому краю;
- right - элемент страницы принудительно выравнивается по правому краю;
- none - элемент страницы не перемещается, будет отображен там, где он должен быть (значение по умолчанию).

position - способ позиционирования элемента относительно окна браузера или других объектов на веб-странице:
- absolute - указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
- fixed - по своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
- relative - положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
static Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам.

top - см. position

left - см. position

 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Чтобы Вам были доступны все функции Вам необходимо либо зарегистрироваться, либо зайти на сайт под своим именем.

Другие новости по теме:

  • DIV прямоугольные блоки - положение друг относительно друга
  • Как заставить min-height работать
  • Простенький трёхколонный резиновый макет на div-ах
  • DIV закругленные углы блока
  • Opera Mobile 8.65 для Windows Mobile




  •  
    Информация
     
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.


    Поиск по сайту:


    Аккаунт
    Логин
    Пароль
     
    Облако тегов

    Требуется для просмотра Flash Player 9 или выше.

    Показать все теги
    Реклама
    раскрутка сайта бесплатно






    Главная страница | Регистрация | Добавить новость | Новое на сайте | Статистика | Поддержка | Правила ресурса Copyright © 2005-2011 by dimon - all right reserved!
    Тираж:     Rambler's Top100     Анализ сайта   экземпляров.   Дизайн, верстка by dimon