Метка: html и css

Два класса css одновременно

Что делать, если одному элементу нужно присвоить сразу два класса CSS?

Элементу надо присвоить сразу два разных стиля. Ну бывает же такое, правда? Можно ли это сделать, не создавая новый стиль, объединяющий оба-два? Можно. Нужные классы просто надо перечислить в стиле элемента, и все. Без запятых. Допустим, вам нужно присвоить диву одновременно классы style1 и style2. Так и пишем: <div class="style1 style2">Something</div><div

Выравнивание картинки по центру в 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> Результат: Яблоки Груши