Блого-дарю — Страница 4 — Записки человека интересующегося

Позиционирование блока через position:relative оставляет пустое пространство. Как убрать?

13.09.2015 / 9 комментариев

Половину дня потратил на решение проблемы с пустым пространством, возникающим вследствие позиционирования блока с помощью position:relative. В моем случае я перекрывал часть одного фона другим (такая вот дизайнерская задумка). Проблема заключалась в том, что после перемещения блока вверх, под ним появлялось пустое пространство, равное по высоте значению top. По некоторым ссылкам из поисковика натыкался на … подробнее

Растягивание фона изображения с сохранением на нем пропорций определенного объекта

11.09.2015 / Leave a Comment

Обнаружил данный урок на одном канале youtube. Очень полезная фишка для веб-дизайнера на мой взгляд. Иногда ширины оригинального изображения недостаточно для какой-либо дизайнерской задумки, а его растягивание по ширине искажает нужные объекты. Чтобы сохранить эти объекты в целости и при этом растянуть фон изображения, PhotoShop предоставляет нам определенные инструменты. И так, в конечном итоге у нас … подробнее

Добавление горизонтальных линий до и после заголовка или изображения на CSS

09.09.2015 / Leave a Comment

Для того, чтобы добавить в качестве обрамительного элемента горизонтальные линии до и после заголовка (картинки, логотипа и т.д.) можно использовать CSS и сделать при этом вполне адаптивный вариант. Для этого нужно использовать псевдоэлементы :before и :after. Html-конструкция должна выглядеть следующим образом:

<div class="block">
    <span>ЗАГОЛОВОК</span>
</div>

<span>ЗАГОЛОВОК</span>

</div>

Для основной обертки используем следующие CSS-правила:

.block {
    text-align: center;  /* выравнивание заголовка по центру обертки */
    width: 80%;          /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди :-) */
    margin: 0 auto;      /* выравнивание обертки по центру документа */
    overflow: hidden;    /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */
}

.block {

text-align: center; /* выравнивание заголовка по центру обертки */

width: 80%; /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди :-) */

margin: 0 auto; /* выравнивание обертки по центру документа */

overflow: hidden; /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */

}

Для дочернего элемента <span> добавляем позиционирование, чтобы … подробнее

Автосохранение файла в SublimeText

07.09.2015 / 7 комментариев

Тяжеловато находил ответ на этот вопрос в поисковиках, поэтому решил добавить данную записиску. Так вот. Для того, чтобы ваш дорогой и горячолюбимый SublimeText смог автоматически сохранять редактируемый файл при потере фокуса с вкладки открытого файла или окна редактора необходимо проделать следующее: 1) Переходим в настройки редактора Preferences >> Settings — User 2) Добавляем в настройки строчку «save_on_focus_lost»: true, … подробнее

Ошибка 404 при клике на рубрику с записями WordPress

06.09.2015 / 2 комментария

Суть проблемы заключалась в том, что при клике на определенную рубрику вместо записей выводилась ошибка 404. Что к чему, блог совершенно пустой (на момент написания заметки всего одна запись), никаких плагинов не установлено, а выводить записи рубрики WP не желает. Решение оказалось таким же неожиданным, как и ошибка. Нужно перейти в настройки >> постоянные ссылки … подробнее

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

04.09.2015 / 9 комментариев

Буквально вчера столкнулся с одной проблемой и решил ее описать, т.к. поисковики результатов не дали. Яндекс.Почта для домена. Заказчик попросил добавить подпись к исходящему письму. Добавить текстовые контакты с пресловутым «с уважением» не составило труда, но что делать с логотипом? Казалось проблемы нет. Нажимаем «добавить картинку» (1) и она появляется (2). Стоить заметить, что добавить … подробнее