Курс обучения HTML (теория)
Длительность курса: 20 дней (160 часов).
Основной информационный ресурс: http://markup.w3.lan/
Задача курса: обучение минимальным знаниям, необходимым для начала роботы в
компании.
Требования к слушателям: знание основ html/css, быстрая обучаемость,
адекватность восприятия информации.
Курс обучения делится на 3 этапа:
Основы html/css.(5 дней)
- повторение, систематизация имеющихся знаний по html/css.
1.
Базовые понятия.(5 дней)
- изучение техник, необходимых для самостоятельного выполнения простого
проекта. Получение минимальных навыков применения этих техник.
2.
Закрепление полученных знаний.(10 дней)
- выполнение полноценных проектов с набором разных техник. Выработка навыков
применения выученных техник.
- выполнение тестового проекта (контрольная точка).
3.
1 этап
1 день
Photoshop
Большинство готовых дизайнов, с которыми веб-разработчику приходится иметь
дело, выполнено в Adobe Photoshop, и, соответственно, предоставляются в его
родном формате PSD. В связи с этим, мы рассмотрим несколько тем, относящихся к
верстке html используя версию Photoshop CS4.
В основном работа с дизайном сводится к поиску нужных для верстки фрагментов,
выделению, копированию, созданию нового файла, вставке и сохранению его для
веб. Но встречаются и такие задачи как дорисовка тени или градиента, изменение
цвета текстового или другого слоя, продление существующего фона и т. д. Все это
простые задачи, но поскольку без них не обходится ни один проект, хорошие навыки
работы с редактором Photoshop помогут сэкономить уйму времени.
Настройка рабочего места в Photoshop, работа с выделением, слоями,
текстом сохранение для web, а также описание некоторых техник
дорисовки детально описано в документе Photoshop.pdf
Формат изображений (GIF, JPEG, PNG24)
Существует три самых популярных формата для изображений в Интернет – это GIF,
JPEG и PNG. Для того чтобы делать правильный выбор при сохранении
графического изображения, вкратце рассмотрим их принципиальные отличия.
Формат GIF хорош для небольших изображений с ограниченным количеством
цветов. Большие фотографические текстуры и визуалы не стоит сохранять в этом
формате, потому, что при этом сильно пострадает их качество, а размер файла
будет неприемлем. Формат GIF обладает уникальной возможностью
(поддерживаемой практически всеми браузерами) – он может обладать
прозрачностью. Такой формат идеально подходит для изображений иконок и других
элементов декорации.
Формат JPEG, как правило, применяется в основном для фотографических
текстур/визуалов. Он не обладает прозрачностью, но зато хорошо подходит для
отображения градиентов и прочих сложных декораций, а так же фотографий.
Что касается, формата PNG, то он похож на JPEG, с тем отличием, что
обеспечивает сохранение изображения без потери его качества. Многие
фотографические текстуры и градиенты разумнее сохранять в формате PNG, а не
JPEG. Все зависит от объема результирующего файла и требуемого качества
изображения. Еще одним преимуществом PNG является наличие альфа-каналов,
при помощи которых делаются очень многие эффекты, например полупрозрачные
тени объектов.
Fireworks
Второй по популярности контейнер для дизайнов — многослойный PNG. В PS такие
файлы открываются как однослойные. В принципе, если дизайн простой и ничего не
мешает нам вырезать нужные фрагменты можно работать и так. В противном
случае, в пакет Adobe входит редактор Fireworks, предназначенный для создания и
редактирования многослойных PNG файлов. Он похож на PS но все же имеет
множество особенностей, и чтобы не осваивать еще один редактор, мы
сконвертируем многослойный PNG в PSD.
Открываем многослойный PNG в Adobe Fireworks (CS3) [далее Fw]. В палитре
Layers справа вверху открываем выпадающее меню и выбираем Unlock All.
Нажимаем Ctrl–A (Select All) – видим много голубых рамочек, затем Ctrl–Shift–G
(Ungroup), если на изображении ничего не изменилось, а количество рамок
изменилось – снова Ctrl–Shift–G, и так до тех пор пока количество рамок не
перестанет меняться. Если на каком-либо этапе при Ctrl–Shift–G изображение
изменилось (исчезла текстура или появились артефакты) отменяем последнее
действие, находим изменяющийся объект и растрируем его: меню палитры Layers –
Flatten Selection. После всех вышеуказанных действий – Save as… (Ctrl–Shift–S). В
диалоге Save as…, после выбора Save as type: Photoshop PSD, становится активной
кнопка Options – открываем и устанавливаем Settings: Custom, Objects: Convert to
Photoshop Layers, Effects: Render Effects, Text: Maintain Editability. PSD готов. Если
после открытия файла в Ps обнаружились несоответствия с PNG – возвращаемся в
Fw, проходим по всем слоям и растрируем все, на которых есть фильтры (в палитре
Properties, справа окошко Filters).
Редактор HTML/CSS
Вопреки мнению многих новичков, идеальным редактором для HTML является
текстовый редактор. К сожалению, в профессиональной верстке веб-страниц ни о
каких визуальных средствах разработки HTML-документов речи быть не может.
Поэтому, любые визуальные редакторы можете оставить в стороне, вооружившись
чем-нибудь попроще. В профессиональной HTML-верстке применимы только
текстовые редакторы, разумеется, не лишенные таких возможностей, как подсветка
кода или автозаполнение. В идеале, неплохо настроить свой редактор так, чтобы
вдобавок наглядно была видна разница между пробелами и символами табуляции.
Это позволит создавать и редактировать правильно форматированные документы.
Наиболее гибким в настройке редактором является Aptana Studio. (Для настройки
редактора прилагаются скриншоты а также файлы темплейтов Html и Css см. папку
Day1 > Aptana) Для расширения его возможностей и ускорения набора кода
используется пакет настроек “Zen Coding”. Принцип работы с этим пакетом состоит в
том, что каждому элементу присваивается определённый псевдоним, который
разворачивается в полный элемент с необходимыми атрибутами после нажатия
Alt+E. К примеру:
tarea →
fset →
img →
bg →
bgc →
<textarea cols="30" rows="10"></textarea>
<fieldset></fieldset>
<img alt="" />
background:|;
background-color:#|FFF|;
Следующий тип псевдонимов отвечает за вывод специфических элементов и
строится по принципу псевдоним + « : » + специфический псевдоним:
input:text →
link:css →
cc:ie →
<input type="text"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--[if IE]><![endif]-->
Синтаксис Zen Coding:
1.
2.
3.
4.
5.
6.
ID: E#name
Класс: E.name
Вложенность: E>E
Братство: E+E
Повторение: E*N, простой псевдоним братского E*3 = E+E+E
Разворачивание: E+, сложный псевдоним группы селекторов E+ = E>E+…
Примеры использования:
#name
.name
span.one.two
div#name.name
ul>li+li
<ul>
</ul>
p*2
→
→
→
→
<div id="name"></div>
<div class="name"></div>
<span class="one two"></span>
<div id="name" class="name"></div>
→
<li></li>
<li></li>
→
<p></p>
<p></p>
ul>li*2
<ul>
</ul>
→
<li></li>
<li></li>
table+
→
<table>
<tr>
</tr>
</table>
<td></td>
(Более сложные примеры в файле zencoding-example.html в папке Aptana)
Стандартные клавиатурные сокращения
Alt+E — аббревиатура разворачивания
Alt+I — вставка размеров изображения
Смена клавиатурных сокращений
Если вас не устраивают стандартные сокращения, вы можете изменить их на свои.
Для этого откройте необходимый скрипт (например, Expand Abbreviation.js) и в самом
верху найдите строчку Key: M3+E. Это и есть клавиатурное сокращение (M3
означает третью мета-клавишу, в данном случае - Alt). Замените это сочетание на
любое другое.
Настройка аббревиатур и сниппетов
Все настройки Zen Coding хранятся в файле zen_settings.js. default_attributes
Атрибуты, которые нужно добавлять элементам по умолчанию, и их значения.
aliases
Краткие названия длинных тэгов (например, blockquote можно сократить до bq). Для
коротких названий можно указать свои атрибуты в секции default_attributes, тем
самым вы сможете создавать заготовки для наиболее часто используемых
сочетаний тэгов и атрибутов (например: input:radio, script:src).
expandos
Разворачиваемые последовательности. Должны находиться в самом конце
аббревиатуры и заканчиваться символом + (например, dl+ или div#content>table+).
Перед раскрытием аббревиатуры такая последовательность будет заменена на его
значение (например, dl+ → dl>dt+dd).
snippets
Произвольные заготовки кода. С помощью символа | указывается, куда должен
встать курсор после раскрытия аббревиатуры. С помощью конструкции ${child}
указывается, куда должны добавляться потомки (если она не указана, потомки будут
добавляться в самый конец кода).
(Прилагается уже настроенный и адаптированный вариант zen-coding'a с
расширенными возможностями см. папку Day1 > Aptana > Scripts. Внимательно
читаем Файл !!!! Read Me !!!!.txt - инструкция)
Полезные плагины
Для Firefox (Mozilla)
Web Developer Toolbar
Панель с разнообразными инструментами для разработчика.
Позволяет: разрешать/запрещать поддержку cookies и JavaScript, смотреть и
редактировать CSS, просматривать и менять скрытые элементы форм, проверять
сайт на соответствие стандартам, тестировать на различных размерах окна
браузера, проверять результирующие свойства блоков.
Firebug
Позволяет контролировать и редактировать Javascript, CSS и HTML (в том числе и
динамически сгенерированный), смотреть значения в CSS, следить за сетевой
активностью и порядком загрузки страницы с отслеживанием задержек, облегчает
отладку JavaScript, имеется DOM-инспектор.
Pixel Perfect
Позволяет сравнить дизайн с версткой в окне браузера
Самый надёжный и быстрый способ избежать ошибок при верстке в (x)html
При первом запуске выбираем SGML Parser.
Для Internet Explorer
Internet Explorer Developer Toolbar
IE-аналог Web Developer Toolbar и Firebug для FireFox.
Систематизация базовых знаний html/css
HTML (от англ.HyperText Markup Language— «язык разметки гипертекста») —
стандартный язык разметки документов во Всемирной паутине. Большинство вебстраниц создаются при помощи языка HTML (или XHTML). Язык HTML
интерпретируется браузером и отображается в виде документа, в удобной для
человека форме.
XHTML (EXtensible HyperText Markup Language) - расширенный язык разметки
гипертекста, более строгая версия HTML.
Тег - элемент языка разметки гипертекста, такой как параграф, иллюстрация,
таблица. Теги делятся на открывающие <tag>, которые указывают на начало какоголибо действия на странице, закрывающие </tag>, которые показывают в каком месте
заканчивается действие тега <tag>, и самозакрывающиеся <tag />. Символ "/"
означает "закрывание".
Любой XHTML-файл состоит из трех разделов — элемента <!DOCTYPE>, заголовка
(<HEAD>) и тела документа (<BODY>).
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN"
"http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- заголовок страницы и техническая информация. -->
</head>
<body>
<!-- содержание страницы -->
</body>
</html>
Элемент <!DOCTYPE> сообщает браузеру о типе текущего документа и как его
интерпретировать. Различают несколько версий и типов XHTML-документов:
«Строгое» описание
документа, включающее все
правила.
<!DOCTYPE html PUBLIC "-//W3C//Dtd
XHTML 1.0 Strict//EN"
"http://www.w3.org/tr/xhtml1/Dtd/xhtml1strict.dtd">
«Переходный» тип, более
Transitional лояльно относящийся к коду
документа.
<!DOCTYPE html PUBLIC "-//W3C//Dtd
XHTML 1.0 transitional//EN"
"http://www.w3.org/tr/xhtml1/Dtd/xhtml1transitional.dtd">
Strict
Frameset
Устанавливается при
использовании на странице
фреймов.
<!DOCTYPE html PUBLIC "-//W3C//Dtd
XHTML 1.0 Frameset//EN"
"http://www.w3.org/tr/xhtml1/Dtd/xhtml1frameset.dtd">
Есть всего несколько правил, которые помогут избежать ошибок при написании
(X)HTML кода:
1) форматирование кода — вложенные элементы должны иметь отступ слева на 1
таб больше, чем родитель в который они вложены:
<div class=”box”>
<div class=”heading”>
<h2>Heading text</h2>
</div>
</div>
Cоблюдение этого простого правила, улучшает визуальное восприятие кода,
уменьшая тем самым вероятность ошибиться.
2) Порядок закрытия тегов — помним правило «первым пришел — последним ушел»
<tag1><tag2><tag3>Some text</tag3></tag2></tag1>
3) Помним о том, что нельзя вкладывать блочные элементы в строчные
4) Валидация
Основные элементы HTML
Все основные теги, их атрибуты, а так же свойства css, присвоенные тегам по
умолчанию отображены в файле tags.pdf
Основы CSS
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология
описания внешнего вида документа, написанного языком разметки.
CSS-код – это список инструкций для браузера, – как и где отображать элементы
веб-страницы, написанный особым образом. Под «элементами» обычно
подразумеваются теги XHTML/HTML и их содержимое. Основная идея CSS в том,
чтобы отделить дизайн документа от его содержимого. CSS отвечает за
оформление и внешний вид, а XHTML/HTML — за содержание и логическую
структуру документа.
Для того, чтобы применить таблицу стилей к HTML-документу, мы можем избрать
один из трёх способов, либо комбинировать их:
применить внешние стили (в виде отдельного текстового .css-файла) с
помощью элемента <link>:
•
<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
встроить стили непосредственно в HTML-документ (в виде блока cssтекста) с помощью элемента:
•
<style type=”text/css”>
…
</style>
Сам тег <style> (в отличие от <link>) может находиться в любой части документа, но
обычно его размещают внутри секции <head>.
применить inline-стиль, то есть назначить стиль конкретному HTML-элементу
непосредственно в документе, с помощью HTML-атрибута style:
•
<p style=”color:#f00;”>a unique paragraph in red</p>
Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит
из одного или нескольких селекторов (специальных указателей на HTML- объекты, к
которым мы планируем применить css-правило), разделённых запятыми, и блока
определений. Блок определений же обрамляется фигурными скобками, и состоит из
набора свойств и их значений.
Схематически это можно показать так:
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
Селекторы бывают 3 основных видов:
1) HTML Селекторы – в качестве селектора мы используем имя того html-тега,
который хотим изменить.
div {font-size: 12px;}
2) Селекторы класса – «Класс» – это некое имя, строка, которое мы можем
применить к любым HTML-тегам, чтобы впоследствии ссылаться на них по имени
класса. В качестве имени класса вы можете использовать практически любую
строку (не может начинаться с цифры). Удобство таких селекторов в том, что можно
присвоить одно имя класса множеству html-тегов в документе и затем управлять их
внешним видом, обращаясь к ним по имени класса.
table.details {table-layout: fixed;}
.heading {color: #0f0;}
.info .heading {color: #0f0;}
3) ID селекторы (или идентификаторы) – ID – это некое имя, которое вы, так же, как и
в случае с классами, можете применить к любому HTML-тегу. Основное отличие – ID
должен быть уникален в рамках html-документа:
#navigation {background: #f0f0f0;}
#footer {border: 1px solid #f00;}
Стандарт CSS определяет приоритеты, в порядке которых применяются правила
стилей, если для какого-то элемента подходят свойства нескольких правил
одновременно (или, в редких случаях, в одном правиле есть одноименные
свойства). Это называется «каскадом», в котором для свойств рассчитываются
приоритеты или «веса», что делает результаты предсказуемыми.
Приоритеты рассчитываются таким образом (от большего к меньшему):
1. свойство задано при помощи !important;
2. стиль прописан инлайново в теге в html через атрибут style=””;
3. количество идентификаторов (#id) в селекторе (чем больше, тем больше
приоритет);
4. количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе;
5. количество имён тегов в селекторе;
Кроме того, имеет значение относительный порядок расположения свойств –
свойство, указанное позже, имеет приоритет.
Так же следует помнить о наследовании — это перенос правил форматирования для
элементов, находящихся внутри других. Например, если для тега <p> задан красный
цвет текста, а для курсива <em>, который находится внутри абзаца, нет, то в этом
случае вложенный элемент наследует свойства своего родителя и курсивный текст
также будет красным.
Наследование полезно для задания свойств, применяемых к элементу по
умолчанию. Так, достаточно задать свойства шрифта для тега <body> и он
примениться ко всему содержимому страницы.
Существует два варианта применения наследования. Если свойство наследуется, то
для дочернего элемента это же свойство можно не указывать. И наоборот, если
свойство наследуются, но не нужно для отображения дочернего элемента, его
следует отменить.
Псевдокласс (англ. pseudo-class) - класс, который существует, не зависимо от того,
объявлен атрибут class для элемента или нет. Такие классы существуют всегда и
предусмотрены для некоторых элементов и их состояний. Чаще всего используются
псевдоклассы элемента <a>. Для него существует четыре основных псевдокласса, в
соответствии с состоянием этого элемента: а:hover, a:link, a:visited и a:active.
Псевдокласс :hover позволяет определить стиль для гиперссылок, находящихся под
курсором мыши в текущий момент времени; :link - это еще не посещенные
гиперссылки, :visited - уже посещенные гиперссылки; :active - активные или
открываемые в данный момент ссылки. Чаще всех используется псевдокласс :hover.
Синтаксически, псевдокласс указывается в селекторе после знака двоеточия.
a:hover {text-decoration: underline;}
a.nav-link:hover {color: #000;}
Многие современные браузеры имеют псевдокласс :hover, предопределенный для
всех HTML-элементов.
CSS свойства
Шрифты
font-family
Используется для объявления шрифта или семейства шрифтов. Семейства
шрифтов: serif, sans-serif, monospace, cursive и fantasy. Если название шрифта
состоит из нескольких слов - его следует заключить в кавычки.
P {font-family: "times new roman", serif;}
font-style
Два значения: курсив (italic) или обычный (normal).
EM {font-style: italic;}
font-weight
Значения: bold, normal, lighter, bolder и числовое (100-900).
b {font-weight: bold;}
font-size
Устанавливает размер шрифта: абсолютный (pt, in, cm, px), относительный
(em, %). H2 {font-size: 1.2em;}
H3 {font-size: 12px;}
font-variant
Позволяет отображать текст в режиме small-caps. Значения: small- caps,
normal, inherit.
font
Краткое описание свойств шрифта. Порядок следования значений важно
соблюдать:
font {font-style font-weight font-size/line-height font-family;}. Можно не
указывать любое из значений, не нарушая порядок их следования. P {font:
bold 12pt/14pt Helvetica,sans-serif;}
Цвет и фон
color
Устанавливает цвет текста.
H6 {color: #f00;}
background-color
Устанавливает цвет фона элемента. Значение по умолчанию: transparent.
P { background-color: #cfcf00; }
background-image
Фоном элемента должно быть изображение. Совместно с другими
свойствами background, изображение может повторяться по горизонтали, по
вертикали, в обоих направлениях. Совместно с этим свойством следует
использовать background-color на случай, когда изображение не может быть
загружено или показано.
BODY {background-image: url(../images/bg.gif);}
background-repeat
Указывает как повторять фоновое изображение. Возможные значения:
repeat (повторять по вертикали и по горизонтали), no- repeat (не повторять),
repeat-x (по горизонтали), repeat-y (по вертикали). По умолчанию: repeat.
BODY {background-repeat: repeat-y;}
backgroundattachment
Если задано фоновое изображение, то данное свойство определяет, будет
ли оно фиксироваться относительно окна просмотра (значение "fixed") или
будет перемещаться вместе с документом (значение "scroll") в процессе его
прокрутки.
BODY {background-attachment: fixed;}
background-position
Устанавливает начальную позицию для фонового изображения или цвета.
Значения: Position (x y) or (x% y%); top, center, bottom, left, right.
BODY {background-position: top center;}
Свойства текста
letter-spacing
Устанавливает расстояние между символами.
P {letter-spacing: 0.5em;}
line-height
Устанавливает расстояние между линиями в элементе (высоту строк).
Значение не может быть отрицательным.
P {line-height: 18px;} H2 {line-height: 2em;}
text-decoration
Значения: none (нет), underline (подчеркнутый текст), overline (черта над
текстом), line-through (текст перечеркнут), blink (мерцающий). Значения
можно комбинировать.
U {text-decoration: underline;}
.old {text-decoration: line-through;}
text-transform
Изменяет регистр символов в элементе. Значения: capitalize (Первый Символ
Каждого Слова Прописной), uppercase (ВСЕ БУКВЫ ПРОПИСНЫЕ), lowercase
(все буквы строчные).
H1 {text-transform: uppercase;}
text-align
Устанавливает горизонтальное положение текста. Может быть применено
только к блочным элементам.
P {text-align: justify;} H4 {text-align: center;}
text-indent
Устанавливает начальный отступ первой строки элемента. Применяется
только к блочным элементам.
P {text-indent: 5em;}
H2 {text-indent: -9999px;}
vertical-align
Изменяет вертикальное выравнивание текста в строке или ячейке таблицы.
.super {vertical-align: top;}
word-spacing
Устанавливает расстояние между словами, которые определены как строки
символов, разделенные пробелами.
P {word-spacing: 0.5em;}
white-space
Определяет поведение пробелов и переноса текста на новую строку внутри
элемента. Значения: normal, pre, nowrap. Другими словами запрещает или
разрешает перенос по словам.
direction
Позволяет изменить направление текста на «справа на лево». Значения: rtl,
ltr.
#wrapper{direction:rtl;}
Свойства блока
margin-top, marginright, margin- bottom,
margin-left
Устанавливает размер отступа сверху, справа, снизу и слева от элемента.
Возможны отрицательные значения.
margin
Краткая форма. Устанавливает размеры отступов снаружи элемента.
Возможны отрицательные значения. Несколько значений читаются сверху по
часовой стрелке: top-right-bottom-left.
UL {margin-top: 0.5in;}
H1 {margin: 2em;}
P {margin: 0 5px 0 10px;} P {margin: 0 5px;}
padding-top, padding- Устанавливает размер отступа сверху, справа, снизу и слева внутри элемента.
right, padding- bottom, Отрицательные значения не возможны.
padding-left
UL {padding-top: 0.5px;}
padding
Краткая форма. Устанавливает размеры отступов внутри элемента.
Отрицательные значения не возможны. Несколько значений читаются
сверху по часовой стрелке: top-right-bottom-left.
H1 {padding: 2px;}
border-top-width,
border- right-width,
border-bottom-width,
border- bottom-width
Устанавливает ширину верхней, нижней, левой, правой границы элемента.
Отрицательные значения не возможны.
border-width
Устанавливает ширину границ элемента по периметру. Отрицательные
значения не возможны.
UL {border-top-width: 0.5in;}
H1 {border-width: 2px;}
border-color
Устанавливает цвет границ элемента. Все четыре границы могут иметь
различные значения. H1 {border-color: silver black;}
border-style
Устанавливает стиль отображения границ элемента. Значения: dashed;
dotted; double; groove; inset; outset; ridge; solid; none. По умолчанию: none
(границы не показываются, ширина равна 0).
H1 {border-style: solid; border-color: purple;}
border-top, borderright, border- bottom,
border-left
Краткая форма записи, которая устанавливает ширину (width), цвет (color) и
стиль (style) верхней, правой, нижней или левой границы элемента.
border
Краткая форма записи, которая устанавливает ширину (width), цвет (color) и
стиль (style) границ элемента по периметру. H1 {border: 2px dashed tan;}
width
Устанавливает ширину элемента. Не может иметь отрицательные значения.
UL {border-top: 3px solid black;}
TABLE {width: 80%;}
min-width, max-width
Устанавливает минимальную/максимальную ширину элемента.
height
Устанавливает высоту элемента. Не может иметь отрицательные значения.
.icon {height: 50px;}
min-height, max-height Устанавливает минимальную/максимальную высоту элемента.
float
Свойство "плавающего" элемента. Данное свойство определяет, будет ли
блок перемещен влево, вправо или вообще не будет перемещен. Значения:
left; right; none.
IMG {float: left;}
clear
Это свойство определяет, какие стороны блока, порожденного элементом,
не могут соседствовать с предшествующим перемещаемым блоком.
Значения: both (обе стороны); left; right; none. По умолчанию: none.
H1 {clear: both;}
outline
Свойство определяющее цвет, стиль и толщину внешней границы. В отличие
от линии, задаваемой через border, свойство outline не влияет на положение
блока и его ширину.
Свойства позиционирования
position
Определяет тип позиционирования элемента. Значения: absolute, fixed,
relative, static, inherit. По умолчанию: static.
top, left, right, bottom
Определяет отступы для позиционируемого элемента.
.logo{position: absolute; top: 10px; left: 10px; z-index: 5;}
z-index
Определяет индекс по оси z для позиционируемого элемента.
overflow
Это свойство описывает что будет происходить с содержимым блока если
оно выходить за его пределы. Значения:auto, hidden, scroll, visible, inherit.
#header {overflow: hidden;}
Свойства отображения
display
Используется для изменения заданной по умолчанию формы представления
HTML элементов. Значения: block; inline, inline-block, table, table-cell, tablerow, list-item, none. Когда display="none" - элемент не отображается совсем и
место для него не резервируется.
.hide {display: none;}
visibility
Определяет будет элемент видимым или нет. Значения: visible, hidden. Под
скрытый элемент резервируется место.
list-style
Краткая форма записи, собирающая все возможные свойства list-style.
Применяется к элементам, у которых свойство display="list- item".
UL {list-style: square url(bullet3.gif) outer;}
Разное
cursor
Определяет внешний вид курсора при наведении указателя мыши на
элемент.
Значения: auto (браузер сам определяет по контексту); crosshair; default
(обычно стрелка - определено операционной системой); help; move; pointer;
text; wait; e-resize; ne-resize; nw-resize; n-resize; se- resize; sw-resize; s-resize;
wresize.
Подробнее можно посмотреть здесь http://www.w3schools.com/css/css_reference.asp
или здесь http://htmlbook.ru/css
2 день
Правила форматирования кода и структура папок
Внутри каждой компании существуют некоторые правила оформления и ведения
документов, а также именования папок. Здесь мы рассмотрим некоторые правила,
которые следует соблюдать по умолчанию во избежание беспорядка.
Имена CSS-файлов должны соответствовать media-области их применения: all.css,
screen.css, print.css и т.п
Пример структуры папок:
Правила для HTML-кода
Эта глава описывает основные правила оформления HTML-кода. Как результат
правильного форматирования, мы получаем доступный для понимания и легкий для
редактирования HTML-документ. От того, насколько правильно оформлен документ,
также зависит скорость поиска и устранения ошибок. Поэтому убедительная просьба
всем читающим - внимательно отнеситесь к данной главе.
Отступы
В HTML-документе отступы, играют немаловажную роль. В соответствии с
иерархической структурой документов, отступы показывают уровень вложенности
элементов, а это, в свою очередь, дает дополнительную информацию тому, кто
редактирует документ. Никогда не стоит пренебрегать корректировкой отступов
даже в случае незначительных изменений в документе. На вопрос "Чем лучше
делать отступы, пробелами или табуляцией?", существует вполне однозначный
ответ - табуляцией. Во-первых, потому, что в случае пробела вам придется
использовать как минимум два символа пробела и соответственно два байта (в
общем случае) на один "символ" отступа, вместо одного байта для табуляции.
Пробельные символы отступа у вас будут занимать в несколько раз больше памяти,
чем те же отступы с табуляцией, а для веб-документов, как известно, размер имеет
критическое значение. Во-вторых, у разных людей есть разные привычки
относительно того, сколько пробелов они ставят для отступа: два, три и т.д.
Поэтому, правило номер один для отступов - используйте табуляцию вместо
пробелов.
Идея отображения иерархической вложенности элементов также должна быть
понятна. Например, если тело документа (элемент body) содержит элемент div
внутри себя, а тот, в свою очередь, содержит изображение (элемент img), то это
отображается так, как показано в примере:
Отображение иерархической вложенности
<body>
<div>
</div>
</body>
<img src="mypic.jpg" />
Три элемента в одной строке
<table>
<tr><td><a href="#">link</a></td></tr>
</table>
Таких конструкций следует избегать, а вместо них использовать следующую:
Правильное использование переносов
<table>
<tr>
</tr>
</table>
<td><a href="#">link</a></td>
То же самое касается элементов, не вложенных друг в друга. Обратите внимание,
что мы оставили два элемента td и a в одной строке и не стали их разбивать. Дело в
том, что чрезмерное увлечение переносами элементов не добавит ясности в код, а
скорее затруднит чтение. Все хорошо в меру.
Вставка специальных символов
Любые специальные символы такие, как ©, & и др. следует представлять в виде
определенных стандартом ссылок на сущность (EntityReference), например: "&copy;".
Список сущностей, регламентированных стандартами HTML 4.01 и XHTML 1.0,
можно посмотреть по следующей ссылке: http://www.w3.org/TR/REChtml40/sgml/entities.html
Цвет
Определение цвета в CSS необходимо задавать в виде шестизначной
последовательности шестнадцатеричных цифр, начинающейся со знака #.
Например #fefefe. Здесь первая пара цифр означает количество красного цвета,
вторая - зеленого, и третья - синего. Например, последовательность #00ff00
означает чистый зеленый цвет, потому, что количество красного и синего равно
нулю, а зеленый задан по максимуму, т.е. "ff". Вместо текстовых эквивалентов
цветов, предпочтительнее использовать вышеупомянутый формат, т.е. "#ffffff"
вместо "white" и т. д.
Существует также сокращенная форма записи цветов, когда каждая составляющая
цвета представлена комбинацией одинаковых шестнадцатеричных цифр. Например,
белый цвет может быть представлен как #fff, а зеленый #0f0. Предпочтение всегда
нужно отдавать сокращенной форме записи.
Комментарии в HTML
HTML должен комментироваться так:
<!-- header -->
Текстовая информация отбивается от тэга “пробелом”. Никаких дополнительных
символов не нужно.
Такая форма неверна:
<!-- \\\\\ header ///// -->
<!-- *** header *** -->
Небходимо комментировать:
1.
основные разметочные блоки (header, footer и т. п.)
2.
основные смысловые блоки и элементы (logo, navigation, breadcrumbs, article и
т. п.}
3.
основные функциональные блоки и элементы (sub-navigation, popup, search
contact form и т. п.}
Условные комментарии
Данная технология работает только в Internet Explorer (независимо от версии). И
применяется, как правило только для подключения отдельных CSS,
предназначенных только для IE.
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen"/><!
[endif]-->
Данный ie.css увидит любой Internet Explorer.
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen"/><!
[endif]-->
Данный ie7.css увидит только Internet Explorer 7.
Оформление секции <head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ProjectName</title>
<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
<script type="text/javascript" src="js/main.js"></script>
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" /><![endif]-->
</head>
Из meta-тегов пишем только:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Другие meta-теги не прописывать (если об этом не сказано отдельно в требованиях к
проекту):
<meta name="language" content="en" />
<meta name="keywords" content="" />
<meta name="description" content=" " />
... (и другие)
Набор символов должен быть utf-8 (если клиент не просит использовать другой).
Порядок записей в теге head должен быть именно таким:
1.
2.
3.
4.
5.
указание кодировки
title
подключение css (только через link)
подключение js
подключение css для IE
Если каких-то записей быть не должно, например js и lt7.css, их, естественно, не
пишем.
Внимание если в проекте нужен CSS для IE7, то нет необходимости делать lt7.css и
lt8.css(ie7.css). Достаточно сделать ie.css.
Общая разметка страницы
1. Основной блок страницы – #wrapper.
2. Основнaя навигация страницы – #nav.
3. Элементы на которые используются id:
- #header («шапка» документа);
- #main (основное содержание страницы);
- #twocolumns (колонка, которая содержит в себе #content и боковую колонку);
- #content (колонка контентной части);
- #sidebar (уникальная колонка слева или справа от #content'а);
- #footer («подвал» страницы);
- элементы для JavaScript имплементации;
- элементы форм, которые связаны с соответствующими label через for/id.
Примеры разметки для страниц.
Для выделения боковой уникальной колонки используем #sidebar.
Для выделения боковой колонки, которая несет в себе второстепенную
дополнительную информацию, используем .aside (.aside1, .aside2 в случае, если
таковых две).
Страница с основной колонкой и боковой уникальной колонкой:
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
Страница с основной колонкой, боковой уникальной колонкой и одной
дополнительной колонкой:
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="twocolumns">
<div id="content"></div>
<div class="aside"></div>
</div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
Страница с основной колонкой и двумя дополнительными колонками:
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="twocolumns">
<div id="content"></div>
<div class="aside1"></div>
</div>
<div class="aside2"></div>
</div>
<div id="footer"></div>
</div>
Проверка документов на соответствие спецификациям
Для того чтобы убедиться, что ваш документ соответствует заданной (и описанной в
DOCTYPE) спецификации, существует специальный сервис, или так называемый
валидатор, предоставленный консорциумом W3C и доступный по
адресу: http://validator.w3.org/
W3C валидатор является весьма удобным средством для проверки валидности
документов и выявления ошибок. Он четко покажет в какой строке ошибка и на что
следует обратить внимание для документов данного типа. Помимо проверки HTML и
XHTML это средство также пригодно для оценки документов, имеющих родство с
XHTML, таких, как, например XHTML+MathML, XHTML+MathML+SVG, а также SVG.
Проверка CSS файла также возможна, используя соответствующий W3C сервис,
доступный по адресу: http://jigsaw.w3.org/css-validator/
Как уже было сказано, следование общепринятым стандартам создания вебдокументов вносит вполне очевидную упорядоченность в многоликом изобилии
Интернет. Это, несомненно, является хорошим тоном любого веб-разработчика, от
индивидуальной личности до крупной компании.
HasLayout
Введение
Множество несоответствий (стандартам) Internet Explorer’а при визуализации вебстраниц может быть устранено путем присвоения конкретным элементам свойства
layout. John Gallant и Holly Bergevin называют эти несоответствия
«пространственными ошибками», подразумевая, что они часто могут быть
исправлены, если задать элементу ширину или высоту. Это ведет к справедливому
вопросу: каким образом layout может менять визуализацию одного элемента и
совместное отображение нескольких?
hasLayout: определение
Layout является исключительно концепцией IE/Win, которая определяет, как будет
ограничено и визуализировано внутреннее содержание элементов, как элементы
будут взаимодействовать и влиять друг на друга, реагировать на и передавать
события, вызванные пользователем или приложением.
Это качество в одностороннем порядке может быть вызвано некоторыми
свойствами CSS. Некоторые HTML элементы обладают им по умолчанию.
Разработчики Microsoft решили, что элементы должны иметь возможность получать
это «свойство» (в терминах объектно-ориентированного подхода), и они назвали его
hasLayout. Это свойство становится true, если элемент имеет\получает лейаут.
Терминология
Мы говорим, что элемент «приобретает layout» или, что элемент «имеет layout»,
когда для него Microsoft’овское свойство hasLayout становится true.
Маркус Милке (Markus Mielke) из команды разработчиков IE в своей статье
"HasLayout Overview" условно различает элементы на две категории:
1)
Элементы содержащие контент, размеры и отображение которых зависит от их
родительских элементов, т.е не имеющие layout'та;
2)
Элементы отвечающие и за свои размеры и за организацию и визуализацию
своего содержимого, т.е. Элементом с layout.
«Элементом с layout» может быть любой элемент, который имеет layout по
умолчанию либо получил его в результате выставления некоторых соответствующих
CSS-свойств.
В «не-layout» элементах свойство hasLayout не выставлено, например, чистый div
Без заданных размеров может быть «не-layout родителем».
Единственным способом выставить hasLayout = false является удаление или сброс
первоначального CSS-свойства, которое вызвало hasLayout = true.
С чем приходится иметь дело
Проблема hasLayout затрагивает дизайнеров и верстальщиков с любым уровнем
опыта. Layout обладает редкими и тяжело предсказуемыми эффектами при
визуализации блоков, а также при отображении вложенных в них элементов.
Следствием того, что у элемента есть или нет layout, может быть:
●
●
●
●
●
●
Распространенные ошибки IE при отображении «плавающих» блоков;
Различное поведение самих блоков при одинаковых базовых свойствах;
«Схлопывание» полей между родителем и его потомками;
Различные проблемы с созданием списков;
Разное позиционирование фоновых картинок;
Различия между браузерами при использовании скриптов.
Вышеприведенный список короткий и неполный.
Откуда появляется layout
В отличие от стандартных CSS-свойств, layout не может быть присвоен напрямую
через CSS-правила. Другими словами, не существует никакого «layout-свойства».
Определенные элементы автоматически «имеют layout», и он может быть косвенно
добавлен различными CSS-правилами.
Элементы, у которых по умолчанию есть layout
<html>, <body>, <table>, <tr>, <th>, <td>, <img>, <hr>, <input>, <button>, <select>,
<textarea>, <fieldset>, <legend>, <iframe>, <embed>, <object>, <applet>, <marquee>
Когда необходим layout и как его назначить
Самая распространенная ситуация когда необходим layout - для родителя
элементов имеющих свойство float отличное от none;
Если у вас в коде есть блок(и) со свойствами float:left; или float:right; то для их
первого общего родителя необходимо прописать свойства возвращающие
hasLayout.
CSS
.parent:after{ content:''; display:block; clear:both;
}
Современные браузеры
+
width:100%; или width:px;
height:px;
height:1%;
overflow:hidden;
+
zoom:1;
display:table; + ( width:px; или width:100%; )
+
display:inline-block; + ( width:px; или width:100%; )
+
float:left; или float:right;
+
position:absolute;
+
Исключение: свойства возвращающие hasLayout задавать не нужно если у их
первого общего родителя уже есть необходимые свойства. Например: float:left;
Не присваивайте layout всему подряд: * { height: 1%;}. В таких количествах layout
вместо лечебного воздействия способен убить вашу верстку на корню: отображение
страницы поменяется фундаментальным образом.
3 день
CSS Float в теории и на практике
Концепция float, возможно, одна из самых не интуитивных концепций в CSS, ее
непонимание часто приводит к искажению страницы, проблемам с читабельностью и
юзабилити. Тем не менее, причина этого не в самой теории, а в том, как ее
интерпретируют разработчики браузеров.
Понятие потока
В (x)HTML вывод (отображение) элементов на странице происходит сверху вниз
согласно схеме документа. Блок, размещенный в самом верху кода, отобразится
выше блока, который расположен в коде ниже. Такая логика позволяет легко
прогнозировать результат вывода элементов и управлять им. Порядок вывода
объектов на странице и называется «потоком». При этом существует несколько
возможностей «вынуть» элемент из потока.
Принцип работы Float
Как и позиционирование, float используется для того, чтобы двигать боксы. Но в
отличие от позиционирования, которым можно двигать боксы практически
произвольно, все, что может float — это сдвинуть элемент к одной из сторон потока,
правой или левой.
При этом сам блок и следующие за ним в потоке приобретают интересное
поведение:
1.
Float'нутый блок смещается по горизонтали и прилипает к одной из сторон
родителя.
2.
Float'нутый блок перестает раздаваться на всю ширину родительского блокаконтейнера (как это происходит с блоками в потоке). С его неприжатой к родителю
свободной стороны появляется свободное место.
3.
Следующие за ним элементы подтягиваются вверх и занимают его место, как
если бы float'нутого блока в потоке не было.
4.
Строчные же элементы внутри, следующего за float'нутым, блока начинают
обтекать float'нутый блок со свободной стороны.
сама коробка блока, следующего за float'ом, подлезает под него и занимает всю
ширину потока, а вот текст внутри этого блока смещается в сторону и
обтекает float'нутый блок; именно поэтому отступ между float'нутым блоком и
текстом нужно задавать именно на float'нутом блоке.
Если вы посмотрите на саму теорию float то обнаружите, что она гораздо проще, чем
то с чем приходится иметь дело на практике. Большинство проблем связано со
старыми версиями Internet Explorer, но, зная ошибки можно более точно
контролировать вывод информации.
Давайте постараемся прийти к пониманию основных ошибок, возникающих при
использовании float.
Что нужно знать о float:
Элемент с установленным свойством float позиционируется вне основного
потока и смещается влево или вправо насколько это возможно. Содержимое
страницы обтекает такие элементы. Если элемент вынесен из основного потока, то
содержимое основного потока полностью его игнорирует и не оставляет для него
места.
●
Элементы с установленным свойством float автоматически становятся
блочными, потом этот блок смещает влево или вправо. Свойство float может
принимать значения right, left и none.
●
Во-первых, для плавающих блоков должна быть задана ширина, неважно
явным или косвенным образом, иначе он заполнит родительский блок, как и
обычные не плавающие блоки, не оставив места для обтекания остальным
контентом. Во-вторых, в отличие от элементов в основном потоке, вертикальные
границы плавающих блоков не объединяются с границами прилежащих блоков и
float'нутый блок можно вытащить за пределы родителя отрицательными margin'ами.
И последнее, плавающий блок может перекрывать элементы, смежные с ним в
нормальном потоке.
●
Нельзя создать плавающий в центре элемент. Свойства float:center нет!
Когда мы устанавливаем для элемента float, он смещается к правой или левой
границе родительского блока, если установить float в том же направлении, для еще
одного элемента он будет смещаться к границе предыдущего плавающего элемента,
когда элементам перестанет хватать ширины контейнера, они будут перемещаться
вниз(переходить на новую строку).
●
Плавающий блок позиционируется по вертикали так же, как если бы он был в
нормальном потоке, его верхняя граница, выравнивается с верхней границей
текущей строки, по горизонтали он смещается к правой или левой границе
контейнера настолько, насколько это позволяют отступы контейнера. Остальной
контент обтекает его с противоположной стороны.
●
Поскольку плавающие блоки находятся вне основного потока, блоки возле
него располагаются, как будто его нет, но строки в них становятся короче, чтобы
освободить место для плавающего блока.
●
●
Если на текущей строке плавающему блоку не хватает горизонтального
пространства, он смещается на одну строку, пока места не станет достаточно.
●
Плавающий элемент никогда не поднимается выше строки, в которой создан,
его верхняя граница выравнивается с верхней границей этой строки (или с нижней
границей предыдущего блочного элемента, если нет соответствующей строки).
● Клиринг. Элементы, следующие за плавающим элементом, будут обтекать его,
если вы не хотите этого, нужно применить к ним свойство clear. Свойство clear
может принимать четыре значения left, right, both, none.
Существуют различные техники клиринга плавающих элементов без
дополнительной разметки. Во-первых, использовать overflow:hidden для
родительского элемента. Во-вторых, генерировать контент с помощью псевдо
класса :after.
●
Распространенная проблема с разметками, основанными на плавающих
элементах, состоит в том, что родительский элемент не растягивается по вертикали,
чтобы полностью поглотить плавающие элементы, это серьезная проблема, если вы
хотите добавить бордер к такому элементу или задать для него фон. Одно из
решений этой проблемы заключается в использовании overflow.
●
С помощью псевдо класса :after можно сгенерировать пустой безымянный
блочный элемент и установить для него clear:both.
●
#main:after {
content: "";
display: block;
clear: both;
}
Баги связанные с float
Если в элементе контейнере есть ссылки после плавающего элемента,
подсвечивающиеся при наведении мышки, то можно наблюдать, как нижний отступ
контейнера вдруг прыгает (пропадает или увеличивается). Наведение мышки на
другие ссылки может все исправлять, этот интересный эффект назван IE/Win
Guillotine Bug. Эффект наблюдается только если при наведении мышки меняется
фон ссылки и многие другие свойства, такие как отступы, поля или параметры
шрифта. Странно, но если изменяется только цвет ссылки, эффект не наблюдается.
Для фикса нужно найти какой именно отступ удваивается\пропадает и либо
перенести его на другой контейнер либо заменить margin на padding.
●
IE/Win 7 добавляет правую границу в 3px всем блокам с float:left, которую
нельзя убрать, что бы вы ни делали, т. е. Если вы зададите margin справа на
float'нутый влево элемент чтобы отодвинуть обтекающий его тест, то в IE7 этот
отступ будет на 3px больше. Этот баг еще называют IE Three Pixel Text- Jog.
Единственный выход задать для этих браузеров меньший на 3px margin, используя
развилки в css.
●
Одна из распространенных задач это размещение плавающих изображений
слева и справа страницы, чтобы текст обтекал их. В таких случаях добавление clear
к изображению гарантирует, что каждое следующее будет размещаться ниже
предыдущего.
●
Если на элемент с float:left задать margin слева, то в IE его величина будет
удвоена. Есть простое решение, исправляющее множество багов в IE (и этот тоже).
Все плавающие элементы автоматически становятся блочными элементами, в
стандарте сказано, что любые значения свойства display кроме none для них
игнорируются, тем не менее, если установить для плавающих блоков display:inline,
большинство багов IE пропадают, а блоки не становятся inline.
●
При использование float и отрицательных полей для выноса элемента за
пределы родителя в IE содержимое элемента может обрезаться (несмотря на
отсутствия overflow:hidden на родителе). Чтобы исправить этот баг, нужно
использовать position:relative для всех плавающих элементов с отрицательными
границами.
●
IE7 корректно выполняет спецификации W3C в области свертывания
контейнеров содержащих плавающие элементы. Но поскольку он не поддерживает
свойство content то метод c :after для него не подходит, overflow подходящий метод
для всех версий IE.
●
Однако бывает, что float фиксит баги, так например: Если в список выполненный
столбцом в <li> вложить блочный элемент, то в IE появятся дополнительные
вертикальные отступы на <li>. Этот баг фиксится заданием float:left и width на <li>, ну
и не забываем о hasLayout для <ul>.
Реализация отступов
В контентной части, на такие элементы как <p>, <h1…h6>, <ul/li>, <dl/dt/dd> и др.
старайтесь задавать только нижний отступ. Тем самым мы добиваемся того, что при
удалении любого элемента в контенте, сохраняются отступы между элементами, и
последний элемент в блоке не будет “прилипать” к нижней границе блока
Правильно:
Не правильно:
4 день
One Level Drop Down
Простой drop down представляет собой вложенный список, внутренний уровень
которого появляется при наведении курсора на элемент <li> первого уровня, т. е. По
событию li:hover.
Порядок выполнения
1)
верстаем первый уровень меню:
<ul id="nav">
<li><a href="#">link first</a></li>
<li><a href="#">link second</a></li>
<li><a href="#">link drop</a></li>
</ul>
#nav {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
float: left;
margin: 0 10px 0 0;
}
#nav a {
display: block;
padding: 5px 15px;
color: #fff;
background: #2764ab;
}
#nav a:hover {
background: #4e90db;
}
2)
верстаем статический drop down
<ul id="nav">
<li><a href="#">link first</a></li>
<li><a href="#">link second</a></li>
<li><a href="#">link drop</a>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">long link 3</a></li>
</ul>
</li>
</ul>
#nav li {
position: relative; – Временно. Потом убрать.
}
#nav ul {
position: absolute;
z-index: 10;
top: 100%;
left: 10px;
width: 150px;
background: #ccc;
}
#nav ul li {
margin: 0;
width: 100%;
}
#nav ul a {
background: #2764ab;
}
#nav ul a:hover {
background: #4e90db;
}
3)
согласовываем ролловеры
Особенность дроп дауна заключается в том что при переходе курсора на
выпадающее меню, ссылка первого уровня должна оставаться активной. Здесь
нужно помнить что и ссылка первого уровня и дроп находятся в одном и том же <li>,
поэтому правило #nav li:hover * работает для случаев когда курсор находится как
поверх ссылки первого уровня так и поверх дропа. Этим и воспользуемся:
#nav li:hover a,
#nav a:hover {
background: #4e90db;
}
Добавив к правилу #nav a:hover соответствующие строки, теперь, при переходе на
дроп, ссылка первого уровня остается активной, но все ссылки в дропе тоже стали
активными, так как первые два селектора справедливы и для них.
Возвращаем нормальное состояние для ссылок в дропе, утяжеляя селектор
соответствующей строкой:
#nav li:hover ul a,
#nav ul a {
background: #2764ab;
}
Теперь при переходе на дроп и ссылка первого уровня остается активной, и ссылки в
дропе выглядят правильно, но не работают ролловеры в дропе, т. к. вес селектора
#nav ul a:hover меньше чем, тот что мы только что дописали. Утяжеляем:
#nav li:hover ul a:hover,
#nav ul a:hover {
background: #4e90db;
}
4)
добавляем анимацию
Убираем временно установленный relative на <li>, и добавляем его динамически по
событию li:hover; добавляем свойство display:none на дроп, чтобы скрыть его по
умолчанию, и свойство, отвечающее за появление дропа.
#nav li:hover {
position: relative;
}
#nav li:hover ul {
display: block;
}
В итоге, должны получить следующее:
<ul id="nav">
<li><a href="#">link first</a></li>
<li><a href="#">link second</a></li>
<li><a href="#">link drop</a>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">long link 3</a></li>
</ul>
</li>
</ul>
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
float: left;
margin: 0 10px 0 0;
}
#nav a {
display: block;
margin: 0 10px;
padding: 5px 15px;
color: #fff;
background: #2764ab;
}
#nav li:hover a,
#nav a:hover {
background: #4e90db;
}
#nav li:hover {
position: relative;
}
#nav li:hover ul {
display: block;
}
#nav ul {
display: none; - Скрываем по умолчанию.
position: absolute;
z-index: 100;
top: 100%;
left: 10px;
width: 150px;
background: #ccc;
}
#nav ul li {
margin: 0;
width: 100%;
}
#nav li:hover ul a,
#nav ul a {
background: #2764ab;
}
#nav li:hover ul a:hover,
#nav ul a:hover {
background: #4e90db;
}
Реализации формы.
Любая форма начинается с:
<form action="#" class="name-form">
<fieldset>
...
</fieldset>
</form>
Обратите внимание на тег <fieldset>, он может служить как оберткой всего
содержимого формы, так и для разделения формы на логические части.
Форма должна иметь класс (рекомендуется шаблон из логичного имени и суффикса
-form, например: login-form, email-form, newsletter-form, search-form), и обращение в
css к самой форме и к ее элементам должно происходить через этот класс, опуская
сам тег:
.search-form {
width: 300px;
}
.search-form label {
float: left;
width: 86px;
text-align: right;
}
Самый простой способ организации содержимого формы — построчный, даже если
форма состоит из нескольких колонок, то сначала реализуются колонки, а в них уже
построчная структура. Для строки зарезервирован класс .row :
<form action="#" class="search-form">
<fieldset>
<div class=”col1”>
<div class=”row”>
<label></label>
<input type="text" />
</div>
<div class=”row”>
<label></label>
<input type="text" />
</div>
</div>
<div class=”col2”>
<div class=”row”>
<label></label>
<input type="text" />
</div>
<div class=”row”>
<label></label>
<input type="text" />
</div>
</div>
</fieldset>
</form>
Рассмотрим, самый распространенный случай:
как видим, здесь четкая построчная структура, label слева — элемент формы справа.
Поэтому каждую строку заворачиваем в row, “межстрочный” отступ реализуем
margin'ом снизу на row. Label float'аем влево, ставим ему ширину, - что обеспечит
одинаковый отступ слева для всех input'ов. Инпуты тоже float'аем влево и “полируем“
под дизайн. Не забываем о hasLayout на row. Обратите внимание,”Gender” в нашем
примере – не Label, а скорее подсказка какое имя присвоить атрибуту name для
radiobutton'ов, такие элементы можно выполнять как span class=”label”.
Все необходимые для кросбраузерной реализации формы теги, их атрибуты,
необходимые обнуления и свойства, а так же правила селекторов css (внутренние
стандарты) вы найдете в документе forms doc.pdf
Связки label - input
В каждом проекте, при наличии элемента формы и соответствующего ему label,
необходимо их связывать по средством атрибута ”for” на label и эквивалентного id на
элементе формы:
<div class="row">
<label for="name-field">Name:</label>
<input id="name-field" type="text" />
</div>
<div class="row">
<label for="email-field">Email address:</label>
<input id="email-field" type="text" />
</div>
<div class="row">
<label for="send-field">Send me news</label>
<input id="send-field" type="checkbox" class="check" />
</div>
Для имен for/id рекомендуется шаблон из главного слова в label и суффикса -field
или -input, например: password-field, female-input, email-field и т. д.
Особенности верстки:
Ряд chekbox'ов или radiobutton'ов, удобно организовывать списком с классом
radio-list или check-list. Помним что эти элементы строчные по умолчанию и
реагируют на vertical-align:top|bottom|midle. Для chekbox'ов или radiobutton'ов по
умолчанию определены padding'и и margin'ы;
1)
2)
В списке radiobutton'ов между которыми должно происходить переключение,
все инпуты должны иметь одинаковое значение атрибута name;
3)
Select является не кросбраузерным по высоте, и решить эту проблему можно
только кастомными формами. Высоту, падинги, бордеры и фон на селект задавать
нельзя;
4)
кнопки форм не имеющие текстового содержания, удобно выполнять input
type=”image”, и не забываем про альтернативный текст;
5)
input=”submit” без указания ширины в IE имеет необнуляемые padding'и, этот
баг фикситься свойством overflow:visible. Если фон сабмита уже содержит надпись,
то текст из сабмита можно убрать парой свойств: text-indent:-9999px;(FF) и font-size|
line-height:0;(IE)
6)
на input=”text | password” задавать высоту нельзя! Если фон для этих элементов
не реализуем бордерами и цветом фона, нужно завернуть элемент в див и повесить
фон на него — вешать фоновую картинку на сам input нельзя, по причине багов в
IE7.
5 день
Реализация блоков
Фиксированный по ширине GIF-блок
<div class="box">
<div class="holder">
<div class="frame">
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
</div>
.box {
width: 300px;
background: url(../images/bg-box.gif) repeat-y;
}
.box .holder {
background: url(../images/bg-t.gif) no-repeat;
}
.box .frame {
overflow: hidden;
padding: 10px 20px;
height: 1%;
background: url(../images/bg-b.gif) no-repeat 0 100%;
}
Фиксированный по ширине PNG-блок с градиентом
Вариант 1
<div class="box">
<div class="holder">
<div class="frame">
<div class=”box-content”>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
</div>
</div>
.box {
padding: 20px 0 0;
width: 300px;
background:url(../images/bg-t.png) no-repeat;
}
.box .holder {
background: url(../images/bg-b.png) no-repeat 0 100%;
padding: 0 0 20px;
}
.box .frame {
background: url(../images/bg-c.png) repeat-y;
padding: 0 1px;
}
.box .box-content {
padding: 10px;
background: url(../images/bg-gradient.png) repeat-x;
}
Подробная пошаговая инструкция прилагается — см. файлы index.html в папках gif-box и
png-box.
Абсолютное и относительное позиционирование
Position:absolute
position:absolute – используеться для позиционирование элементов относительно
окна браузера или родителя со свойствами absolute или relative
1)
блоки с абсолютным позиционированием вынимаются из потока, поэтому
следующие за ними блоки на них уже не ориентируются.
2)
для указания позиции используют свойства top left right bottom (!не margin!),
указывают их парами для определения позиции по x и y. Нельзя указывать
одновременно 2 противоположных значения (left и right). Значения позиции могут
быть отрицательными.
3) по умолчанию точкой отсчета является body, или ближайший родитель со
свойством position:relative; (для правильного позиционирования в IE у этого родителя
должен быть задан какой-то размер)
4) position:absolute придает элементу блочность и hasLayout.
Position:relative
Position:relative — используется для для смещения объектов относительно их
нормального положения в потоке.
1) position:relative - не вынимает объекты из потока.
2) для указания позиции также используют свойства top left right bottom.
3) не смотря на указанное смещение, браузеры будут резервировать место под
объект так будто он никуда и не двигался.
Пример:
вы знаете теги <sup> и <sub> -- к сожалению их позиционирование не
кросбраузерно, можно сделать так
sup {
position: relative;
top: -5px;
line-height: 14px;
font-size: 10px;
vertical-align: baseline;
}
--> смещаем на нужную высоту
--> выравниваем кроссбраузерно
или вообще заменить на span.sup. Тогда и размеры шрифта будут кроссбраузерны.
так же свойства позиционирования используются:
–
relative и absolute — для использования свойства z-index, которое без них не
работает;
–
relative совместно с overflow: hidden — для обрезания выступающих элементов
со свойствами position: relative;
2 этап
6 день
SEO Semantic Coding
Для правильной реализации требования "SEO Semantic Coding" необходимо:
1.
реализовать макет страницы таким образом, чтобы блок (колонка) с основным
контентом страницы был как можно "выше" в HTML;
2.
использовать заголовки h1-h6 в правильном порядке и там где это нужно;
3.
использовать теги по их логическому назначению;
4.
реализовать верстку таким образом, чтобы вложенность блоков была
минимальна.
1. Реализация макета страницы.
а) Header после основного контента.
В случае если header перегружен выпадающими меню, флешем или формами,
клиент может заказать размещение header'a в html после основного контента. Но при
этом header должен быть выше блока footer. Если в hеader присутствует h1.logo, то
логотип нужно вынести из header`а, чтобы он не оказался внизу страницы. Также
очень важно не забывать использовать ссылки "skip to navigation" и "back to top", для
доступа к навигации и возвращению в начало страницы, при отключенном CSS.
<div id="wrapper">
<a class="hidden" href="#nav">Skip to navigation</a>
...
<ul id="nav">
<li><a href="#"></a></li>
</ul>
...
<a class="hidden" href="#wrapper">Back to top</a>
</div>
a.hidden {
position: absolute;
top: 0;
left: -9999px;
}
Вместо класса .hidden можно использовать другой, например - accessibility. Чаще
всего, для перемещения header`a вниз используется абсолютное
позиционирование, реже - свойство display:table. Если header содержит всего лишь
несколько элементов навигации и логотип, перемещать header вниз не стоит.
b) Сначала #content потом все остальное.
Блок #content в html должен быть расположен раньше блоков #sidebar и .aside. Как
это будет реализовано, зависит от дизайна, внутренних стандартов и требований
клиента. Это может быть float:left + float:right или отступы слева/справа на #content +
соседние блоки возвращаются на свои места отрицательными отступами или другим
способом.
2. Заголовки h1-h6.
Используйте h1-h6 только для выделения заголовков или в зависимости от
требований клиента. Не используйте h1-h6 для выделения даты создания поста,
RSS ссылок и т.д. В тегах h1-h6 должен быть только текст заголовка. Заголовок h1
может быть только один на страницу. Если в дизайне страницы невозможно
выделить главный заголовок, то h1 делаем логотип, но на других страницах
необязательно логотип останется h1 (часто такое встречается в блогах).
Обязательно, с помощью плагина Web Developer (Information=>View Document
Outline) проверяем правильность расстановки заголовков. Необходимо
реализовывать расстановку заголовков так, чтобы при удалении какого-либо блока
она не нарушалась.
Footer at bottom
Fixed Footer Height
<div id="wrapper">
<div id="main">
<p>Content text</p>
<p>Content text</p>
</div>
</div>
<div id="footer">footer</div>
html, body {
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
}
#main {
padding-bottom: 50px; /* footer height */
background-color: #ccc;
}
#footer {
position: relative;
margin-top: -50px; /* footer height */
width: 100%;
height: 50px;
background-color: #f00;
}
Flexible Footer Height
<div id="wrapper">
<div class="w1">
<div class="w2">
<p>Lorem ipsum dolor sit amet, consectep</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consec</p>
</div>
</div>
<div id="footer">
<div class="footer-holder">
<div class="footer-frame">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
</div>
</div>
html, body {height: 100%;}
#wrapper {
display: table;
margin: 0 auto;
width: 800px;
height: 100%;
}
.w1 {
display: table-row;
width: 100%;
}
#footer {
display: table-footer-group;
overflow: hidden;
width: 100%;
}
#footer .footer-holder {
display: table-row;
height: 1%;
}
#footer .footer-frame {display: table-cell;}
Для IE7 подключаем ie.css
.w1 {min-height: 100%;}
.w1 .w2 {
padding-bottom: expression(document.getElementById("footer").offsetHeight + "px");
}
#footer {
position: relative;
margin-top: expression(- this.offsetHeight + "px");
}
Resizable Fonts/Text Resize
В IE, при изменении состояния пункта меню "Вид – Размер шрифта" или вращении
колеса мыши с зажатым Ctrl (и в других браузерах), наблюдается изменение
размера текста.
Под изменяемым размером шрифта понимается указание относительного значения
в параметре font-size. Относительными единицами измерения являются % и em. При
этом, по сути, 1em = 100%. При принятии решения в каких именно единицах
измерения делать верстку надо учитывать, что при указании в em разница между
размерами при разных состояниях пункта меню будет больше, чем при
использовании %. По-умолчанию в IE font-size имеет значение middle, что
соответствует 16px.
Прежде чем начать, нужно привести размеры шрифтов к общему знаменателю,
желательно использовать такой вариант:
* {font-size: 100.01%;}
html {font-size: 62.5%;}
Важно! Значение 100.01% для * [все элементы] указывается для решения проблемы
неверного вычисления размера шрифта в Opera и исправления бага в IE.
Теперь 1em = 100% = 10px;
body {font: 1.2em/1.5em Arial, Helvetica, sans-serif;}
Для body указывается преобладающий размер шрифта на странице. Обычно это
размер параграфа в #content'е (в данном примере это 1.2em — 12px).
Важно! Следует помнить, что при использовании относительных величин
свойство line-height вычисляется от величины font-size этого же блока. Т.е. при
font:12px/1.5em или font:12px/150% line-height будет равняться 18px. A font-size
вычисляется от величины font-size родителя.
Далее можно указывать размеры шрифтов, вычисляя делением указанных в
дизайне на 12(базовый – указан на body). Также теперь можно использовать em (но
только em) для указания линейных размеров блоков, при изменении размера
шрифта размер сайта будет меняться – эта технология называется em-based layout.
Text replacement
Часто встречаются дизайны, в которых заголовки или другие текстовые части
дизайна сделаны «нестандартным» шрифтом или с эффектами, и нужно, чтобы они
так отображались всегда. В таких случаях используем способ замены текста
картинкой (оставить его в коде для поисковиков и других юзер агентов).
Заменяем такой код на картинку:
<h1 class="text-welcome">Welcome</h1>
.text-welcome {
overflow: hidden;
width: 200px;
height: 80px;
text-indent: -99999px;
background: url(”text-welcome.gif”) no-repeat;
}
Это наиболее часто применяемый способ, хотя при отключенных картинках мы не
увидим ничего.
7 день.
Breadcrumbs
Разделители реализованы с помощью свойства background, у первого элемента
разделитель "выносится" отрицательным отступом за пределы <ul>.
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Inner</a></li>
<li>Costa Rica</li>
</ul>
.breadcrumbs {
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
width: 100%; (или height: 1%;)
color: #333;
}
.breadcrumbs li {
float: left;
margin: 0 0 0 -8px;
padding: 0 10px 0 8px;
background: url(../images/bg-breadcrumbs.gif) no-repeat;
}
.breadcrumbs a {
color: #999;
}
Paging
Представлен самый общий вариант реализации.
<ul class="paging">
<li class="first"><a href="#">first</a></li>
<li class="prev"><a href="#">prev</a></li>
<li><a href="#">1</a></li>
<li>2</li>
<li><a href="#">3</a></li>
<li><span>...</span></li>
<li><a href="#">10</a></li>
<li class="next"><a href="#">next</a></li>
<li class="last"><a href="#">last</a></li>
</ul>
.paging {
margin: 0;
padding: 0;
list-style: none;
color: #000;
}
.paging li {
display: inline;
margin: 0 2px;
font-weight: bold;
}
.paging li a {
color: #00d;
font-weight: normal;
}
.paging .prev,
.paging .next {margin: 0 4px;}
.paging .prev a {
padding: 0 0 1px 10px;
color: #d00;
background: url(../images/bg-prev.gif) no-repeat;
}
.paging .next a {
padding: 0 10px 1px 0;
color: #d00;
background: url(../images/bg-next.gif) no-repeat 100%;
}
.paging .first {margin: 0 5px 0 0;}
.paging .last {margin: 0 0 0 5px;}
.paging span {
margin: 0 5px;
font-weight: normal;
}
Tag Clouds
Для реализации облака тегов используем такую структуру:
<div class="htagcloud">
<ul class="popularity">
<li class="vvvv-popular"><a href="#">Web</a></li>
<li class="vvv-popular"><a href="#">accessibility</a></li>
<li class="popular"><a href="#">beta tester</a></li>
<li class="vvv-popular"><a href="#">css</a></li>
<li class="v-popular"><a href="#">ex-coder</a></li>
<li class="vv-popular"><a href="#">usability</a></li>
<li class="vvvv-popular"><a href="#">wsg</a></li>
</ul>
</div>
Такой вариант идентичен тому, который сейчас используется для микроформатов. Но,
для большинства популярных CMS более корректным будет такой вариант:
<ul class="tagcloud">
<li><a style="font-size:30px" href="#">accessibility</a></li>
<li><a style="font-size:20px" href="#">css</a></li>
<li><a style="font-size:10px" href="#">wsg</a></li>
<li><a style="font-size:15px" href="#">usability</a></li>
</ul>
Calendar
Вариант 1
Реализация на таблицах.
<div class="calendar">
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<th>sun</th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="date">1</td>
</tr>
<tr>
</tr>
<tr>
<td class="date">2</td>
<td class="date">3</td>
<td class="today">4</td>
<td class="date">5</td>
<td class="date">6</td>
<td class="event"><a href="#">7</a></td>
<td class="date">8</td>
...
</tr>
<tr>
</tr>
<td class="date">30</td>
<td class="date">31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tbody>
</table>
</div>
.calendar {
width: 300px;
}
.calendar table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
.calendar table td {
padding: 0;
}
.calendar td,
.calendar th {
border: 1px solid #000;
line-height: 36px;
text-align: center;
}
.calendar td.date {
background: #0cf;
}
.calendar td.today {
color: #fff;
font-weight: bold;
background: #906;
}
.calendar td.event {
background: #996;
}
.calendar td.event a {
display: block;
height: 100%;
color: #000;
}
Вариант 2
Реализация списком.
<ul class="calendar">
<li class="head">sun</li>
<li class="head">mon</li>
<li class="head">tue</li>
<li class="head">wed</li>
<li class="head">thu</li>
<li class="head">fri</li>
<li class="head">sat</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="today">1</li>
<li class="event"><a href="#">2</a></li>
<li class="date">3</li>
...
<li class="date">30</li>
<li class="date">31</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
.calendar {
overflow: hidden;
margin: 0;
border: solid #000;
border-width: 0 0 1px 1px;
padding: 0;
width: 302px;
list-style: none;
}
.calendar li {
float: left;
border: solid #000;
border-width: 1px 1px 0 0;
width: 42px;
height: 36px;
line-height: 36px;
text-align: center;
}
.calendar li.head {
font-weight: bold;
}
.calendar li.date {
background: #0cf;
}
.calendar li.today {
font-weight: bold;
color: #fff;
background: #906;
}
.calendar li.event {
background: #996;
}
.calendar li.event a {
display: block;
height: 100%;
color: #QQQ;
}
8 день.
Custom forms
Для работы скрипта необходимы два файла form.js и form.css.
<link media="all"type="text/css" rel="stylesheet" href="css/form.css" />
<script type="text/javascript" src="js/form.js"></script>
Единственный параметр который нужно указывать в JS это:
var_selectHeight = 23;
Он указывает высоту селекта (т.е. отступ выпадающей части селекта от основной).
Все остальные свойства отображения устанавливаются через CSS.
Несколько важных фактов
По умолчанию "кастомайзятся" такие элементы форм, как select, radio button,
checkbox. В form.js вызов функций для "кастомайза" выглядит так:
●
replaceRadios();
replaceCheckboxes();
replaceSelects();
Если от вас требуется сделать кастомными, например, только radio кнопки, то в js
необходимо закомментировать функции replaceCheckboxes() и replaceSelects().
replaceRadios();
//replaceCheckboxes();
//replaceSelects();
Аналогично в других случаях.
Если присвоить селекту какой-либо класс, то он перейдет и на кастомный
select. На выпадающую часть к имени класса (но только к первому классу) добавится
префикс "drop-".
●
html без js:
<select class="aaa bbb">
<option>Lorem 1</option>
<option>Lorem 2</option>
<option>Lorem 3</option>
</select>
html после срабатывания js:
<div class="selectArea aaa bbb" id="sarea0" style="width: 200px;">
<span class="left"/>
<span class="disabled" style="display: none;"/>
<span id="mySelectText0" class="center">Lorem 1</span>
<a href="javascript:showOptions(0,false)" class="selectButton"/>
</div>
<div style="width: 200px;" class="optionsDivInvisible drop-aaa bbb outtaHere"
id="optionsDiv0">
<div class="select-top">
<div class="select-top-left"/>
<div class="select-top-right"/>
</div>
<ul>
<li><a href="javascript:showOptions(0); selectMe('',0,0);">Lorem 1</a></li>
<li><a href="javascript:showOptions(0); selectMe('',1,0);">Lorem 2</a></li>
<li><a href="javascript:showOptions(0); selectMe('',2,0);">Lorem 3</a></li>
</ul>
<div class="select-bottom">
<div class="select-bottom-left"/>
<div class="select-bottom-right"/>
</div>
</div>
Т.е. класс "aaa" преобразовался в "drop-aaa", а класс "bbb" остался без изменений.
Если у вас на странице несколько типов селектов, которые имеют разные высоты,
то на расстояние от селекта к выпадающему блоку (параметр var _selectHeight = 23;)
можно повлиять через margin на класс (см. предыдущий пример) ".drop-aaa".
Для того чтобы вставить картинку в кастомный select, необходимо прописать к ней
путь через аттрибут title у option:
<select>
<option title="images/drop-img1.gif">Lorem img 1</option>
<option title="images/drop-img2.gif">Lorem img 2</option>
</select>
Для того, чтобы селект кликался полностью, необходимо на .selectArea a.selectButton
задать ширину 100% и картинку выровнять по правому краю 100% 0
ВАЖНО: на id, вроде sarea0 и optionsDiv0 стили вешать нельзя.
9-10 день
Tabs
Это самые обычные табы без каких-либо эффектов. А также табы в табах.
<ul class="tabset">
<li><a href="#tab-1" class="tab active">tab 1</a></li>
<li><a href="#tab-2" class="tab">tab 2</a></li>
<li><a href="#tab-3" class="tab">tab 3</a></li>
</ul>
<div class="tab-content" id="tab-1">
tab-1
</div>
<div class="tab-content" id="tab-2">
tab-2
</div>
<div class="tab-content" id="tab-3">
tab-3
<ul class="tabset">
<li><a href="#tab-4" class="tab active">tab 4</a></li>
<li><a href="#tab-5" class="tab">tab 5</a></li>
</ul>
<div class="tab-content" id="tab-4">
tab-4
</div>
<div class="tab-content" id="tab-5">
tab-5
</div>
</div>
CSS для функционирования табов не нужен. Требуется лишь специальный
Javascript.
Vertical Alignment Elements
Вариант 1
<div class="box">
<div class="holder">
<span class="object">11111</span>
</div>
</div>
div.box {
display: table;
width: 300px;
height: 300px;
background: #eee;
}
*+html div.box {
position: relative;
}
div.holder {
display: table-cell;
width: 100%;
vertical-align: middle;
text-align: center;
}
*+html div.holder {
position: absolute;
top: 50%;
}
span.object {
background: #0F0;
}
*+html span.object {
position: relative;
top: -50%;
}
Вариант 2
<ul>
<li>
<img src="images/img2.jpg" alt="image" />
<div class="holder">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat</p>
</div>
</li>
</ul>
.col ul {
overflow: hidden;
margin: 0;
padding: 0;
height: 1%;
list-style: none;
}
.col ul li {
display: table;
width: 100%;
margin: 0 0 15px;
}
.col ul li img {
float: left;
margin: 0 10px 0 0;
}
.col ul .holder {
display: table-cell;
vertical-align: bottom;
width: 100%;
}
.col .list-center .holder {
vertical-align: middle;
}
ie.css
.col ul .holder {
margin-top: expression(this.parentNode.offsetHeight > this.offsetHeight ?
(this.parentNode.offsetHeight-this.offsetHeight + "px") : "0");
width: auto;
height: 1%;
}
.col .list-center .holder {margin-top: expression(this.parentNode.offsetHeight >
this.offsetHeight ? ((this.parentNode.offsetHeight-this.offsetHeight)/2 + "px") : "0");}
3 этап
11-20 день
Практика
