Если вам нужно сверстать меню, в котором расстояние между элементами должно быть одинаковое и при этом родительский блок меню имеет автоматическую ширину, то совсем необязательно использовать для этой цели таблицу.
Всё оказывается достаточно просто: можно сверстать семантическое меню через UL-LI или любой другой набор элементов (в примере DIV-SPAN).
Ключевыми свойствами CSS будут text-align:justify и display:inline-block. Но только лишь этого недостаточно. Выравнивание по ширине в CSS работает по умолчанию для всех строк, исключая последнюю.
Но что если у нас первая и последняя - одна и таже строка? В этом случае есть решение!
Для всех современных браузеров (включая IE8), мы создадим псевдо...
Удобство и приемущества нарезки PSD-шаблонов в Adobe FW
Adobe Fireworks — это графический редактор, который стал частью пакета программ Adobe, после того как они купили компанию Macromedia.
Родным форматом проги является PNG (кто не знал - сохранение информации о слоях, объектах и прочей информации в PNG возможно и отлично реализовано в FW).
Программа имеет хорошо продуманный интерфейс, удобную и простую работу как с растровой графикой так и векторной (читает многие форматы других приложений, например AI, EPS, PSD, итд.)
Странно, но не многие знают о ней и тем более используют в качестве инструмента для создания дизайна сайтов, хотя это очень удобно, если вы познали «всю мощь» этой программы.
Кон...
Итак, в этой статье я расскажу об общих сведениях при построении выпадающих меню на CSS и приведу 3 примера построения таких меню. Основная идея выпадающего меню на CSS крутиться вокруг написания CSS-кода с наследованием тегов, псевдо-класса :hover и некоторых CSS-селекторов.
В Internet Explorer версиях ниже 7-й очень ущербная поддержка CSS (не полная поддержка CSS 2.1), и псевдо-класс :hover работает только для ссылок. Поэтому для построения выпадающего меню в IE 6 есть два простых выхода.
Первый — это использовать специальное расширение файлов *.htc, которое майкрософт, видимо, и разработала в своё время чтобы скрыть недостатки своего браузера. Файлы *.htc — это практически чи...
Иногда, при HTML-верстке страниц, необходимо выровнять некий блок по центру вертикали родительского. Новички, наткнувшись на свойство CSS «vertical-align:middle», сразу же пытаются использовать его, якобы, по назначению, но не всё так просто.
Это свойство может быть пригодно только в двух случаях: в первом — оно аналогично аттрибуту valign="middle" у HTML-тега <TD> и будет работать как задумано. Во втором случае его можно использовать для выравнивания двух или более рядом стоящих линейных блоков (display:inline).
В остальных случаях, если мы хотим выравнять по центру вертикали родительского блока HTML-элемент, этот вариант не прокатит. Для этого, есть три не идеальных, но решени...
На моей памяти существует всего два основных, неглючных, способа блочной верстки (без использования таблиц). О них и пойдет речь в данной статье.
Первый способ основывается на использовании CSS-свойства «display» со значениями, симулирующими поведение элементов таблицы, а именно: display:table, display:table-row и display:table-cell.
Этот способ работает идеально во всех браузерах, которые поддерживают подобные значения для свойства display, а это основная масса браузеров, кроме нашего «фаворита» Internet Explorer. До 8-й версии IE не поддерживал полностью как CSS 2.1, так и CSS 3.
Поэтому, чтобы исправить ситуацию, пришлось найти «очередной хак для IE». И этим хаком стали свойства float:...
В этой статье я расскажу про два, наиболее часто используемых мной, способа верстки «закругленных уголков». Оба они очень просты в применении.
Итак, первый способ. Он подойдет для простых одноцветных блоков с обрамляющей рамкой или без неё. Для начала нам надо знать цвет фона и параметры рамки для нашего блока. Допустим, цвет фона блока будет #CCCCCC, а цвет рамки, толщиной в 1 пиксель — #666666. Далее создаем круг с данными параметрами и нужного скругления в Fireworks, Photoshop или любом другом редакторе. Всё! Все четыре уголка мы собрали в один файл и воспользуемся им в CSS следующим образом: мы создадим внешний контейнер (блок) с относительным позиционированием (position:relativ...
Перебрав множество способов для отображения PNG32 в Internet Explorer 6, я пришел к двум, наиболее часто используемым решениям. Эти два способа не требуют никаких внешних *.js или *.htc файлов и подходят для большинства случаев при верстке сайтов. Все способы отображения полноценного PNG в IE, конечно же, основываются на использовании фильтра DXImageTransform.Microsoft.AlphaImageLoader.
Первый способ предназначен для правильного отображения непосредственно картинок (HTML-тег <img src="...">) и основывается он, похоже, на очередном глюке при рендеринге изображения в IE 6. Если у изображения указаны запредельно высокие значения ширины и высоты — то оно просто «исчезает».
Честно г...
Были ли у вас случаи, когда дизайнер нарисовал элемент формы для выбора файла, отличный от стандартного, и заказчик требует 100% соответствия? Нет? Тогда вам пока повезло!
Дело в том, что поле выбора файла для загрузки <input type="file" ... /> практически не поддается стилизации через CSS. Т.е мы можем изменить только значения вроде обрамляющей рамки, размера шрифта, и практически всё.
Этот элемент формы идет уже «склеенный» вместе с кнопкой «Choose file» (открывающей окно выбора файла), вид этого поля также различается практически во всех браузерах, а текст в кнопке по всей видимости, зависит также от языка в системе.
Так вот, немного поразмыслив, и «взвесив» всё, что мы имеем в арс...
Привязка футера (подвала) к низу страницы при блочной верстке
При блочной верстке часто бывает необходимо «прижать» подвал сайта к низу страницы, независимо от количества основного контента страницы. Для этого есть простой выход, без применения javascript, используя один CSS. Способ тестировался с включенным доктайпом, и возможно не будет работать, как ожидалось, если его убрать. Но это так, к слову.
Итак, сперва выставляем для элементов html и body высоту 100%. Это единственные элементы, на которые можно выставить высоту в процентах или любых других значениях, и при этом она будет «растягиваться» дальше, если контент превысит указанное значение.
Это понадобиться для того, чтобы внутри body мы смогли создать элемент со значением min-height, указанный...
