css-framework documentation

Колонки

Sat, 16 Feb 2008 16:18:40 -0400

Колонки с текстом, картинками... 2 колонки, 3 колонки, 10 колонок, это всё реально. /* Columns ------------------------------ */ .columns { width: 100%; overflow: hidden; } .w-5, .w-10, .w-15, .w-20, .w-25, .w-30, .w-35, .w-40, .w-45, .w-50, .w-55, .w-60, .w-65, .w-70, .w-75, .w-80, .w-85, .w-90, .w-95, .w-100, .w-33, .w-66, .w-38, .w-62 { float: left; overflow: hidden; } .col-content { padding: 0 6px; } .col-first { padding-left: 0!…

Выравнивание текста и плавающие элементы

Sun, 13 Jan 2008 18:08:00 -0400

Если вам нужно назначить выравнивание текста или свойство float:, возможно вам помогут следующие классы: /* Text align & Float ------------------------------ */ .a-left { text-align: left; } .a-center { text-align: center; } .a-right { text-align: right; } .f-left { float: left; } .f-right { float: right; }

Элементы контента

Sat, 16 Feb 2008 16:19:32 -0400

Данные правила действуют внутри блоков с классом content. К примеру:

Заголовки, параграфы, списки и всё остальное выводятся здесь :)

Ещё один дополнительный контентный блок...

CSS-хаки и фильтры

Fri, 22 Feb 2008 15:54:30 -0400

Подключение CSS-файлов для IE Для фильтрации CSS-стилей по версия IE используются так называемые Conditional Comments.

Формы

Sat, 16 Feb 2008 16:22:18 -0400

Формы Для форм написано минимум стилей: /* Content Form ------------------------------ */ .content form { } .content fieldset { margin-bottom: 1em; border: none; } .content legend { margin-top: -1px; padding-bottom: 1em; font-size: 1.1em; font-weight: bold; } .content .f-row { overflow: hidden; margin-bottom: .5em; } .content label { float: left; text-align: right; width: 25.99%; padding: 0 2%; } .content .f-inputs { padding-left: 30%; } .f-actions { padd…

Горизонтальное меню

Thu, 07 Feb 2008 16:46:56 -0400

Горизонтальное меню Класс .menu-h — создаёт простое горизонтальное меню. /* Horizontal Menu ------------------------------ */ .menu-h { overflow: hidden; border-left: 1px solid #ccc; } .menu-h li { float: left; list-style: none; padding: 0 .8em; border-right: 1px solid #ccc; }

Картинки

Sun, 13 Jan 2008 21:35:06 -0400

Для всех тэгов в контенкстной области прописаны следующие правила: /* Images ------------------------------ */ .content img { padding: 5px; border: 1px solid #ccc!important; margin-top: .4em; } .content img.null-image { padding: 0!important; border: none!important; margin: 0!important; } img.f-left { margin-right: 1em; } img.f-right { margin-left: 1em; }

Высота body 100%

Fri, 25 Jan 2008 13:59:44 -0400

Высота body 100% html { height: 100%; } body { height: auto !important; height: 100%; min-height: 100%; } ---------- Ссылки по теме: * Исследование высоты BODY

Создание меню

Thu, 07 Feb 2008 16:20:56 -0400

Меню лучше всего создавать в виде простых вложенных списков, к примеру:

Таблицы

Sat, 16 Feb 2008 16:20:12 -0400

Включенный в фреймворк код, стилизует таблицы: /* Tables ------------------------------ */ table { border-collapse: collapse; width: 100%; } table th, table td { border: 1px solid #ccc; padding: 2px 3px; vertical-align: top; } table th { background: #f4f4f4; } table td { }

Вспомогательные классы

Sat, 16 Feb 2008 21:33:08 -0400

«Ластик» * { margin: 0; padding: 0; } Данное правило обнуляет все отступы у всех элементов, которым по умолчанию назначены ненулевые значения. Например спискам, параграфам, заголовкам, заданы различные отступы во всех браузерах. Оно даёт гарантию того, что вы будете иметь полный конт…

Вертикальное меню

Sat, 16 Feb 2008 16:51:28 -0400

Вертикальное меню Класс .menu-v — создаёт простое вертикальное меню. /* Vertical Menu ------------------------------ */ .menu-v { border-top: 1px solid #ccc; } .menu-v li { padding: 2px 0; list-style: none; border-bottom: 1px solid #ccc; } .menu-v li ul { padding-left: 1em; margin-top: 2px; } .menu-v li li { border: none; border-top: 1px solid #ccc; }