Верстка блока номера страницы

[okunev2]

Ребят как одним дивом (кросбраузерно) например сделать такое, чтобы тянулось по ширине:

<div class="number">10</div>

Тянется только белый блок вокруг номера страницы с округлыми краями.

Edited March 14, 2010 by okunev2

[Clayton]

Одним дивом, смотри в сторону before и after, для ие 6-7 JS.

[rash]

Одним способом кроссбраузерно не получится — придется или действительно привлекать JS, или подставлять каждому браузеру свои костыли.

[okunev2]

Одним дивом, смотри в сторону before и after, для ие 6-7 JS.

а если без js и с несколькими завернутыми дивами?

[DjTarik]

а если без js и с несколькими завернутыми дивами?

тогда 2 дива - этого достаточно.

[okunev2]

тогда 2 дива - этого достаточно.

т.е. один див с фоном белым тянучка по бокам с отступами от цифры, слева в этом же диве бэкграундом картинка левого края, а в другом диве картинка справа, так?

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

Edited March 14, 2010 by okunev2

[DjTarik]

т.е. один див с фоном белым тянучка по бокам с отступами от цифры, слева в этом же диве бэкграундом картинка левого края, а в другом диве картинка справа, так?

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

Верно...

Я так понимаю - это переключатель страниц?

Я делаю так:

<!-- switch pages -->
<ul class="pager">
<li><a href="#" title="Предыдущая">Предыдущая</a></li>
<li><a href="#" title="1">1</a></li>
<li class="active"><b>2</b></li>
<li><a href="#" title="3">3</a></li>
<li><a href="#" title="Следующая">Следующая</a>
</li>
</ul>
<!-- // switch pages // -->

для 'li', 'a' и 'b' - display: block (или 'inline-block'); Если просто 'block' - тогда нужен ещё и флоат.

С 'inline-block' можно выровнять по центру.

[okunev2]

Верно...

Я так понимаю - это переключатель страниц?

Я делаю так:

<!-- switch pages -->
<ul class="pager">
<li><a href="#" title="Предыдущая">Предыдущая</a></li>
<li><a href="#" title="1">1</a></li>
<li class="active"><b>2</b></li>
<li><a href="#" title="3">3</a></li>
<li><a href="#" title="Следующая">Следующая</a>
</li>
</ul>
<!-- // switch pages // -->

для 'li', 'a' и 'b' - display: block (или 'inline-block'); Если просто 'block' - тогда нужен ещё и флоат.

С 'inline-block' можно выровнять по центру.

да я тоже склоняюсь к списку. только с block и float, тогда можно обойтись меньшим количеством стилей и получится кросбраузерно

[DjTarik]

да я тоже склоняюсь к списку. только с block и float, тогда можно обойтись меньшим количеством стилей и получится кросбраузерно

ну и всё тогда. Делай) Ещё советую, когда сделаешь один раз все правильно, протестируешь и будешь уверен, что всё идеально - сохраняй решение в отдельный файлик, и просто потом его юзай в других проектах.

Экономит кучу времени.)

[Clayton]

А зачем тяга по ширине? Не ужели будет больше 100 страниц? Обычно их около 20, я думаю две цифры в одном квадратике вполне нормально поместятся) Сделай просто, бэкграундом, картинкой.

[DjTarik]

А зачем тяга по ширине? Не ужели будет больше 100 страниц? Обычно их около 20, я думаю две цифры в одном квадратике вполне нормально поместятся) Сделай просто, бэкграундом, картинкой.

не знаю... Я сколько раз не верстал - просили одинаковое расстояние именно от цифр. Будь то 1, или 20, или 300... поэтому вот так...

[Zippovich]

не знаю... Я сколько раз не верстал - просили одинаковое расстояние именно от цифр. Будь то 1, или 20, или 300... поэтому вот так...

и это правильно - не слушай дядю

[Clayton]

не знаю... Я сколько раз не верстал - просили одинаковое расстояние именно от цифр. Будь то 1, или 20, или 300... поэтому вот так...

Ну, одним дивом поиском по форуму найдешь, мы тут как-то разбирали, я таким способом делаю круглые уголки http://www.ivblog.ru/test/sq_test/sq.html тянется как хочешь)