Если вам нужно сверстать меню, в котором расстояние между элементами должно быть одинаковое и при этом родительский блок меню имеет автоматическую ширину, то совсем необязательно использовать для этой цели таблицу.
Всё оказывается достаточно просто: можно сверстать семантическое меню через UL-LI или любой другой набор элементов (в примере DIV-SPAN).
Ключевыми свойствами CSS будут text-align:justify и display:inline-block. Но только лишь этого недостаточно. Выравнивание по ширине в CSS работает по умолчанию для всех строк, исключая последнюю.
Но что если у нас первая и последняя - одна и таже строка? В этом случае есть решение!
Для всех современных браузеров (включая IE8), мы создадим псевдо...
Обзор основных используемых CSS-свойств и особенности их применения
В этой статье я расскажу про основные часто используемые CSS-свойства при верстке дизайна сайтов. Это будет не просто сухое техническое перечисление свойств, а скорее рекомендации по применению конкретного свойства, его особенностей, сокращенной записи, кроссбраузерности, ну вы поняли. Итак, поехали.
CSS-свойства для работы с текстом
font: bold 16px/30px sans-serif - наиболее удобная сокращенная форма для указания: font-weight/font-style(bold/italic), font-size(16px), line-height(30px) и перечня семейства шрифтов, т.е font-family (или же конкретного шрифта, в данном случае sans-serif). Указание высоты строки (line-height) часто используется для выравнивания ...
Поддержка различных тем оформления сайта при помощи CSS и JS
Если вам понадобиться сделать поддержку тем оформления («skins») для вашего сайта, то это можно просто организовать при помощи незамысловатого Javascript кода и CSS. При этом основная идея следующая: на сайт по умолчанию будет всегда подгружаться общий CSS-файл, определяющий неизменные стили для сайта, а при помощи JS мы будем создавать и внедрять на страницу новый элемент CSS-стилей.
Итак, файл стилей по умолчанию назовем «default.css». Он будет не изменен. А для смены темы сайта, мы предусмотрим на странице выпадающий элемент, HTML-тег SELECT. В нем то и будет находиться список всех доступных тем оформления сайта.
Имена CSS-файлов для хранения тем оформления будут theme2.css, theme3.css...
Как сделать простую подсветку кода в HTML средствами JS
Если вам потребуется осуществить подсветку синтаксиса кода на странице, например HTML или PHP, то это можно несложно реализовать на Javascript при помощи регулярных выражений (Regular Expression).
Примечание: имеется ввиду что спецсимволы вроде треугольных скобок, как при обозначении HTML-тегов, будут заменены HTML-сущностями, т.е < будет заменено на < ну итд.
Итак, необходимый нам код мы будем размещать в блоках <pre class="code"> тут будет HTML/JS/PHP и любой другой код </pre>, а в после этих блоков или же на событие window.onload мы подключим нашу будущую функцию js_simple_code_highlighter(), для обработки и раскраски кода.
Если вы не знакомы с регулярными выраженям...
Итак, в этой статье я расскажу об общих сведениях при построении выпадающих меню на 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...
Были ли у вас случаи, когда дизайнер нарисовал элемент формы для выбора файла, отличный от стандартного, и заказчик требует 100% соответствия? Нет? Тогда вам пока повезло!
Дело в том, что поле выбора файла для загрузки <input type="file" ... /> практически не поддается стилизации через CSS. Т.е мы можем изменить только значения вроде обрамляющей рамки, размера шрифта, и практически всё.
Этот элемент формы идет уже «склеенный» вместе с кнопкой «Choose file» (открывающей окно выбора файла), вид этого поля также различается практически во всех браузерах, а текст в кнопке по всей видимости, зависит также от языка в системе.
Так вот, немного поразмыслив, и «взвесив» всё, что мы имеем в арс...
Привязка футера (подвала) к низу страницы при блочной верстке
При блочной верстке часто бывает необходимо «прижать» подвал сайта к низу страницы, независимо от количества основного контента страницы. Для этого есть простой выход, без применения javascript, используя один CSS. Способ тестировался с включенным доктайпом, и возможно не будет работать, как ожидалось, если его убрать. Но это так, к слову.
Итак, сперва выставляем для элементов html и body высоту 100%. Это единственные элементы, на которые можно выставить высоту в процентах или любых других значениях, и при этом она будет «растягиваться» дальше, если контент превысит указанное значение.
Это понадобиться для того, чтобы внутри body мы смогли создать элемент со значением min-height, указанный...
