Влад Мержевич

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

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега , а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.

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

Выравнивание по горизонтали

За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега , допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

Для указания выравнивания содержимого ячеек по верхнему краю, для тега требуется установить атрибут valign со значением top (пример 2).

Пример 2. Использование valign

Колонка 1

Колонка 2

В данном примере характеристики ячеек управляются с помощью параметров тега , но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).

Пример 3. Применение стилей для выравнивания

Колонка 1

Колонка 2

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

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

Выравнивание по центру

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

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы

(18.6)

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

Выравнивание элементов формы

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

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы

Имя
E-mail
Комментарий

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right" . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .

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

Простое центрирование DIV-элемента на странице

Этот метод будет отлично работать во всех браузерах.

CSS

Center-div { margin: 0 auto; width: 100px; }

Пример

Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .

Центрируем DIV внутри DIV-элемента старым способом

Этот метод div выравнивания по центру будет работать во всех браузерах.

CSS

Outer-div { padding: 30px; } .inner-div { margin: 0 auto; width: 100px; }

HTML

Пример

Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина (width ).

Центрируем DIV внутри DIV-элемента с помощью inline-block

В этом методе центрирования div внутри div необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8 .

CSS

Outer-div { padding: 30px; text-align: center; } .inner-div { display: inline-block; padding: 50px; }

HTML

Пример

Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока (inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .

Центрируем DIV внутри DIV-элемента горизонтально и вертикально

Здесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.

CSS

Outer-div { padding: 30px; } .inner-div { margin: auto; width: 100px; height: 100px; }

HTML

Пример

У внутреннего div-элемента должна быть указана ширина (width ) и высота (height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.

Центрируем DIV по нижней границе страницы

Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

CSS

Outer-div { position: absolute; bottom: 30px; width: 100%; } .inner-div { margin: 0 auto; width: 100px; height: 100px; background-color: #ccc; }

HTML

Пример

У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .

Центрируем DIV на странице вертикально и горизонтально

Здесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.

CSS

Center-div { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; }

Пример

У div-элемента должна быть установлена ширина (width ) и высота (height ).

Делаем адаптивное центрирование DIV-элемента на странице

Здесь для выравнивания div по центру средствами CSS мы делаем ширину div-элемента адаптивной, чтобы она реагировала на изменения размеров окна. Этот метод работает во всех браузерах.

CSS

Center-div { margin: 0 auto; max-width: 700px; }

Пример

У центрированного div-элемента должно быть установлено свойство max-width .

Центрируем DIV внутри элемента с помощью свойств внутреннего блока

Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.

CSS

Outer-div { padding: 30px; } .inner-div { margin: 0 auto; max-width: 700px; }

HTML

Пример

У внутреннего div должно быть установлено свойство max-width .

Центрируем два адаптивных div-элемента рядом друг с другом

Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.

CSS

Container { text-align: center; } .left-div { display: inline-block; max-width: 300px; vertical-align: top; } .right-div { display: inline-block; max-width: 150px; } screen and (max-width: 600px) { .left-div, .right-div { lef max-width: 100%; } }

HTML

Пример

Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.

DIV-элемент, центрированный при помощи Flexbox

Здесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .

CSS

Container { display: flex; align-items: center; justify-content: center; height: 100vh; } .item { background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; }

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

Введение

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

Стиль контейнера

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

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

Основные стили галереи

Теперь перейдем к определению стилей для класса galleryItem . Установим цвет текста, размер шрифта и будем смещать элементы влево.

GalleryItem { color: #797478; font: 10px/1.5 Verdana, Helvetica, sans-serif; float: left; } .galleryItem h3 { text-transform: uppercase; } .galleryItem img { max-width: 100%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

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

Работаем с колонками

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

В дизайне демонстрационной страницы мы будем использовать пять колонок. разберемся с математикой для расчета полей. Между колонками будет поле шириной 4%. Умножив на 5, мы увидим, что 20% ширины уходит на поля. На содержание остается только 80%. То есть каждая колонка будет 16% шириной.

Теперь мы можем вставить данные значения в код CSS. Каждый классgalleryItem представляет одну колонку, то есть ширина будет 16% и поле 2% для каждой стороны, что в сумме даст 4%.

GalleryItem { color: #797478; font: 10px/1.5 Verdana, Helvetica, sans-serif; float: left; width: 16%; margin: 2% 2% 50px 2%; }

Данный набор стилей создаст отличный пятиколоночный шаблон, который будет хорошо смотреться на экранах размера 13 дюймов и больше.

Где шаблон будет смотреться коряво?

К сожалению, данный шаблон будет ломаться при уменьшении размера страницы. При ширине меньше 500px он становится абсолютно нечитаемым и корявым.

Для решения задачи мы будем использовать медиа запросы для переопределения подходящего размера колонок.

Определение критических точек

Существует множество решений для определения критических точек, на которых следует сосредоточиться при разработке дизайна. Рынок заполнен различными устройствами с разным размером экрана, и очень непросто учесть все возможные варианты.

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

Как определить критические точки?

Самый лучший способ - открыть страницу в браузере и уменьшать размер окна. Технически, наш шаблон никогда не сломается, так как будет изменяться масштаб. Однако, при размере окна около 940px колонка текста станет слишком узкой для гармоничного размещения текста:

Для исправления ситуации в данной точке надо сделать четыре колонки вместо пяти. Изменив ширину колонки до 21% мы решим задачу. Так как используются оба свойства “max-width ” и “max-device-width ”, то дизайн будет меняться и при изменении окна браузера и на устройствах с размером экрана меньше установленных значений.

@media only screen and (max-width: 940px), only screen and (max-device-width: 940px){ .galleryItem {width: 21%;} }

Добавление данного стиля решает задачу. Наш пяти колоночный дизайн отлично работает на экранах шире 940px, а для более узких превращается в четырех колоночный шаблон.

Операцию повторить

Теперь повторяем описанный выше процесс снова и снова. Уменьшаем размер окна и смотрим, когда дизайн перестанет функционировать. Следующая точка обнаруживается на 720px. Нужно изменить ширину колонки до 29.33%, чтобы получить трехколоночный шаблон:

@media only screen and (max-width: 720px), only screen and (max-device-width: 720px){ .galleryItem {width: 29.33333%;} }

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

/* MМЕДИА ЗАПРОСЫ*/ @media only screen and (max-width: 940px), only screen and (max-device-width: 940px){ .galleryItem {width: 21%;} } @media only screen and (max-width: 720px), only screen and (max-device-width: 720px){ .galleryItem {width: 29.33333%;} } @media only screen and (max-width: 530px), only screen and (max-device-width: 530px){ .galleryItem {width: 46%;} } @media only screen and (max-width: 320px), only screen and (max-device-width: 320px){ .galleryItem {width: 96%;} .galleryItem img {width: 96%;} .galleryItem h3 {font-size: 18px;} .galleryItem p, {font-size: 18px;} }

Заключение

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

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

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

Первое, что вам нужно сделать, это новая публикация на сайте. С другой стороны, если вы хотите добавить её в уже существующую публикацию, то просто перейдите в режим редактирования записей. Как только вы окажетесь на странице редактора, кликните по кнопке «Добавить медиафайл».

Эта кнопка откроет перед вам загрузчик медиафайлов. Теперь вам нужно кликнить по ссылке «Создать галерею», которые вы можете видеть в левой части экрана. Чтобы добавить картинки, вы можете либо загрузить их с компьютера, либо выбрать уже загруженные. Вы можете просто выбрать фотографии, которые должны быть представлены в галерее. Они будут отмечены специальном знаком, который можно видеть на скриншоте, представленном ниже.

Как только вы выберете все нужные фото, нажмите «создать новую галерею» в медиа-загрузчике. Медиа-загрузчик покажет вам выбранные изображения в окне «Редактировать». Здесь вы можете добавлять подписи, изменять настройки и сортировать изображения, просто перетаскивая их на желаемые позиции. После того, как вы закончит, нажмите на «Вставить».

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

Вы можете проверить работоспособность, нажав на кнопку предварительного просмотра записи. Если вы не довольны результатом, вы всегда можете нажать на кнопку «добавить медиафайлы», чтобы отредактировать настройки. Вы можете изменить порядок отображения, увеличить или сократить число колонок, добавить или удалить новые картинки или описание. Как только вы будете довольны результатом, вы можете публиковать эту запись, и ваша работа предстанет на всеобщее обозрение.

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

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

Отображаем в виде карусели

Принцип отображения изображений в виде карусели схож с функционалом просмотра фотографий в Facebook. Изначально данная функция была доступна как часть плагина Jetpack, который представляет собой набор удобных инструментов. Тем не менее, проблем заключается в том, что он требует привязки сайта к WordPress.com, даже если в этом нет необходимости. Некоторое время назад, его выпустили в виде отдельного плагина, который могут использовать все, кто захочет.

Сначала вам нужно установить и активировать плагин Gallery Carousel. Как только вы активируете его, он сразу же будет готов к работе, и вам не нужно будет что-либо настраивать. Просто откройте свою публикацию с галереей и нажмите по изображению в галерее, чтобы увидеть карусель в действии. Либо вы можете ознакомиться с галереей изображений, представленной ниже:

Вы можете внести некоторые изменения в настройки плагина. Чтобы настроить его, пройдите в меню Параметры > Медиафайлы, и пролистайте до Image gallery carousel. Здесь вы можете установить черный, либо белый фон для режима просмотра карусели. Либо отключить данные или даже саму карусель.

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

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

В WordPress хорошо организована работа с графическими файлами и мультимедиа. Вставить изображение в статью очень просто, достаточно лишь в редакторе административной панели нажать кнопку «Добавить медиафайл », расположенную над панелью инструментов.

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

Встроенная галерея WordPress

Чтобы не прибегать к применению плагинов, при создании простой галереи можно использовать ту, что уже имеется в WordPress.

Рассмотрим её создание на примере кулинарного сайта:

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

Главный недостаток встроенной галереи WordPress в том, что она статична. При нажатии на картинку открывается новая страница с этой картинкой, где её можно рассмотреть более детально. Но рассматривать каждое изображение отдельно очень неудобно, поэтому дополнительно используют специальные плагины.

Галерея для WordPress при помощи плагинов

Наиболее удобный плагин галереи для wordpress, который будет полезен и для всех других изображений сайта это плагин Image-zoom , увеличивающий размер картинок.

После установки его следует слегка подкорректировать, выбрав опцию «Настройки »:

Нужно указать максимальные размеры изображений (длину и ширину), выбрать тему, время перелистывания слайд-шоу, прозрачность фона и другие параметры. После завершения настройки следует нажать кнопку «Обновить », после чего плагин начнёт свою работу.

Созданная с его помощью фотогалерея для WordPress выглядит впечатляюще, а просматривать фото более удобно как в ручном, так и в автоматическом режиме:

При создании компактной галереи часто используют плагин Image Horizontal Reel Scroll Slideshow . Уже из его названия ясно, что галерея будет располагаться и прокручиваться только горизонтально, не занимая лишнее место по вертикали страницы.

При наведении курсора мыши на любое изображение, оно замирает, а по щелчку мыши картинка открывается в новом окне. Плагин совместим с версиями WordPress 2.8 и выше.

Удобный плагин галереи для wordpress NextGen Gallery выбирают многие пользователи. Новичкам он может показаться сложным, но разобраться в нём не так сложно, как кажется. Все картинки для него нужно загружать в специальную папку wp-content/gallery .

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

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

Любой пользователь сможет найти и выбрать необходимый плагин, набрав в поиске запросы: «фотогалерея wordpress плагин » или «wordpress галерея изображений ». Можно поочерёдно установить несколько разных плагинов на локальном сервере, проверить их функционал, а затем выбрать наиболее подходящий именно для вас.

Для небольшого слайдера подойдёт лёгкий плагин Content Slide . Плагин Featured Content Gallery имеет более громоздкую настройку, но с его помощью можно выводить галерею постов. Для этих же целей подойдёт плагин Featured Posts Grid .

Галереи можно создать не только для картинок, фотографий и постов с помощью плагинов галереи для wordpress, но и для видео, используя специальные плагины, например, WordPress Video Gallery или уже упоминавшийся плагин NextGen Gallery .

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

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

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

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

Удачи Вам!

Хорошо Плохо