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

Объявление

🎲 Майский ваншот

Ленивая сезонная майская акция
Сыграем в настольную игру в дискорде?
Пишите, присоединяйтесь к обсуждению!

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

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

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

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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



[ВЫПОЛНЕНО] (БЕСПЛАТНО) 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