Верстаем оглавление из книги.

В последнее время видел в сети несколько вариантов вёрстки подобных макетов и решил представить свой вариант.
Html разметка
Для html разметки используем definition lists:
<dl class=”table-of-content”>
<dt><span>Закладка фундамента</span></dt>
<dd>21</dd>
<dt><span>Модель визуального форматирования</span></dt>
<dd>42</dd>
[…]

Что происходит в браузерах при Quirks Mode

Quirks Mode - это режим работы таких браузеров, как Internet Explorer (IE), Firefox и Opera. В принципе, Quirks Mode (также называемый режимом совместимости) означает, что относительно современный браузер преднамеренно имитирует многие ошибки в старых браузерах, в частности IE 4 и IE 5.
Цель Quirks Mode состоит в том, чтобы старые […]

Как создать стили только для IE

Всем известно что браузеры IE некоректно работают с CSS. Мало того, у них у всех разные ошибки, ошибки которые сть в одной версии, отсутствуют в другой. Для создание стилей IE есть несколько методов: условные комментарии (Conditional Comments) и css хаки. Лично я отдаю предпочтение условным комментария.
Различные таблици стилей, для различных версий […]

Генерирование заголовков для таблицы

Исходный HTML код таблицы:<table summary=”Значение атрибута summary” title=”Значение атрибута title”>
<tr>
<td>Пример </td>
<td>Таблицы</td>
</tr>
</table>
CSS:table[summary]:after {
content: “Таблица ” counter(table) “: ” attr(summary);
counter-increment: table;
display: table-caption;
caption-side: bottom;
font-size: 10px;
font-style: italic;
white-space: nowrap;
margin-top: 5px;
margin-bottom: 20px;
}
table[title]:before {
display: table-caption;
caption-side: top;
content: attr(title);
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}
Правило content: “Таблица ” counter(table) “: ” attr(summary); выводит номер таблицы и содержание атрибута summary. Правило counter-increment: table; инициализирует счётчик, который […]

Генерируем нумерацию заголовков используя CSS

Этот способ работает только в адекватных браузерах, которые понимают как минимум :before и поддерживают генерацию контента средствами CSS
Итак, имеем следующий HTML:<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h2>Заголовок</h2>
<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h2>Заголовок</h2>

Начнем работать над стилями. Первое,что сделаем, объявим счётчики для заголовков:h1 {
counter-increment: h1;
}
h2{
counter-increment: h2
}

Счётчики объявлены, теперь их надо как то выводить на страницу:h1:before {
content: counter(h1) “. ”
}
h2:before {
content: counter(h1) “.” counter(h2) ” “;
}
Для заголовка первого уровня […]

Создание меню с помощью CSS

Создаем меню
исходный HTML:<ul class=”menu”>
<li><a class=”home” href=”#”></a></li>
<li><a class=”blog” href=”#”></a></li>
<li><a class=”autor” href=”#”></a></li>
</ul>
Изображения кнопок в двух состояних:

Для того,чтобы избежать моргания изображений, связаное с загрузкой изображения, обьеденим два состояния кнопки в один файл:

Преврашаем наши ссылки в кнопки:*{
margin:0;
padding:0;
}
.menu{
list-type-style:none;
}
.menu li,.menu a{
width:114px;
height:36px
}
.menu a{
display:block;
background-repeat:no-repeat;
background-position: 0 0;
}
.menu a:hover{
background-position:0 -36px;
}
.menu .home{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-home.gif);
}
.menu .blog{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-blog.gif);
}
.menu .autor{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-avtor.gif);
}
пример

Подключение таблиц стилей для браузеров IE, Opera, Safari

Иногда бывает необходимо для достижения кроссбраузерности определить разные стили элемента для различных браузеров. Можно пойти в сторону использования css хаков, но я хочу описать альтернативній вариант, как мне кажется более правильный.
Итак, для IE используем всем знакомые сonditional сomments <!–[if IE ]>
<link rel=”stylesheet” type=”text/css” href=”style/ie.css” />
<![endif]–>
Для Opera <script type=”text/javascript”>
<!–
if(window.opera) {document.write(’<link rel=”stylesheet” type=”text/css” href=”style/opera.css” />’);}
//–>
</script>
Для Safari […]

Изменение внешнего вида checkbox & radio button

Бывают случаи когда необходимо изменить внешний вид элементов формы checkbox & radio button. Недавно нашел решение с использованием javascript.
Сначала качаем скрипты, для коректной работы необходимы screensmall.css, mootools.js и moocheck.js. Из файла стилей, при более близком расмотрении, нам необходимо всего несколько строчек:
.checked{background-color:#222;background-image:url(chk_on.png)}
.unchecked{background-color:#1c1c1c;background-image:url(chk_off.png)}
.selected{background-color:#222;background-image:url(rdo_on.png)}
.unselected{background-color:#1c1c1c;background-image:url(rdo_off.png)}
Следущий шаг это изображения, на которые мы собственно и будем заменять checkbox & […]

Острый угол

Сегодня долго изучал Zig-zag menu. Волновал меня вопрос как сделаны острые углы в элементах меню.
Долго я мучал firebug в поиске куда же они впихнули бекграунды?!?
Каково же было мое удивление когда я наконец то нашел в чем зарыта собака!

border-right:25px solid #66AADD;
border-top:25px dashed transparent;

все гениальное просто))

Микроформаты

http://microformats.org/ - оффициальный сайт о микроформатах.

The Big Picture on Microformats, статья переведенная на русский язык. Очень интересная, советую с нее начать знакомство с микроформатами. Также стоит прочесть еше одну статью о микроформатах. Дальше уже в помощ гугл.)

На этом блоге и на сайте компании в которой я работаю уже использовал микроформат hCard. Можно воспользоваться hCard Creator, […]

keep looking »