Расположение блоков

1 вариант (для различных блоков)

Предположим, у вас есть несколько элементов, которые вы хотите расположить в строку. Это различные в своем плане элементы (логотип, заголовок, слой с информацией).

Для этого каждому элементу на вкладке «Позиционирование» необходимо задать значение left или right у пункта «Выравнивание» (в зависимости от того, к какому краю вы хотите прижать элементы). Суть такова – при заданном параметре, к примеру, left элемент принудительно прижимается к левому краю, а все, что рядом с ним, пытается выстроиться в строчку рядом с ним.



На вышеуказанной картинке внизу сайта находятся несколько различных элементов – 2 слоя и блок технологии siteedit, всем задан параметр left. Если одном из элементов задать параметр right – он прижмется к правому краю, на одном уровне с рядом расположенными элементами, которым задан параметр left.

Минус данного свойства в том, что родительский слой «схлопывается» до минимума (тот слой, в котором расположены элементы с вышеуказанным выравниванием). Если элементы находятся в ячейке таблицы – проблем не будет. Рассмотрим пример, когда элементы как раз таки в слое.

Вот так выглядит родительский слой, в котором элементы выстроены в строку параметром left (right)



Как видно из рисунка, слой принимает минимальное значение, пытаясь ужаться по высоте. Если он залит фоном, вы четко увидите неисправность. Если ниже него есть элементы, то они плотно прижмутся к данному слою (что недопустим).

Исправить данный недочет можно, задав родительскому слою:

• Жесткую высоту
• Тип контейнера (table, inline block) + ширина 100%

Данный принцип подойдет и для варианта, когда вам нужно сделать обтекание текстом картинки. Картинке задаем left (right), при этом текст располагается сбоку от нее.



На вышеуказанном рисунке видно, что текст обтекает картинку, которой задан параметр left. Но, когда кончается картинка, текст автоматически пытается занять все свободное место – и справа и снизу от картинки. При этом тексту не заданы никакие параметры.

Если вы настраиваете текстовый модуль, в котором есть ряд записей с картинкой и текстом, то вам подойдет один из вариантов настройки текста.



Представим, что в данном случае обтекание текстом картинки не подходит, как было указано выше. Всем картинкам модуля, или всем картинкам записей задан параметр left, но в некоторых случаях не нужно, чтобы текст «забегал» под картинку. Попытаемся его выстроить так, чтобы он всегда был справа.

Для этого выделяем текст и задаем ему значение «hidden» у пункта «Поведение» (вкладка Позиционирование). При этом у картинки также остается параметр left (или right). Если данный эффект не нужен вам для всего сайта, вы можете настроить по такому принципу отдельный модуль. В модуле вы также увидите картинку и текст рядом, а значит, сможете задать им похожие настройки.

Если вы будете настраивать элементы модуля по принципу задания параметра left (right), вам нужно знать о том, как элементы выстраиваются, когда их больше, нежели одна строка. Возьмем за пример один из распространенных модулей – фотоальбом. Записи фотоальбома лучше смотряться, если их располагать в строку.

Вот так смотрятся записи, когда им задан параметр left:



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

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

2 вариант (для одинаковых блоков)

Рассмотрим второй вариант, в котором одинаковые по своему типу элементы располагаются в строку. Это могут быть записи фотоальбома, текстового модуля, новостей, картинки товаров в магазине и др.

Вместо параметра left (right) ставится тип контейнера inline-block. В некоторых случаях вместе с ним может указываться ширина элемента (жесткая или в процентах).



Как видно из рисунка, мы задали данный параметр всем объектам (записям) фотоальбома. Фотографии выстроились ровно, даже при наличии изображений различных пропорций. Принцип такой настройки заключается в том, что inline-block выстраивает элементы в строку и располагает их в некой сетке. Т.е. он определяет высоту самого большого элемента, и уже относительно его располагает нижний ряд элементов. Настройка достаточно универсальная, т.к. подходит под большинство модулей (если они имеют гибкую структуру), и не требует указания жестких размеров.

Если вы применяете параметр inline-block, рекомендуем также указывать у этого элемента на вкладке «Расположение текста» значение «top» у пункта «Вертикальное выравнивание». Это нужно для того, чтобы прижать элементы к верхней границе (по умолчанию они будут прижаты к низу, что не всегда красиво смотрится).

Рассмотрим, как ведут себя текстовые записи (разделы) в тех случаях, когда имеют разное информационное содержание либо разные по размеру или пропорциям картинки.

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



Для того, чтобы этого не происходило, рекомендуем задавать текстовым записям параметр table или inline-block. Записи будут выстраиваться четко друг под другом – по сетке. Но, будьте внимательны, т.к. при этих параметрах записи будут иметь различную ширину. В некоторых случаях это не вызовет видимых недочетов. В каких-то случаях (к примеру, если записи имеют фон или границу) вы сразу заметите неполадки с шириной.

Рекомендуем задавать ширину элементам, к примеру, можно задать 100%. Ширина у всех элементов выровняется, растянув их на все свободное пространство (в пределах их родительского элемента).

Будьте внимательны. Если вы задаете ширину блоку и одновременно внутренний отступ текста, то ширина у вас изменится в большую сторону (т.к. отступ всегда прибавляется к ширине блока).

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

Попробуем задать ширину в процентах. Подберем такое значение ширины, чтобы в строке получилось 3 записи. Не забываем задать прижатие к верхнему краю текста на вкладке «расположение текста» (как описано выше).



В фотоальбоме обычно ширину записям указывать не нужно, т.к. кроме фотографии и краткого заголовка текстов больше нет, и записи выстраиваются в строку сами.

Если же вам необходимо расположить элементы строго друг под другом, вы можете воспользоваться несколькими способами.

• Если у вас задан параметр left или right (выраванивание по левому или правою краю), вам лучше убрать данный параметр, либо поставить значение «none» у данного параметра.
• Также может помочь параметр «both» у пункта «Расположение» (вкладка позиционирование). Параметр не дает элементам выстроиться в строчку.
• Если задан параметр «inline-block» у пункта «Тип контейнера», то поможет задание ширины 100%.

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

• Задаем элементу (который должен быть фиксирован) значение «fixed» у пункта «положение» (вкладка Позиционирование). При этом элемент становится независимым от остальных элементов сайта, а значит может быть и сверху сайта, под ним, либо сбоку.
• Выставляем точки координат элементу. Выставляются значения у пунктов «Смещение вниз» и «Смещение вправо». Выставив значения в левых колонках, к примеру 0px, будет означать, что элемент прижмется к левому верхнему краю. Если задать значения в правых колонках – элемент прижмется к правому нижнему краю. Тем самым, вы можете расположить элемент в любом месте экрана. Значения в процентах также поддерживаются. Отрицательные значения также поддерживаются.

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

Допустим, вы хотите установить на фоне сайта большую картинку, которая не должна прокручиваться вместе с сайтом при перемещении скролла. Сделать это можно. Добавьте в карте дизайна слой (лучше перед вашим сайтом, т.е. сверху). Задайте слою ширину и высоту 100% на вкладке «Позиционирование», установите значение «fized». Чтобы на слой не влияли другие настройки, вы можете задать точки координат, прижав его точно к краям экрана. У пунктов «Смещение вниз» и «Смещение вправо» установите значения 0px в левых колонках. Возможно, фиксированный слой будет перекрывать ваш нижеследующий слой с сайтом. Для этого выделяем слой сайта и устанавливаем ему значение «relative» у пункта «Положение».

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

Сначала научимся располагать элемент независимо от всего сайта, в углу экрана. Тренироваться лучше на картинке. Поэтому, вначале добавьте в карту дизайна слой (можно после всех элементов), снизу. Затем задайте фоном слою подготовленную картинку или иконку.

• Слою необходимо также задать размеры (чаще всего задаются жесткие размеры в px)
• Далее задаем значение «absolute» у пункта «Положение»
• Задаем точки координат у пунктов «Смещение вниз» и «Смещение вправо». Можно пока поставить по нулям в левых колонках. Слой сместиться в левый верхний угол. Задав другие точки координат, элемент можно сместить в любое место экрана.
  
  

Если вы хотите расположить данный слой строго по центру экрана, это возможно. Задайте, к примеру, в пункте «Смещение вправо» значение 50%, затем у пункта «Отступы» задайте отступ слева со знаком минус, равный половине ширины слоя. Это работает в случае, если у слоя жесткие значения по ширине (в пикселях)



Теперь давайте научимся располагать элемент среди элементов нашего сайта. Попробуем расположить добавленный слой с картинкой на границе слоя с содержанием (в дизайне это белая подложка с текстами).

Для ориентира будем называть слой с белой подложкой – родительский слой. А слой с картинкой (который и будем смещать) – внутренний слой.

• Зайдите в карту дизайна, и поместите «внутренний слой» в «родительский слой», но в самом конце, т.е. после всех имеющихся в родительском слое элементов.
• В обычном режиме редактирования сайта задайте слою следующие значения на вкладке «Позиционирование»: значение «absolute» у пункта «Положение», размер в пикселях (ширина и высота), точки координат (для начала, можете поставить по нулям в левых колонках, после сместите как нужно). При этом слой пока упрется в грань экрана.
• Задайте родительскому слою значение «relative» у пункта «Положение». Это и будет означать, что слой стал родительским, и внутренний слой будет смещаться относительно родительского, а не относительно всего экрана монитора. Теперь внутренний слой окажется в углу родительского. После этого вы сможете заданием точных значений точек координат сместить слой как вам угодно.

По такому же принципу вы сможете настроить элементы во многих модулях.