Метка: html и css

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

В этой заметке речь пойдет о случаях, когда нужно посредством CSS выровнять картинку по центру родителя. Чаще всего в таких случаях предлагают обернуть картинку каким-нибудь <p> и присвоить стилю этого <p> свойство text-align: center: <p class="centerimage"><img src="//somepath/img.png" /></p><p class="centerimage"><img src="//somepath/img.png" /></p> Метод вполне имеет право на существование, но мне не

Обнуление отступа элементов списка (OL или UL) с помощью CSS

Элементы LI нумерованных и ненумерованных списков по дефолту имеют отступ слева. Бывает так, что он не нужен. Что делать? Обнулить отступ. Делается это с помощью изменения padding: UL {padding: 0;} или OL {padding: 0;}UL {padding: 0;} или OL {padding: 0;} Если результат не устроил (а такое очень может быть, ведь

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

Много лет проблема выравнивания div’ов по центру была головной болью web-верстальщиков. Единственная таблетка, предлагаемая спецами, которая к тому же и не помогала: margin: 0px;margin: 0px; Но все изменилось после того, как в CSS появился элемент Flexbox. Вернее, это целый комплекс элементов, гораздо более гибкий, чем контейнеры display: box;display: box; Строят

Слои поверх flash

Если вам понадобится разместить на странице какой-то div так, что он будет перекрываться с флешом (например, видео- или аудиороликом), то вы столкнетесь с популярной проблемой: флеш всегда будет располагаться поверх всего остального, наплевав на все z-index. Решение проблемы простое до безобразия; оно описано на сайте Adobe: надо использовать параметр wmode

Символы для знаков транскрипции английских слов в web

Вот понадобилось. И обнаружилось, что эта информация вовсе не валяется на каждом углу. С трудом нашла в англонете. Выкладываю в записную книжку. Для справки. Для транскрипции слов на любом языке, построенном на латинском алфавите, используется система IPA (International Phonetic Alphabet). Сюда я выкладываю только малую часть, которая используется для транскрипции

Скрипт фотогалереи

В записную книжку — может, когда пригодится. Наткнулась на такую галерею на одном из сайтов, заглянула в код и там нашла копирайт и собственно источник:  http://galleria.io. Сейчас доступна версия 1.2.8 — если никуда неохота ходить, качайте прямо отсюда: galleria-1.2.8 Галерея сделана на яваскрипте. На сайте можно посмотреть демо. Классический дизайн бесплатный,

Что такое «Lorem ipsum…»

«Lorem ipsum…» — это текст-«рыба», который широко применяется в печати, а с начала эры компьютеров — в веб-дизайне и в компьютерной верстке. Я, так же, как и вы, не знала, что такое «рыба», пока не начала писать этот пост. 😀 Это жаргонное слово в среде дизайнеров и полиграфистов, означающее кусок

XML: банальные вещи

На своих сайтах (кроме этого) я делаю RSS-ленты вручную. И вот перелопатила все, что только можно, в попытках узнать ответ на вопрос, как внутри тега <description> вставлять ссылки. Если просто тупо это сделать — покажет лента этот самый тупой код.  А как правильно — ну нигде и ничего! Отчаявшись, пошла

Нумерованный список, начинающийся не с 1

Век живи — век учись. Раньше мне ни разу это не было нужно, а вот как понадобилось, так и узнала: тег <ol> имеет атрибут start, в котором можно указать, с какого числа нужно начинать нумерацию. Пример: <ol start=10> <li>Яблоки</li> <li>Груши</li> </ol> Результат: Яблоки Груши

Гуру переезжает

Очень часто в качестве справочника пользуюсь информацией с сайта htmlbobok.ru. Недавно, обратившись к сайту в очередной раз, обнаружила вместо ресурса надпись о том, что сайт переезжает на другой хостинг, в связи с чем будет недоступен пару дней. «Пара дней» продлилась, кажется, две или три недели. Интересно: что за сложности возникли