Блочная вёрстка - 7

Продолжаем верстать страничку.
  В блоке текста мы разместим список новых участников. Вообще за это  отвечает какой-нибудь php-скрипт, но так как мы делаем простую статичную страницу, то оформим эту штуку обычным списком. Только на этот раз не  маркированным, а нумерованным. Задаётся такой список тэгом ol.

Откроем в текстовом редакторе нашу страничку и сразу после вот этого места:

……………..
  <img class="venzel" src="venzel.gif" alt="" />
  <img class="img2" src="pig2.jpg" alt="Пиггсы на проводе" />

вставим следующий кусок:

<div id="members">
  <h2>Список новых учаснегов:</h2>
  <ol>
  <li><a href="#">Рыжий</a></li>
  <li><a href="#">Брат Корнелий</a></li>
  <li><a href="#">Муха</a></li>
  <li><a href="#">Пигфлай</a></li>
  <li><a href="#">Нигга Боб</a></li>
  <li><a href="#">Помидорка</a></li>
  </ol>
  <ol>
  <li><a href="#">Косолапыч</a></li>
  <l><a href="#">Тушка</a></li>
  <li><a href="#">Свин Полезный</a></li>
  <li><a href="#">Сало</a></li>
  <li><a href="#">Кнопка</a></li>
  <li><a href="#">Васёк</a></li>
  </ol>
  </div>
  <img class="line" src="line.gif" alt="" />

Что мы тут видим? Появился новый атрибут members. Так мы обозвали наш список. Тэг h2 — это заголовок второго уровня. Первый уровень, как леххко догадаться, это чаще всего название сайта или страницы.

Далее у нас идут подряд аж целых два нумерованных списка. Зачем два?  На макете мы разместили новых участников в две колонки с вертикальной  нумерацией в каждой. Можно было бы, конечно, занести всех в один общий  список, сделать ширину одной ячейки ровно вполовину отведённого под  список места, и тогда ячейки автоматом переносились бы на новую  строчку. Но тогда нумерация выглядела бы так:

1 2
  3 4
  5 6

и так далее. Согласитесь - коряво как-то.
  Поэтому мы не стали мудрить, а сделали просто два списка подряд. Но!  Каждому в листе стилей задали обтекание слева. Об этом чуть позднее.  Сразу после списков мы положили картинку волнистой линии.

Ну, а теперь откроем наш лист стилей и запишем ещё кусочек красивых правил.

#members {
  width: 300px;
  height: 190px;
  float: right;
  }

#members h2 {
  color: #f60;
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  }

#members ol {
  color: #999;
  font-size: 120%;
  margin: 10px;
  float: left;
  }

#members li {
  margin: 0 5px;
  }

#members li a {
  color: #0c0;
  }

#members li a:hover {
  color: #f00;
  }

.line {
  width: 304px;
  height: 13px;
  float: right;
  }

Расшифруем. Для начала мы задали всему блоку размер. Причём на этот  раз не только ширину, но и высоту. Для чего это нужно? Если, например,  в нашем списке было бы чуток меньше народу, то картинка волнистой линии  "поджимала” бы список снизу, а нам надо, чтобы она была почти под срез  картинки с летящим поросенком слева. Поэтому мы задали жёсткий размер  как по ширине, так и по высоте. И обтекание справа. Ну, это уже понятно  — список должен быть правее указанного рисунка.

Далее задали правило для заголовка второго уровня. Здесь нам уже всё знакомо.
  Для самого нумерованного списка с тэгом ol мы указали обтекание слева. То есть оба наших списка (помним, что в  коде страницы их два подряд) будут идти не в столбик, а один подле  другого рядышком оба-два.

Все имена в списке оформлены в виде ссылок (типо на странички  профиля участников). Для них мы задали только цвета, без всяких  подчёркиваний. Но почему-то на страничке они всё равно подчёркиваются  при наведении мышки, да ещё точечной линией! Вот тут как раз и сработал  так называемый каскад — список-то лежит в зоне действия атрибута text и поэтому просто перенял от него часть правил.

Последнее правило здесь для рисунка линии. Оно также, как и предыдущие картинки, оформлено классом.
  Сохранились. А теперь смотрим, что получилось.

В следующий раз прицепим к нашему сайту блок новостей и симпатишный подвальчик - он же footer.

Автор: Игорь Квентор

По материалам сайта: http://www.websovet.com/