Табличный ад 😈

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

И действительно, табличная вёрстка вызывает дичайшую боль даже у бывалых верстальщиков и front-end разработчиков :)

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

colspan — проще говоря, этот атрибут "склеивает" ячейки в одном ряду. К примеру, если мы пропишем colspan="2", это будет означать, что эта ячейка добавит себе справа ещё одну такую же и будет занимать ширину в 2 ячейки.

rowspan — аналогия colspan, только действует уже на нижнюю строку, добавляя себе вторую такую же, становясь с ней единым целым.

#полезная_фишка

Больше блоков в виджете 👍

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

А что, если вы хотите поставить сторонний JS или же просто написать объяснительный текст?

Всё очень просто! Вы можете добавить любой блок в виджет путём обычного импорта/экспорта блоков из редактора страниц в Геткурсе. И наконец-то ваши виджеты приобретут вашу собственную индивидуальность :)

#лайфхак

Интересная особенность 😳

Хочу поделиться с вами интересной особенностью, которую я заметил совершенно случайно. Когда я делал урок для Клуба Магии Геткурса, я ошибся в написании тега, и открыл для себя тег <j>, документации на который я не смог найти нигде в интернете.

Самое забавное, что Геткурс не воспринимает его как ошибку и не редактирует в коде как что-то постороннее. По умолчанию он находится в состоянии inline как у всех строчных элементов, но в отличии от тега <i> не придаёт тексту никакого форматирования. Удивительно, что его ещё и можно стилизовать :)

Если вам кажется, что вам не хватает элементов, или же просто хочется поэкспериментировать, то ловите этот замечательный тег 😂

#полезная_фишка #тёмная_магия

Поставить картинку в Геткурсе — задача не из лёгких 😅

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

Всё дело в том, что у Геткурса по умолчанию на блоке с классом image стоит правило background-size: cover. И действительно, это правило помогает занимать всё доступное пространство картинкой, масштабируя её по отведенному месту. Но у Геткурса есть проблема с этим блоком, так как её основная оболочка содержит огромные внутренние отступы, из-за чего это свойство работает не правильно.

Чтобы правильно разместить вашу картинку в блоке без урезки, в классе image используйте background-size: contain вместо cover. Тогда ваша иконка или картинка полностью уместится в этот блок. И не забудьте, чтобы перебить правило Геткурса, вам понадобится директива !important к значению свойства.

#полезная_фишка

Добавим немного возможностей Геткурсу? 😉

Сегодня речь пойдет об инструменте скрытия блоков по параметру из URL. Кто-то уже знает, как работает эта штука, а кто-то нет :) Вкратце, идёт проверка параметра из урла страницы, проверяется её значение и блок либо скрывается, либо показывается.

Но меня смущает одно... функционал придумали целиковому блоку, а элементам - нет...

Я решил это немного исправить :) Теперь можно по параметру из урл что-либо сотворить с элементом на странице. В своём примере я изначально дал класс hide картинке, чтобы скрыть её, а затем проверял параметр select. И если он равняется единице, то скрипт показывает картинку на странице :)

Сам код ставится в конце вашей страницы, а в квадратных скобках и кавычках пишется тот параметр, который вы хотите проверить (у меня этот параметр select).

Cам код будет в посте ниже :)

#полезная_фишка