ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

АКЦИЯ: Раздаём дизайны бесплатно

Доработаем макет под ваш проект;
Сверстаем;
Сделаем мобильную версию по желанию.

Подробнее

Поисковой ресурс

Проект от команды FD
для текстовых ролевиков

Спойлеры и обсуждение

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Конкурс! Интерфейс и взаимодействие! Главный приз - 2000 рублей.
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄
❗ ❗ ❗ Technical work is underway. Something here and there may be crooked. We'll fix it soon. :)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



[ВЫПОЛНЕНО] (БЕСПЛАТНО) CSS/HTML / Кодинг: HTML пагинатор страниц

Сообщений 1 страница 10 из 21

1

ОБЩАЯ ИНФОРМАЦИЯ О ЗАКАЗЕ

1. ССЫЛКА НА ФОРУМ/САЙТ:
https://xboxfan.ru/
2. УСЛОВИЯ И БЮДЖЕТ:


Минимальный и максимальный бюджет, условия: 

Предлагаю в обмен:


3. ВАШИ КОНТАКТЫ:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

ТЕХНИЧЕСКОЕ ЗАДАНИЕ

1. ОПИСАНИЕ ЗАКАЗА:
 
Нужный кнопки переключения страниц которые можно будет самому заполнять ссылками, пытался сделать сам, но не смог сделать спойлер который открывается вверх на цифре странице. На скриншоте первое два что хотелось бы, можно не много в другом в виде или типа как на третьем варианте.

Пример есть тут https://gamefaqs.gamespot.com/xbox360/c … ll?page=47 внизу справа

2. ИСХОДНИКИ И ГРАФИКА:

Я предоставляю выбор исходников дизайнеру
https://sun9-26.userapi.com/impg/Tn0eAObMh7Xri1uMmu-bitqqAj1JDkse9QAcKA/yq2IXobEAFE.jpg?size=1031x389&quality=95&sign=2c6c435a6effb41c48beeac80be3a365&type=album

3. ДОПОЛНИТЕЛЬНО:

Что нашел в интернете

Код:
<html>
<head>
<style>
.center {
    text-align: center;
}

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: center;
    padding: 5px 10px;
    text-decoration: none;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
}
</style>
</head>
<body>

<div class="pagination">
  <a href="https://xboxfan.ru/pages/xbox360_2">&laquo;</a>
  <a class="active" href="https://xboxfan.ru/pages/xbox360_1">1</a>
  
  <a href="https://xboxfan.ru/pages/xbox360_3">&raquo;</a>
</div>

</body>
</html>

+1

2

<div class="pagination">
  <a href="/pages/xbox360_2">&laquo;</a>

<select id="list" class="active" onchange="window.location.href=this.options[this.selectedIndex].value">
   <option value="/pages/xbox360_1">1</option>
   <option value="/pages/xbox360_2">2</option>
   <option selected value="/pages/xbox360_3">3</option>
   <option value="/pages/xbox360_4">4</option>
   <option value="/pages/xbox360_5">5</option>
</select>

  <a href="https://xboxfan.ru/pages/xbox360_4">&raquo;</a>
</div>

selected - действующий пункт списка на данной странице

попробуй вставить на тестовую страницу, дай ссылку - я посмотрю и помогу с дизайном css, чтоб пункты списка выделялись понятно.

+1

3

Герда
https://xboxfan.ru/pages/xbox360_11

А открытие в верх не сделать?

Отредактировано ROBOCOPxbox360 (06.11.22 23:34)

0

4

#p175767,ROBOCOPxbox360 написал(а):

Герда
https://xboxfan.ru/pages/xbox360_11

А открытие в верх не сделать?

наверное, сделать. ;)
оставь, пожалуйста, страничку, с утра полапаю и погуглю - сделаем красиво. :cool:

0

5

#p175771,Герда написал(а):
#p175767,ROBOCOPxbox360 написал(а):

Герда
https://xboxfan.ru/pages/xbox360_11

А открытие в верх не сделать?

наверное, сделать. ;)
оставь, пожалуйста, страничку, с утра полапаю и погуглю - сделаем красиво. :cool:

Оставлю в любом случаи так форум с ума сходит, первую страницу не могу отредактировать пишет при сохранении 500 Internal Server Error
nginx

А так мне зашли кнопки "Закругленные активные и парящие кнопки" https://html5css.ru/css/css3_pagination.php

Я там и размеры делал и цвет, хотел попробовать а тут ддос, а пака что такая ситуация решил заказать у вас)

Вот я пробовал https://xboxfan.ru/pages/xbox360_3 хорошо смотрятся как с пк и телефона

Отредактировано ROBOCOPxbox360 (07.11.22 00:01)

0

6

Герда

И можно сделать разделитель многоточия не кликабельным? а то с моими знаниями не получается.

https://forumupload.ru/uploads/0007/e3/f7/8224/t779034.jpg

0

7

ROBOCOPxbox360
http://oaotr.0pk.me/pages/11111111
https://i.imgur.com/aY0Htzh.jpg

HTML

Код:
<div class="pagination">
      <a href="/pages/xbox360_2">&laquo; Назад</a>

<span>Страница: 
    <select id="list" class="active" onchange="window.location.href=this.options[this.selectedIndex].value">
       <option value="/pages/xbox360_1">1</option>
       <option value="/pages/xbox360_2">2</option>
       <option selected>3</option>
       <option value="/pages/xbox360_4">4</option>
       <option value="/pages/xbox360_5">5</option>
    </select>
/5
</span>

      <a href="https://xboxfan.ru/pages/xbox360_4">Вперед &raquo;</a>
</div>

Стиль:

Код:
<style>
.pagination {text-align: center;padding: 5px 0 10px;}
.pagination a {
display: inline-block;
background: url(../../img/Mybb_The_Button/h2.gif) #0e0e0e repeat-x bottom;
padding: 3px 4px;
border-radius: 3px;
border: 1px solid #5A7811;
text-decoration: none !important;
margin: 0 5px;
}
.pagination a:hover {border: 1px solid #000;}

.pagination span {font-size: 14px;}
.pagination select {border: 1px solid #5A7811;}
.pagination select:hover, .pagination select:focus {border: 1px solid #000;}

.pagination select option {color: #000; background-color: #b0cb21;}
.pagination select option[selected] {background-color: #5A7811; color: #fff}
</style>

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

чтобы текущая страница или любой пункт списка был НЕ кликабельным, просто не прописывай ссылку value="/pages/xbox360_2", вот так:

Код:
<option>...</option>

текущая страница обозначается как selected:

Код:
<option selected>3</option>

Отредактировано Герда (07.11.22 16:05)

+1

8

PS
только что немножко поправила стиль.

0

9

#p175806,Герда написал(а):

PS
только что немножко поправила стиль.

почитаю, попробую, если будут вопросы или всё хорошо, то тут напишу.

+1

10

#p175806,Герда написал(а):

PS
только что немножко поправила стиль.

<option>...</option>

Всё таки кликабельно(

вот тут можно попробовать

https://xboxfan.ru/pages/xbox360_01

0