Правка верстки сайта и свойство overflow: visible !important;
 

Правка верстки сайта и свойство overflow: visible !important;

14 января 2014 5:19 Категории: Программирование

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

Сегодня задача была очень простая:

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

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

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

Блок одного изображения в галерее

Блок одного изображения в галерее

Как видно на изображении, вокруг рамки есть некоторый узор-рамка, который задан этому блоку с помощью свойства и внутренних отступов:

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

Поэтому в данном случае простым изменением ширины блока одной картинки тут не обойтись.

Как же поместить три картинки в маленький блок?

Все эти картинки были помещены в контейнер с шириной 1000 пикселей:

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

Система правления контентом сайта(CMS) была мне не известна, более того, мне показалось, что она является самописной, так как сходство с популярными CMS не было найдено мной.

немного разобравшись в админке сайта я нашел нужную страницу с редактированием страницы, но и тут встретились сложности: в данной cms галерея была отделена от текста страницы. Я нашел где находится галерея, но и тут не было ни единого редактора исходного кода, куда бы можно было добавить свой html блок.

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

Далее, когда блок изображения были завернуты в блок .galleri_b, все пошло как по маслу. Необходимо было просто дописать css код блока и готово:

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

Верстка галереи сайта

Верстка галереи сайта

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

  • Akurganow

    Использовать фоновую картинку для рамки? Шта?

    • Такая верстка мне изначально досталась от заказчика, не моих рук дело.

      • Akurganow

        Так надо было исправлять, а не городить костыли на костылях.

        • Не, когда у вас в бюджете и время заложена только доработка, рефакторинг кода будет оплачивать компания?