Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
YouTube 150 Подписчики
Telegram 241 Подписчики
VK 0 Подписчиков
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • CSS

CSS: позиционирование блоков

  • 08.04.2004

Автор статьи: Дмитрий Турецкий

>

 

CSS: позиционирование блоков

[позиционирование блоков в каскадных таблицах стилей]материал подготовил: Дмитрий Турецкий
08.04.2004
 

В принципе, всю разработку дизайна какого-то документа можно свести к двум шагам — определению внешнего вида элементов и их позиционированию. И если с расположением элементов никогда не было проблем в, скажем, типографии, то в веб-дизайне именно позиционирование является одной из наиболее сложных задач.

В полиграфии вам известны размеры «конечного устройства» — листа книги или газеты, размеры шрифтов и картинок, есть возможность жестко привязать каждый элемент к своему месту и так далее. В веб-дизайне же все наоборот — у посетителей сайта может быть разное разрешение экрана, они могут смотреть ваш сайт, развернув браузер на весь экран или свернув в относительно небольшое окошко, у них могут быть разные шрифты по умолчанию и разная глубина цвета; наконец, они могут отключить вывод, скажем, картинок — все это способно привести к весьма заметным искажениям вашей дизайнерской задумки…

 

О том, как задать внешний вид блока, мы говорили в прошлой статье, так что сегодня попробуем разобраться с их позиционированием. Когда браузер получает данные от сервера, он выводит их на страницу в том порядке, в котором получает — этот порядок называется нормальным потоком. То есть браузер получает какой-то элемент, вычисляет его размеры и располагает следом за предыдущим элементом. Кстати, именно с этим была связана задержка с отображением таблиц в ранних версиях браузеров — так как таблицы меняют свой размер в зависимости от содержания, нет возможности вычислить их размер на странице до получения всего содержимого, и по этой же причине стоит всегда указывать размер картинки в теге IMG — это даст возможность браузеру сразу «зарезервировать» необходимое для картинки место.

При обработке данных из нормального потока браузер выводит данные строку за строкой, добавляя перевод строки при появлении структурного блока. Поэтому, в частности, в стандартном HTML нет возможности организовать вывод, например, нескольких колонок текста, и веб-дизайнерам приходится использовать для этого таблицы.

Нормальный поток — это то, что написано в выводимом браузером документе

В CSS есть два способа позиционирования блока в нормальном потоке: relative и static. Static используется по умолчанию и выполняет стандартное форматирование, оставляя блок в нормальном потоке (или, говоря проще, ничего не делает). Relative позволяет сдвинуть положение блока относительно того положения, которое он занимал бы в нормальном потоке. использовать относительное смещение надо с осторожностью — сдвигается только тот блок, к которому относится определение, а остальные выводятся, как и должны — в результате этого «сдвинутый» блок легко может перекрыть другие элементы. Например, в тексте, приведенном ниже, используется стиль

position: relative; left: 20px; color: green;

Это просто текст, в котором одно слово сдвинуто на 20 пикселей.

Обратите внимание на инструкцию «left: 20px» — она сдвигает положение левого края блока на 20 пикселей относительно предыдущего элемента в нормальном потоке, в результате чего сам блок смещается вправо. Если указать отрицательное смещение, то блок сдвинется влево. Аналогично можно сдвигать блок по вертикали — для этого используется свойство top. Можно также использовать right и bottom, если требуется…

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

Алексей Волков

Предыдущий материал
  • Подбор персонала

Три коня подбора

  • 07.04.2004
  • Алексей Волков
Read More
Следующий материал
  • Хостинг

Два слова о современном хостинге

  • 20.04.2004
  • Алексей Волков
Read More
Вас также может заинтересовать
Read More
  • CSS

Формализация CSS

  • Алексей Волков
  • 23.05.2012
Read More
  • CSS

Ножницы для CSS

  • Алексей Волков
  • 25.01.2005
Read More
  • CSS

CSS: фон и цвет

  • Алексей Волков
  • 27.05.2004
Read More
  • CSS

Что такое каскадные таблицы стилей (CSS)

  • Алексей Волков
  • 02.02.2004
Read More
  • CSS

Что такое каскадные таблицы стилей (CSS)

  • Алексей Волков
  • 27.11.2003
Read More
  • CSS

Создание «буквиц»

  • alexvolkov
  • 30.11.2001
Read More
  • CSS

Описание стилей элемента<A>

  • alexvolkov
  • 05.11.2001
Read More
  • CSS

Все правила CSS. Отступы

  • alexvolkov
  • 02.11.2001

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Дайджест постов Сергея Людкевича
    • 12.09.24
  • Как юристы тормозят бизнес
    • 30.08.24
  • Продвижение оптовых кампаний в Яндекс Директ
    • 06.03.24
  • Cарафанное радио
    • 13.01.24
  • 5-55: История компании
    • 01.03.23
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter