—»     —»   Руководство по использованию отрицательных полей
  Раздел: Руководства   Комментариев: 3  

Руководство по использованию отрицательных полей

Со времен 1998-го года, когда CCS2 хорошо зарекомендовал себя, использование таблиц потихоньку отошло на задний план и осталось в книгах для истории. CSS-разметка с того времени стала означать – четкий и правильный кодинг.
Из всех концепций CSS, которые когда-либо были использованы дизайнерами, особую роль сыграли «отрицательные поля». Об этом методе говорят больше как о методе позиционирования. Это что-то вроде некоторого сетевого «табу» - все это делают, но никто не хочет говорить об этом.

1. Указание правильных параметров

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

#content {margin-left:-100px;}

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

- Этим методом можно добиться максимально действующего (валидного) CSS.
Это вовсе не шутка. Даже W3C утвердило разрешение об использовании отрицательных значений для полей. Взгляните на эту статью для более подробной информации.

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

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

- Он хорошо совместим.
Метод отрицательных полей полностью совместим со всеми современными браузерами (и в большинстве случаев даже с IE6).

- Он по-разному реагирует при указании значений плавающим элементам.
Метод с отрицательными полями – это не тот повседневный CSS, который вы используете, поэтому будьте аккуратны.

- Dreamweaver не воспринимает данный субъект.
Отрицательные поля не отображаются в режиме просмотра дизайна в Dreamweaver. Вы все еще проверяете свой сайт в режиме просмотра дизайна?

2. Работа с отрицательными полями

Метод использования отрицательных полей очень многогранен и имеет огромную силу, если правильно его использовать. Существует 2 типа сценариев использования данного метода, в которых он играет основную роль.

- Использование отрицательных полей со статическими элементами

Руководство по использованию отрицательных полей

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

/* Moves the element 10px upwards */  

#mydiv1 {margin-top:-10px;}

Но если выставить значение вниз/вправо, элемент не сдвинется в этом направлении, как вы уже подумали. Вместо этого, все последующие элементы смещаются в основной блок, закрывая его.

/* 
* All elements succeeding #mydiv1 move up by
* 10px, while #mydiv1 doesn’t even move an inch.
*/  

#mydiv1 {margin-bottom:-10px;}

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

- Отрицательные поля для плавающих элементов

Можно рассмотреть это как нашу текущую разметку:
HTML

<div id="mydiv1">First</div>  
<div id="mydiv2">Second</div>

- Если отрицательное поле применяется противоположно плавающему элементу, то создается пустое пространство, закрывающее содержание. Это особенно применимо в резиновой верстке, где у одной колонки ширина может быть обозначена в 100%, в то время, как у другой указан точный размер, например в 100 пикселей.

/* A negative margin is applied opposite the float */  
#mydiv1 {float:left; margin-right:-100px;}

- Если обоим плавающим элементам задано значение удерживаться слева, а значение правого поля у #mydiv1 равно «-20px» (margin-right:-20px), то #mydiv2 принимает #mydiv1, как если бы значение было на 20px меньше, чем есть на самом деле (т.е. оно перекрывает его). Самое интересное то, что содержимое #mydiv1 никак не реагирует на это и удерживает свою ширину.
- Если значение отрицательного поля равно действительной ширине, то оно полностью закрывает его. Это происходит потому, что поля, границы и ширина поля входят в общий объем элемента. Так что, если отрицательное поле равно остальным значениям, то ширина элемента, в сущности, становится нулевой.

3. Эффективные методы

С тех пор, как мы узнали, что применение отрицательных полей является валидным в коде CSS2, можно сказать, что его использование даёт нам возможность реализации некоторых интересных методов применения CSS:

- Создание одиночного «ul» для списка из трех колонок

Руководство по использованию отрицательных полей

Если у вас есть огромный список, отображать который вертикально по пунктам было бы не совсем привлекательно, то почему бы вместо этого не разделить этот список на разные колонки? Отрицательные поля дают вам возможность реализовать это без добавления каких-либо плавающих элементов или дополнительных тэгов. То, с какой лёгкостью можно разделить список на 3 раздельных колонки, просто ошеломляет. Выглядит это примерно так:
HTML:

<ul>  
   <li class="col1">Eggs</li>  
   <li class="col1">Ham<li>  
   <li class="col2 top">Bread<li>  
   <li class="col2">Butter<li>  
   <li class="col3 top">Flour<li>  
   <li class="col3">Cream</li>  
</ul>

CSS:

ul {list-style:none;}  
li {line-height:1.3em;}  
.col2 {margin-left:100px;}  
.col3 {margin-left:200px;}  
.top {margin-top:-2.6em;} /* the clincher */

Задав элементу .top значение margin-top:-2.6em (дважды высота линии "li"), все элементы передвинутся вверх с правильным выравниванием. Более подходяще было бы использовать отрицательные поля для того, чтобы не прописывать каждый раз тэг "li", нежели применение относительного позиционирования.

- Наложение на добавленное выделение

Руководство по использованию отрицательных полей

Перекрывающие элементы - как основная задумка, также является хорошей метафорой для дизайна. Она выделяет определенные элементы тем, что эффект от наложения элементов создает некоторую иллюзию глубины и объема. Хорошим примером является блок комментариев на сайте Phlashers.com, где метод наложения используется для привлечения внимания на количество оставленных комментариев к статье. Скомбинируйте это с параметром z-index и вашим воображением и у вас все получится.

- 3D-эффект разбивающего текста

Руководство по использованию отрицательных полей

Это достаточно ловкий трюк. Создайте текст в стиле Сафари, который будет немного наклоненным за счет 2-х вариантов данного текста с разными цветами. Далее примените отрицательное поле, чтобы наложить один текст на другой с разницей в 1-2 пикселя. Таким образом, вы получите выделяемый объемный текст, совместимый с поисковыми роботами! И не требуется никаких огромных изображений Jpeg или Gif, которые занимают так много места.

- Простая разметка в 2 столбика

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

<div id="content"> <p>Main content in here</p> </div>  
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>

CSS:

#content {width:100%; float:left; margin-right:-200px;}  
#sidebar {width:200px; float:left;}

И так вы получаете простенькую разметку в два столбика за рекордно короткий срок. Это работает бесподобно даже в IE6! Теперь же, во избежание наложений на #sidebar, просто добавьте текст внутрь #content

/* Prevent text from being overlapped */  

#content p {margin-right:210px;}  

/* It’s 200px + 10px, the 10px being an additional margin.*/

При правильном использовании, отрицательными полями можно также добиться резиновой верстки, которая просто «бьет в лицо» табличный способ верстки. Резиновая верстка очень доступна и способствует SEO, также позволяя организовывать разметку вашей страницы так, как вы задумали. Том Райт (Tom Wright) опубликовал очень интересную статью, в которой обсуждаются возможные варианты применения отрицательных полей в многоколоночной разметке.

- Подталкивание элементов в нужное место

Это самый популярный и наипростейший метод использования отрицательных полей. Если вы добавляете 10-й "div" в массив из 9-и других, и по какой-то причине он просто не хочет правильно выровняться, то вы можете использовать отрицательные поля для того, чтобы подтолкнуть 10-й "div" в нужное место, без редактирования остальных 9-и.

4. Исправление ошибок

- Проблемы с текстом и ссылками

Использование отрицательных полей вызывает проблемы со старыми браузерами. Некоторые из симптомов:
- Ссылки становятся некликабельными;
- Возникают сложности с выделением текста на странице;
- Бывает сложно найти ссылку, если вы отвлеклись от текста.
Решение: Добавьте значение «relative» к позиционированию (position:relative) и все заработает.

- Обрезаются изображения

Если вам «посчастливилось» работать с IE6 в офисе, то временами возможны исчезания содержимого, при использовании на странице плавающих элементов, которые могут перекрыть другое содержимое.
Решение: И снова - добавьте значение «relative» к позиционированию плавающих элементов и всё встанет на свои места.

5. Вывод

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

6. Ресурсы

Больше информации об отрицательных полях
- Search This, Положительные стороны отрицательных полей
- Severn Solutions, Алгебра отрицательных полей
- Mindfly, Get Refreshed: Резиновая верстка с простым CSS и без беспорядка в коде
- A List Apart, Создание резиновой верстки с помощью отрицательных полей
- W3.org, Параметры полей
- Branbell, Использование отрицательных полей
- devarticles, Смена позиций колонок на веб-странице с использованием
отрицательных полей

- Simplebits, Исключительно отрицательно
- CommunityMX, Отрицательные поля
- brunildo, Горизонтальные отрицательные поля
- Ben Nadel, Отрицательные поля CSS – это не есть хорошо
- bluerobo, Центрирование: отрицательные поля

Автор статьи © John Imbong
Русский перевод © CoolWebmasters.Com 2009
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: веб-дизайн, CSS
Опубликовал Mysterious Master   Прочитано (раз): 12806   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 19 июля 2010 @ 15:25
Написал: develop — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
езиновая верстка очень доступна и способствует SEO

при чем тут верстка к SEO
Комментарий #2: 19 июля 2010 @ 15:42
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
develop, как при чём вёрстка к SEO?
Если у одной страницы вёрстка потянет на 1Мб веса, а у другой на 50Кб веса, то вопрос: в каком из случаев будет лучше SEO? Какой из кодов будет быстрее обработан поисковым ботом и т.п. .. ?
Комментарий #3: 1 ноября 2011 @ 18:18
Написал: ZEOS — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Отличная статья! Спасибо большое smile
Использую этот метод для вывода контента сразу после тэга body и только потом все остальное (меню и подвал)
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031