VPF::Элемент постраничной навигации

$дмитрий

Дата 12.11.2011, 16:35 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45

Есть макет постраничной навигации, в таком виде

Красная ячейка это активный пункт. Кол-во ячеек динамическое(определяется кол-вом страниц), ячейки резиновые

Каким образом проще всего сверстать эту пакость?

ksnk

Дата 12.11.2011, 18:25 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


<head>
<style>
.pages {
    width:100%;
    table-layout:fixed;
    border:0;
    border-collapse:collapse;
    border-spacing: 0;
}

.pages td {
    height:11px ;
    background-image: url(pages.gif);
    background-position: 100% -22px;
    background-repeat: no-repeat;
}
.pages td.last {
    background-position: 100% -33px;
}
.pages td.last.current {
    background-position: 100% -44px;
}
.pages td.pred{
    background-position: 100% -11px;
}
.pages td.current{
    background-position: 100% 0;
}
</style>
</head>
<body>
<table class="pages" ><tr>
<td></td><td></td><td></td><td></td><td></td><td class="pred"></td><td class="current"></td><td class="last"></td>
</tr>
</table>
<table class="pages" ><tr>
<td></td><td><td></td><td></td><td class="pred"></td><td class="last current"></td>
</tr>
</table>
<table class="pages" ><tr>
<td class=current></td><td></td><td class="pred"></td><td class="current"></td><td class="last"></td>
</tr>
</table>
<table class="pages" ><tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="pred"></td><td class="current"></td><td class="last"></td>
</tr>
</table>
</body>

current - текущий ячейк
pred = предыдущий, если он есть
last - обязательно последний.

table-layout:fixed у таблицы без дополнительных определений вызовет одинаковые по размеру ячейки.

Вероятно, можно определить правила без класса pred, но что-то сомневаюсь я в возможностяз IE...

Присоединённый файл ( Кол-во скачиваний: 10 )

pages.gif 0,79 Kb

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

$дмитрий

Дата 12.11.2011, 19:21 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45

ksnk, Спасибо! smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »