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

Posted on Декабрь 4, 2007
Filed Under table of contents, definition lists, css, html |

В последнее время видел в сети несколько вариантов вёрстки подобных макетов и решил представить свой вариант.

Html разметка

Для html разметки используем definition lists:

<dl class="table-of-content">
<dt><span>Закладка фундамента</span></dt>
<dd>21</dd>
<dt><span>Модель визуального форматирования</span></dt>
<dd>42</dd>
<dt><span>Фоновые изображения и замена изображений</span></dt>
<dd>65</dd>
<dt><span>Стилизация гипер ссылок</span></dt>
<dd>91</dd>
<dt><span>Стилизация списков и создание панелей навигации</span></dt>
<dd>107</dd>
<dt><span>Стилизация форм и табличных данных</span></dt>
<dd>131</dd>
<dt><span>Верстка страницы</span></dt>
<dd>151</dd>
<dt><span>Трюки и фильтры</span></dt>
<dd>173</dd>
<dt><span>Поиск и устранение ошибок</span></dt>
<dd>187</dd>
</dl>

Оглавление взято из “Мастерская CSS. Профессиональное применение Web-стандартов“, первой книги, которая попалась под руку. :)

Для чего нужен этот <span> внутри <dt>? Далее это станет ясно.

CSS

Теперь начнём писать стили:

* {
margin:0;
padding:0;
line-height:1em;
}
.table-of-content{
border:1px solid #9b9b9b;
padding:1em;
margin:1em;
}
.table-of-content dt{
font-weight:bold;
clear:both;
}
.table-of-content dd{
float:right;
position:relative;
top:-1.286em;
margin-bottom:-1em;
}


<dd> мы сдвигаем вправо и поднимаем на высоту одной строки вверх. результат.

Следующим шагом мы создаем вертикальные линии используя background-image + изображение . Чтобы перекрыть эти линии используем background-color для <span> (только для этого мы его и ввели) и <dd>. В результате таблица стилей выглядит так:

* {
margin:0;
padding:0;
line-height:1em;
}
.table-of-content{
border:1px solid #9b9b9b;
padding:1em;
margin:1em;
}
.table-of-content dt{
font-weight:bold;
clear:both;
padding-right:8em;
background: url(dotted.gif) repeat-x left bottom;
margin-bottom:.4em;
}
.table-of-content dt span{
background-color:#ffffff;
padding-right:.4em;
position:relative;
top:.1em;
}
.table-of-content dd{
position:relative;
top:-1.286em;
margin-bottom:-1em;
float:right;
background-color:#ffffff;
padding-left:.4em;
}

Конечный результат.

Comments

• Облако категорий

  table of contents table safari rounded corners quirks mode png24 php & mysql opera multiple backgrounds menu media types javascript image replacement ie7 ie6 ie5.5 ie5 ie html generated content form flash expression equal height doctype definition lists css3 css columns caption bug browsers border-radius :before шпаргалки сonditional сomments книги жизнь Интересно

• Последние записи

  • Скругленные углы используя CSS3 (multiple backgrounds и border-radius).
  • Верстаем оглавление из книги.
  • CSS media types или различные стили для различных медиа носителей
  • Колонки одинаковой высоты.
  • Что происходит в браузерах при Quirks Mode
  • Как создать стили только для IE
  • Генерирование заголовков для таблицы

• Читаю

  • Design For Masters
  • DesignLife.ru
  • Re.Актив
  • RMCreative
  • Sribna
  • Vurtseed
  • webDev
  • Свобода слова вебмастерского

• из RSS читалки

• Поиск

• Счетчики

  • 
  • 
  • 
  • 

• На правах рекламы: