Студия дизайна — ключ к хорошему сайту
Перекрасить!
Учим основы, рассказываем тонкости

Уверенная позиция

Есть в вёрстке (практически — в каждом дизайне) места, особо неприятные для верстальщика. Это как витражи для строителей или кремовые фигурки на торте для кулинара: чтобы это сделать, необходима определённая сноровка и технология. Возможно — виртуозность. Иначе всё рухнет, или осядет или «разлезется».

Вёрстка блоками («див»ная вёрстка, div-ами) - только блоками и без использования таблиц крайне легка в чтении и «весе» кода, но есть ситуации, когда нужен особый подход. Рассмотрим ситуацию, когда нужно сделать плавающий справа резиновый блок с закругленными углами и хвостиком сбоку =)

Начинаем анализировать задание.

1. Играем в прижимки.

Блок должен быть плавающим справа. Это означает, что блок размещается у нас в правой части экрана. При изменении ширины экрана браузера, блок сохраняет своё положение относительно правого края экрана. То есть, должно происходить так: уменьшаем ширину браузера — блок сдвигается по определённому правилу влево. Увеличиваем — блок смещается влево. Это можно реализовать несколькими способами.

Во-первых, использовать свойство «обтекание»: { float: right; } Задав нашему блоку данное свойство мы добьёмся того, что блок прижмётся к правому краю своего родителя — блока, в котором находится. То есть — если у нас правильно определён родительский каркас и у нас отведено место для блока справа или предусмотрительно подготовлен правый край родительского блока так, что к нему можно «прижаться», следует использовать этот способ. То есть: всегда, когда есть возможность использовать этот способ, — нужно прибегать к нему. Особенно он облегчит задачу технологу в тех случаях, когда этот блок не единственный справа и после него следуют ещё блоки. Так, как нашему блоку мы задали обтекание вправо, вся информация, которая идёт после него будет обтекаться ним. Если нам нужно на определённом Элементе прервать обтекание, мы после обтекаемого блока ставим, например: <br style= “clear: right”>, или же в стилях Элемента прописываем сбрасывание обтекания: { clear: right; }.

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

Второй способ: использовать абсолютное позиционирование элемента на странице с принудительным прижатием к правому краю: { position: absolute; right: 0; } В этом способе есть свои нюансы. Если блоку внутри документа задать подобные стили, он прижмётся к правому краю браузера. Чтобы он находился в рамках родительского блока, родительскому блоку нужно установить свойство { position: relative; }

Неприятный момент с Internet Explorer: не достаточно иметь { position: relative; } только для родительского элемента. Элемент с { position: absolute; } всё-равно вырывается наружу. Нужно, чтобы { position: relative; } имел каждый родительский элемент вверх по иерархии до самого <body>. В связи с этим, на последних проектах я сразу в стилях переопределяю div, делая все их по-умолчанию с позиционированием relative: div { position: relative; } После этого я могу не задумываться над родительскими элементами и спокойно верстать так, как мне нужно.
Как оказалось, этого (переопределение для всех div свойства { position: relative; }) очень не любит админ-панель публичной части Битрикса — некоторые (не все!) блоки настроек параметров компонента спрыгивают вниз и их не достать никакими хитростями )) Но удобство есть удобство и потому я просто обхожу это, добираясь до настроек компонентов обходными путями.

В самом крайнем случае можно в шаблоне сайта прописать условие: если авторизован админ, не переопределять стиль для всех блоков. Это повлияет на вёрстку, но зато все настройки компонентов будут работать корректно:

if ( !$USER->isAdmin() ) { ?><style><!-- div { position: relative; } --></style><? }

Третий способ практически не подходит для текущей ситуации, так как довольно специфичен и редкий дизайн требует именно этого способа в таком задании. Это позиционирование элемента со значением fixed и принудительный прижим его к правому краю: { position: fixed; right: 0; } Здесь никакие родители во внимание не берутся, родителем является окно браузера. Элемент прижимается к правой части окна браузера и остаётся там при скролинге документов. Этот способ используется для кнопок типа «Онлайн консультант» или «Задать вопрос», которые находятся всегда справа.

2. Тянучка

Все описанные выше способы предполагают выполнение одного условия: ширина блока должна быть определена. Она может быть определена неявно (границы родительского элемента при использовании первого способа) либо же — явно. Если ширина блока не определена, поведение его размеров не прогнозируемо. Блок может растянуться на пол-экрана, а может сделаться узкой полоской. В общем — становится не управляемый.

Размер блока может быть задан как фиксированная ширина, например: 400 пикселей, либо же в процентах (относительно ширины родительского элемента). Не забываем, что использование { position: absolute; } предназначено для «выхода за рамки», а потому нужен ограничительный момент: у родительского элемента установлен { position: relative; }

Если мы вспомним задание, блок должен быть «резиновым». Когда техническое задание содержит подобное требование — речь идёт именно о резиновости ширины: резиновость высоты подразумевается сама собой. То есть — вариант с заданием фиксированной ширины в пикселях нам не подходит. Значит, остаётся только ширина в процентах. Например, 50%: { width: 50%; }

Не лишним будет отметить, что все качественные современные вёрстки — это набор процентно-зависимых элементов. То есть: общий каркас состоит из процентно-зависимых блоков (родительским элементом является окно браузера), внутренние элементы каждой ячейки — это те же каркасы с процентными ширинами, только в них уже расчёт ведётся относительно родительских элементов и так внутрь до самых мелких элементов. По-большому счёту, когда технолог открывает дизайн и готовится к вёрстке — он проектирует в уме (или на листке, файле) каркас, пытаясь понять — как лучше построить вложенность, делает замеры и выводит карту процентов ширин.

3. Стружка, фаска, ножик, клей.

Переходим к закруглениям. Для простоты понимания, рассмотрим случай, когда под закруглениями у нас сплошной фон, а значит сами закругления можно делать не прозрачные. Допустим, мы имеем следующую визуальную задачу:

Блок — сплошного цвета, потому родительскому элементу к обтеканию в стилях мы добавляем цвет фона: { background-color: #ADBE60; }. Также нам нужны отдельно частички закруглений. При «нарезке» подбираем ширину блок-ножа так, чтобы закругление попало в отрезаемую область полностью. Больше не нужно:

Чтобы не запутаться с названиями уголков и файлов, я обычно расставляю номерочки по схеме, например: b_XY, где X и Y – координаты уголков. Центр начала координат — в левом верхнем углу. Таким образом, получается, что левый верхний блок имеет координаты (0,0), правый верхний — (1, 0), правый нижний — (1, 1), левый нижний — (0, 1).

В результате, я получаю кусочки файлов-закруглений: b_00.png, b_10.png, b_11.png, b_01.png. Почему не назвать файлы нарезки просто на основе координат, чтобы получилось: 00.png, 01.png..? Во-первых, блоков с закруглениями может быть в дизайне несколько и префикс у координат будет разделять уголки для разных блоков. А во-вторых, я таким же названием создаю css-стили для блоков, содержащих закругления. А стили не могут начинаться с цифры — только с символа.

Итак, у нас есть подготовленные уголки. Теперь нужно понять, как их применить и описать в нашей html-вёрстке. Начинаем анализировать: что такое каждый уголок-закругление? Это плавающий блок фиксированной ширины. Верхний левый уголок — это блок, прижатый к левому верхнему краю родительского элемента. Правый нижний — это блок, прижатый к правому нижнему краю родительского элемента. Расставив по такому правилу все блоки мы будем уверены, что при изменении ширины или высоты родительского элемента, все закругления будут держаться своих мест. Для реализации данного нам подойдёт второй из описанных способов «прижимания».

Вспоминаем, какие условия должны выполняться? Во-первых, нужно убедиться, что родительский элемент имеет свойство позиционирования relative или absolute: { position: relative; }. Во-вторых, создать внутри него четыре блока. Каждый такой блок должен быть определён с позиционированием absolute: { position: absolute; } В-третьих, настроить для каждого блока с закруглением свой стиль со своим правилом.

Пример того, как должен выглядеть html-код:

<div class= “right_menu”>
   <div class= “rm_roundes”>
      <div class= “b_00”></div>
      <div class= “b_10”></div>
      <div class= “b_01”></div>
      <div class= “b_11”></div>
   </div>
</div>

Пример стилей для блока с закруглениями:

.rm_roundes {}
.rm_roundes div { position: absolute; background-repeat: no-repeat; }
.b_00 { background-image: url( “http://images.site.com/b_00.png” ); left: 0; top: 0; }
.b_10 { background-image: url( “http://images.site.com/b_10.png” ); right: 0; top: 0; }
.b_11 { background-image: url( “http://images.site.com/b_11.png” ); right: 0; bottom: 0; }
.b_01 { background-image: url( “http://images.site.com/b_00.png” ); left: 0; bottom: 0; }

4. Хвостик

В визуальной задаче у нас есть ещё «хвостик». Что такое хвостик? Это прижатый к левому краю блок с дополнительным смещением влево — за рамки родительского элемента. Как прижать к левому краю, мы уже знаем: позиционируем абсолютно и задаём смещение от верха, чтобы блок опустился вниз на нужное количество пикселей: { position: absolute; left: 0; top: 75px; } Чтобы сместить элемент влево, используем наружное смещение элемента, задав ему отрицательное значение: { margin-left: -22px; }

В Internet Explorer, в ячейках таблиц, отрицательное смещение влево и вправо приводит к тому, что элемент прячется за рамками, потому такой приём для таблиц не подходит.

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

Пример html-кода:

<div class= “right_menu”><ins></ins>

Пример css-стилей для «хвостика»:

.right_menu ins {
   display: block;
   width: 22px; height: 22px;
   position: absolute;
   left: 0; top: 75px;
   margin-left: -22px;
}

Описанная задача — это очень показательный пример возможностей «див»ной вёрстки в плане позиционирования. Главное — понять основы и научиться выбирать правильную тактику.