Блочная верстка | Урок 7

Дата: 17.12.2007 | Автор: Игорь Квентор | Рубрика: Верстка |

Тэги: , , ,

xhtml.jpg
Продолжаем верстать страничку.
В блоке текста мы разместим список новых участников. Вообще за это отвечает какой-нибудь 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.

Enjoy!

Вебсовет

1 2 3 4 5 6 7 8 9

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Комментарии (6) на запись “Блочная верстка | Урок 7”

  1. Lenn 30.05.2008 11:48

    Не работает тут что-т. Уже перепробовала несколько вариантов, не могу понять почему -
    список у меня получается не в 2 столбца рядом. Первый столбец подскакивает к картинке , а второй столбец помещается под ней. еще и без нумерации. ((((

    Что это может быть?

  2. Kventor 31.05.2008 13:16

    Сложно сказать, не видя результат. :) Если вы просто скопировали код из статьи, то замените все кавычки на двойные прямые. В тексте они преобразованы самим движком Вордпресса в “косые”, а потому просто скопированный код работать не будет.

  3. Lenn 01.06.2008 01:10

    дело точно не в кавычках.
    буду думать…

  4. Kventor 01.06.2008 20:25

    Присылайте ваш вариант на мыло, посмотрим.

  5. Тимофей 27.04.2009 12:58

    Ребята, всё работает. Проверяйте.
    Я сам уже собирался посылать письмо с вопросом: “Почему так криво получается?”, но перепроверив 4-й раз нашёл ошибку, всё встало на место.
    Правда IE 7 тупит и нумерованный список показывает без цифр.

  6. Юлия 19.08.2009 13:58

    А я тоже долго понять не могла почему у меня второй столбик съезжает под первый, и между ними line, А список во втором столбике снова начинается с №1.((
    Оказалось съезжает из-за того что просто не умещается, сначала width у members увеличила - всё вообще в низ под изображения уехало, тогда уменьшила шрифт с 120% до 103%. Сработало!

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

    всё встало на место - получилось два столбика.

    Нумерацию во втором столбике с помощью value поправила, может кому пригодится.
    Косолапыч

Трэкбеки

Оставить комментарий