На днях столкнулся с задачей вывода списка годов между 1900 и 2008 в теге select. Дело было при создании формы регистрации, а заказчик почему-то не хотел использовать Date Picker.
Так как сайт разрабатывается с помощью XML/XSL и без БД, то и решение должно быть на XSL. Если с месяцами все понятно и их в любом случае надо тянуть из XML, то дни и года надо выписать через темплейт. Читать дальше
Думаю многие из вас сталкивались с задачей создания двойной/нестандартной рамки для изображений на сайте. Частично я описал технику создания таких рамок здесь. Но я не упомянул (а если честно, то и сам тогда не подумал об этом) в той статье один интересный нюанс.
С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?
Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 1px для картинки и прописать для нее либо border с параметрами цвета и толщины, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.
В данном случае все проще. Нужно задать padding и border для картинки всего лишь с двух сторон, вместо четырех и фон. Например вот так:
.shadow{
border-bottom:2px solid #eee;
border-right:2px solid #eee;
padding-bottom:2px;
padding-right:2px;
background:#ccc;
}Вот живой пример:
Не уверен что на картинке с белым фоном это выглядит так как надо, но все же :)
С неменьшим успехом можно проделывать подобное, задавая фоновое изображение и играя с его позиционированием.
Естественно, что можно и нужно эксперементировать чтобы добиться нужного эффекта, но суть ясна.
P.S. В Quircks Mode в Интернет Эксплорере 6 не будет работать padding для img, но если вы все же работаете в Quircks Mode, то это ваши проблемы :)
Эрик Мэйер обновил свое видение обнуления дефолтных значений для HTML-элементов. В принципе изменения незначительны, кроме одного. Эрик изменил свое мнение о наследовании стилей для шрифтов. Из ресета исключены следующие свойства:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-weight: inherit;
font-style: inherit;
}Теперь заголовки будут выделены жирным шрифтом по умолчанию, em будет наклонным и тд. Так же добавлены стили для del и ins. А вот и полная версия: Читать дальше
Структура правильного HTML-документа базируется на логике, порядке и использовании семантически корректной верстки. Если у вас есть заголовок – используйте для него елементы Heading(h1-h6), если абзац/параграф – paragraph(p). Если у вас есть список – используйте элементы списков (ul/ol), если вы цитируете – используте blockquote или cite. Эти элементы придают смысловое значение разметке, делая ее семантически корректной, в дополнение к правильной структуре.
После составления корректного HTML-макета, используйте CSS для визуального оформления. (Тут уже дело вкуса, некоторые верстают CSS “с лету”, а некоторые только после создания HTML-макета)
Стандарт XHTML более строг к синтаксису чем HTML, он не допускает наличия незакрытых тегов, одинарные теги тоже должны быть закрыты (self-closing). Элементы в XHTML прописываются строчными, а не заглавными буквами. Значения атрибутов элементов должны быть указаны в кавычках. Есть и другие отличия, но более подробно я описывать их здесь не буду. Читать дальше
Уже довольно давно использую псевдокласс :first-letter для назначения двух фоновых изображений для одного элемента. Самое интересное что :first-letter, один из немногих псевдоклассов, которые работают в 6-ом Интернет Эксплорере. Но есть одна маленькая хитрость, которую нужно знать.
К делу. Как сказано выше, HTML элемент у нас один. Пусть это будет заголовок первого уровня. Читать дальше