Навигация
  Главня
Статьи
-Сеть
--Безопасность
-Графика
--Photoshop
--Corel Draw
--Illustrator
-ОС
--Windows
--Linux
--Unix
-SEO
-Дизайн
--Web-Design
-Разное
-Программирование
--Delphy
--C/C++
--.NET
--PHP
--Pascal
--Perl
--Visual Basic
--Ассемблер
--Java
--Java Script
--ASP
Книги

Карта Сайта
Наши Сайты
Обратная связь
Новое на сайте
Статьи про любовь

 
Вход
 
Логин
Пароль
 

 
Найти
 

 
Партнёры
 

 
Статистика
 

 
Популярное
 

 
Календарь
 
«    Май 2013    »
ПнВтСрЧтПтСбВс
 
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
 

 
Архив
  Сентябрь 2008 (4)
Июнь 2008 (4)
Май 2008 (12)
Апрель 2008 (49)
Март 2008 (51)
Февраль 2008 (73)
Январь 2008 (40)
Декабрь 2007 (58)
Ноябрь 2007 (61)
Октябрь 2007 (51)
Сентябрь 2007 (82)

 
Реклама
  Кулинарные рецепты на Cook-room.com - с пошаговыми фото

 
Казино
 

Интернет-казино Grand Casino произвело фурор в игорном мире. Одно из самых важных нововведений - наличие системы контроля честности всех азартных игр казино. Наличие контроля честности дает возможность полностью уйти в игру, не задумываясь о подтасовке или обмане. В Grand Casino можно пополнить счет и вывести выигрыш большим количеством способов:(SMS, E-gold, Rupay, Яндекс.Деньги, Webmoney,Кредитные карты,...). Теперь азартные игры на деньги стали доступнее. Предоставлены игры: Рулетка, Покер, Блэкджек, Видео Покер, Игровые автоматы, Кено.

   

Статьи » Дизайн » Web-Design » Основы позиционирования блоков

Блоки — прямоугольные области, используемые в CSS для формирования и отображения документов. Это упрощенно, очень сильно упрощенно, но на первом этапе вполне может и хватить.

С появлением нового Нетскейпа можно забыть все слои и заняться вплотную блоками.

Если вы знакомы с CSS, то знаете как описываются стили и что для этого нужно. Тэгу DIV мы тоже можем задать некоторые необходимые для нас параметры. Прописать их можно как в самом тэге, так и в описании стиля страницы или внешнем файле css.


Содержимое тэга

или



#bb {описание}
-->

Обратите внимание - блоку присваивается свое индивидуальное имя — ID="bb" и #bb.

Теперь рассмотрим, какие свойства можно назначить нашему блоку.

position — "relative" и "absolute". В первом случае слой записывается в поток, во втором — выделяется из него. Практически это смотрится так: при "relative" наш слои находится там, где мы его прописали, например, в ячейке таблицы и может использоваться как простой текстовый блок(назначен по умолчанию и во многих редакторах как текстовый блок и используется). Это нас не особо занимает. Во втором случае — "absolute" — слой помещается над плоскостью листа и позиционируется относительно верхнего левого угла экрана. Если точнее, то позиционирование в данном варианте не влияет на все последующие блоки, но может оказывать влияние на дочерние элементы. В этом случае можно разместить слой как над текстом, так и под ним. Все зависит от заданных параметров.
Позиционирование подробнее
Нормальный поток. В CSS2 модель нормального потока включает форматирование блока структурного уровня, строковое форматирование строковых блоков, относительное позиционирование структурных или строковых блоков, а также позиционирование компактных и инициальных блоков.
Перемещаемые объекты. Согласно этой модели блок сначала размещается в соответствии с нормальным потоком, а затем изымается из него и перемещаются максимально влево или вправо насколько это возможно. Отображаемое содержимое может располагаться по сторонам перемещаемого элемента.
Абсолютное позиционирование. В модели абсолютного позиционирования блок полностью удаляется из нормального потока (и не влияет на последующие сестринские элементы), а затем ему назначается положение относительно контейнера.
static
Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства "left" и "top" не применяются.
relative
Положение блока рассчитывается в соответствии с нормальным потоком (оно называется нормальным положением). Затем блок смещается относительно своего нормального положения. Когда для расположения блока B используется модель относительного позиционирования, тогда положение следующего блока рассчитывается так, как будто блок B не был смещен.
absolute
Положение блока (возможно и размер) указывается с помощью свойств "left", "right", "top" и "bottom". Они указывают величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих сестринских элементов. Следует заметить, что поля абсолютно позиционируемых блоков не перекрываются ни с какими другими полями.
fixed
Положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно некоторого объекта. При использовании устройств без разбивки блок фиксируется относительно области просмотра (и не перемещается при прокрутке).
Описание блоков
left — при абсолютном позиционировании задает расстояние от левого края экрана.
top — при абсолютном позиционировании задает расстояние от верхнего края экрана.
width — ширина
height — высота
visibility — видимость слоя. "visible" — видимый, "hidden" — не видим. По умолчанию все слои видимы.
z-index — положение слоя относительно плоскости листа. Слой с индексом "3" будет помещен над слоем с индексом "2". Можно задать и отрицательный индекс, тогда слой будет помещен под таблицы с текстом. При отрицательном значении слой располагается под плоскостью страницы, но над фоном. Очень интересное свойство, особенно если его использовать вместе с движением обьекта. Получается эффект подвижного или изменяющегося фона. При задании различных положительных значений для разных слоев, мы можем помещать слои друг над другом — как в Фотошопе.
background-color — фоновый цвет слоя. Заливка, как у таблиц.
background-image — фоновый рисунок, как в таблице.



#bb {position: absolute;
left: 50px;
top: 100px;
width: 200px;
height: 100px;
visiblity: visible;
z-index: 2;
background-color:#FF0000;
background-image:URL(filename.gif);}
-->

В описании у нас слой, находящийся в 50пикселах от левого края, в 100пикселах от верхнего и шириной и высотой в 200 и 100 пикселов, слой видим, зет-индекс 2, и имеющий фоновый цвет и рисунок.

Перемещаемый объект — это блок, который смещается по строке в левую или правую сторону. Самым интересным свойством перемещаемого объекта является то, что содержимое может передвигаться вдоль одной из его сторон (либо не делать этого, если существует запрет, устанавливаемый свойством "clear"). Содержимое может передвигаться вдоль правой стороны левостороннего перемещаемого блока и вдоль левой стороны правостороннего перемещаемого блока.

пример

#bb {
float: left;
margin-left: 10;
}

В данном примере мы получаем блок, расположенный на 10пикс. правее левого края.

Данное описание относится к CSS2, так что не все броузеры понимают подобную схему, но пятые версии Эксплорера, Нетскейпа и Опера все отображают нормально.

Коротко — все. Все остальное будет приводиться по мере надобности.
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Вы читаете: Статьи » Дизайн » Web-Design » Основы позиционирования блоков
Статьи по теме:
  • Основы позиционирования блоков
  • «Резиновая вёрстка»: используем отрицательные поля
  • Выпадающие меню с помощью CSS
  • Правила хорошей интернет-рекламы
  • Веб-мастеринг средствами CSS
  •  (голосов: 0)
    Просмотров: 2001 :: Комментарии: (0) :: :: Напечатать

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