За последние 24 часа нас посетили 18124 программиста и 1698 роботов. Сейчас ищут 1586 программистов ...

Список

Тема в разделе "PHP для новичков", создана пользователем Matveiphp, 29 ноя 2024.

  1. Matveiphp

    Matveiphp Новичок

    С нами с:
    29 окт 2024
    Сообщения:
    12
    Симпатии:
    0
    Добрый день, подскажите как дописать код.
    Если серверов больше двух то в статистике накладывается один на другой в отображении на сайте. Т.е. между списками серверов нет разделения.

    Код (Text):
    1. <!-- SERVERS -->
    2.             <div class="header__server">
    3.                 <div class="header__server-item-position">
    4.                 {% for server in server_online_status() %}
    5.                     <div class="header__server-item">
    6.                         <div class="header__server-item-icon">
    7.                             <img src="{{template}}/storage/images/tn1bZ9rL7z8g3W75oqTy7QMPhYeBEVkA8yfUkY3Y.png" alt="server icon">
    8.                         </div>
    9.                         <div class="header__server-item-description">
    10.                             <div class="header__server-item-info">
    11.                                 <div class="header__server-item-name">{{server.name}} <span> x{{server.rate_exp}}</span></div>
    12.                                 <div class="header__server-item-text">в игре: <span>{% for online in server_online_status() %}{{online['player_count_online']}}{% endfor %}</span></div>
    13.                             </div>
    14.                            
    15.                         </div>
    16.                     </div>
    17.                     {% endfor %}
    18.                 </div>
    19.             </div>
    20.        <!-- END SERVERS -->
     

    Вложения:

    • ghghghgh.JPG
      ghghghgh.JPG
      Размер файла:
      17,2 КБ
      Просмотров:
      7
    • ghghghgh.JPG
      ghghghgh.JPG
      Размер файла:
      17,2 КБ
      Просмотров:
      4
    #1 Matveiphp, 29 ноя 2024
  2. l_2001

    l_2001 Активный пользователь

    С нами с:
    9 дек 2014
    Сообщения:
    82
    Симпатии:
    3
    между дивами <br> не?
     
    #2 l_2001, 1 дек 2024
  3. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    439
    Симпатии:
    84
    Адрес:
    Бавария, Германия

    Добрый день!
    Посмотрите в CSS:
    .header__server-item-position
    или, если не справитесь, покажите
    Удачи!

    l_2001
    зачем нужен <br>, если в div заданы аттрибуты class?
     
    #3 Vladimir Kheifets, 1 дек 2024
  4. l_2001

    l_2001 Активный пользователь

    С нами с:
    9 дек 2014
    Сообщения:
    82
    Симпатии:
    3
    так вроде проще разделить дивы <br>, без css, если одноразовое применение... впрочем, ТС самому решать...
     
    #4 l_2001, 1 дек 2024
  5. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    439
    Симпатии:
    84
    Адрес:
    Бавария, Германия
    допустим в CSS косяк, например, в див прописано свойство displaу:inline-block
    В этом случае, <br>, без css поможет.
    Только если окажется, что нужен ещё отступ между дивами, то придётся ещё дописать &nbsp;<br>
    А не проще ли в CSS исправить ошибку и если потребуются отступы, добавить свойство margin?
    Конечно ТС самому решать...
    Советую только заплатки в коде типа <br> стараться не делать.
    Они, эти заплатки, всегда боком выходят.
     
    #5 Vladimir Kheifets, 1 дек 2024
  6. KingdaKa

    KingdaKa Активный пользователь

    С нами с:
    7 сен 2021
    Сообщения:
    90
    Симпатии:
    17
    Пришлите код класса header__server, плиз. И не будем гадать на кофейной гуще. Если я правильно понимаю это и есть блок инфы о сервере.
    А, может быть у блоков серверов есть контейнер? Если он flex, то можно там gap указать.
     
    #6 KingdaKa, 1 дек 2024
  7. Matveiphp

    Matveiphp Новичок

    С нами с:
    29 окт 2024
    Сообщения:
    12
    Симпатии:
    0
    Код (Text):
    1.  <section class="server-section">
    2.     <div class="content-area flex-es">
    3.  
    4.         <div class="server-section-sliders">
    5.  
    6.            
    7.  
    8.             <div class="server-section-slider-for">
    9.                                 {% for i, server in server_online_status() %}
    10.                     <div class="server-section-slider-for-item">
    11.                         <div class="server-section-slider-for-item-border">
    12.                             <img class="border-icon-top"
    13.                                  src="{{template}}/img/icons/server-section-slider-for-item-border-top.png" alt="">
    14.                         </div>
    15.                         <div class="server-section-slider-for-item-info-line flex-sbe">
    16.                             <div class="server-section-slider-for-item-info-line-title">
    17.                                 {{server.name}} <span>x{{server.rate_exp}}</span>
    18.                             </div>
    19.                             <div class="server-section-slider-for-item-info-line-online">
    20.                                 <div class="server-section-slider-for-item-info-line-online-count">
    21.                                     <img src="{{template}}/img/icons/online-count.png" alt="">
    22.                                     {% for online in server_online_status() %}{{online['player_count_online']}}{% endfor %}
    23.                                 </div>
    24.                                 <div class="online"><span>{% if server.connect_game %}Online{% else %}</span></div>
    25.                                 <div class="offline"><span>Offline{% endif %}</span></div>
    26.                                
    27.                             </div>
     
    #7 Matveiphp, 2 дек 2024
  8. Matveiphp

    Matveiphp Новичок

    С нами с:
    29 окт 2024
    Сообщения:
    12
    Симпатии:
    0
    в стилях так прописано
    Код (Text):
    1. @media(max-width: 1024px) {
    2.     .header__server {
    3.         width:100%;
    4.         gap: 20px
    5.     }
    6. }
    7.  
    8. .header__server .header__server-item-position {
    9.     width: calc((100% - 24px)/2);
    10.     height: 70px;
    11.     position: relative;
    12.     z-index: 1
    13. }
    14.  
    15. .header__server .header__server-item-position:hover {
    16.     z-index: 2
    17. }
    18.  
    19. @media(max-width: 680px) {
    20.     .header__server .header__server-item-position {
    21.         width:100%
    22.     }
    23. }
    24.  
    25. .header__server .header__server-item {
    26.     width: 100%;
    27.     padding: 16px 20px 14px;
    28.     border-radius: 10px;
    29.     background-color: rgba(31,21,16,.8);
    30.     overflow: hidden;
    31.     cursor: pointer;
    32.     transition: all .3s ease-in-out;
    33.     display: flex;
    34.     justify-content: flex-start;
    35.     align-items: flex-start;
    36.     gap: 16px;
    37.     position: absolute;
    38.     left: 0px;
    39.     top: 0px;
    40.     transition: background-color .3s ease-in-out
    41. }
    42.  
    43. .header__server .header__server-item:hover {
    44.     background-color: #1f1510
    45. }
    46.  
    47. .header__server .header__server-item:hover .header__server-item-online {
    48.     grid-template-rows: 1fr
    49. }
    50.  
    51. .header__server .header__server-item:hover .header__server-item-online>div {
    52.     margin-top: 10px
    53. }
    54.  
    55. .header__server .header__server-item:hover:before {
    56.     transform: scale(1, -1)
    57. }
    58.  
    59.  
    60.  
    61. .header__server .header__server-item-description {
    62.     flex-grow: 1;
    63.     overflow: hidden
    64. }
    65.  
    66. .header__server .header__server-item-icon {
    67.     width: 40px;
    68.     aspect-ratio: 1/1;
    69.     position: relative
    70. }
    71.  
    72. .header__server .header__server-item-icon img {
    73.     display: block;
    74.     width: 100%;
    75.     height: 100%;
    76.     position: absolute;
    77.     object-fit: contain;
    78.     object-position: center center
    79. }
    80.  
    81. .header__server .header__server-item-name {
    82.     font-family: var(--primary-font);
    83.     font-size: 18px;
    84.     line-height: 1em;
    85.     font-weight: 500;
    86.     color: #fff;
    87.     text-transform: uppercase
    88. }
    89.  
    90. .header__server .header__server-item-name span {
    91.     color: #ffc24c
    92. }
    93.  
    94. .header__server .header__server-item-text {
    95.     font-size: 14px;
    96.     font-weight: normal;
    97.     line-height: 1;
    98.     color: #bfab85;
    99.     text-transform: uppercase;
    100.     margin-top: 5px
    101. }
    102.  
    103. .header__server .header__server-item-text span {
    104.     color: #7ec442
    105. }
    106.  
    107. .header__server .header__server-item-online {
    108.     pointer-events: none;
    109.     display: grid;
    110.     grid-template-rows: 0fr;
    111.     transition: grid-template-rows .5s ease-in-out
    112. }
    113.  
    114. .header__server .header__server-item-online>div {
    115.     overflow: hidden;
    116.     transition: margin-top .5s ease-in-out
    117. }
    118.  
    119. .header__server .header__server-item-online-item {
    120.     font-size: 14px;
    121.     font-family: "DIN Next W1G";
    122.     color: #fff;
    123.     line-height: 1.5;
    124.     font-weight: normal
    125. }
    126.  
    127. .header__server .header__server-item-online-item span {
    128.     color: #e7af45
    129. }
     
    #8 Matveiphp, 2 дек 2024
  9. KingdaKa

    KingdaKa Активный пользователь

    С нами с:
    7 сен 2021
    Сообщения:
    90
    Симпатии:
    17
    Попробуйте вот так.

    Этот блок заменить просто:

    Код (Text):
    1.     .header__server .header__server-item-position {
    2.       width: calc((100% - 24px)/2);
    3.       /* height: 70px; */
    4.       position: relative;
    5.       z-index: 1;
    6.       display: flex;
    7.       flex-direction: column;
    8.       gap: 10px; /* Желаемое расстояние */
    9.     }
    А тут только закоментить абсолютное позиционирование (position: absolute):

    Код (Text):
    1.     .header__server .header__server-item {
    2.       width: 100%;
    3.       padding: 16px 20px 14px;
    4.       border-radius: 10px;
    5.       background-color: rgba(31, 21, 16, .8);
    6.       overflow: hidden;
    7.       cursor: pointer;
    8.       transition: all .3s ease-in-out;
    9.       display: flex;
    10.       justify-content: flex-start;
    11.       align-items: flex-start;
    12.       gap: 16px;
    13.       /* position: absolute; */
    14.       left: 0px;
    15.       top: 0px;
    16.       transition: background-color .3s ease-in-out
    17.     }
     
    #9 KingdaKa, 2 дек 2024
    Matveiphp нравится это.
  10. Matveiphp

    Matveiphp Новичок

    С нами с:
    29 окт 2024
    Сообщения:
    12
    Симпатии:
    0
    подправил получилось разделить. В статистике онлайна одинаковые данные получает почему то, хотя на серверах разное кол-во онлайна, что я упустил в коде? (
     

    Вложения:

    • 777o.JPG
      777o.JPG
      Размер файла:
      25,3 КБ
      Просмотров:
      4
    #10 Matveiphp, 2 дек 2024
  11. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    439
    Симпатии:
    84
    Адрес:
    Бавария, Германия
    Добрый день!
    Этот Django-код отличается от показанного Вами в начале.
    В нём нет класса .header__server.
    Похоже, что CSS, который Вы показали от первого кода.
    Какая из двух версий кода работает?
    Удачи!
     
    #11 Vladimir Kheifets, 3 дек 2024
  12. Matveiphp

    Matveiphp Новичок

    С нами с:
    29 окт 2024
    Сообщения:
    12
    Симпатии:
    0
    этот код выводит статистику на главной странице

    Код (Text):
    1. <section class="server-section">
    2.     <div class="content-area flex-es">
    3.         <div class="server-section-sliders">
    4.        
    5.             <div class="server-section-slider-for">
    6.                                 {% for i, server in server_online_status() %}
    7.                     <div class="server-section-slider-for-item">
    8.                         <div class="server-section-slider-for-item-border">
    9.                             <img class="border-icon-top"
    10.                                  src="{{template}}/img/icons/server-section-slider-for-item-border-top.png" alt="">
    11.                         </div>
    12.                         <div class="server-section-slider-for-item-info-line flex-sbe">
    13.                             <div class="server-section-slider-for-item-info-line-title">
    14.                                 {{server.name}} <span>x{{server.rate_exp}}</span>
    15.                             </div>
    16.                             <div class="server-section-slider-for-item-info-line-online">
    17.                                 <div class="server-section-slider-for-item-info-line-online-count">
    18.                                     <img src="{{template}}/img/icons/online-count.png" alt="">
    19.                                     {% for online in server_online_status() %}{{online['player_count_online']}}{% endfor %}
    20.                                 </div>
    21.                                 <div class="online"><span>{% if server.connect_game %}Online{% else %}</span></div>
    22.                                 <div class="offline"><span>Offline{% endif %}</span></div>
    23.                            
    24.                             </div>
    а это полностью CSS
     

    Вложения:

    #12 Matveiphp, 3 дек 2024
  13. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    439
    Симпатии:
    84
    Адрес:
    Бавария, Германия
    Добрый день!
    Этот только часть кода или в коде ошибки. Эти тэги не закрыты
    HTML:
    1. <section class="server-section">
    2.     <div class="content-area flex-es">
    3.         <div class="server-section-sliders">
    4.    
    5.             <div class="server-section-slider-for">
    6.                                 {% for i, server in server_online_status() %}
    7.                     <div class="server-section-slider-for-item">
    Если хотя бы один из тэгов не закрыт, то разметка будет ломаться, чтобы не было прописано в CSS.
    По CSS. Проверять всё не реально. Нужно смотреть конкретно то, что сейчас не работает.
    Бросается в глаза. Многократно встречается
    Код (CSS):
    1. font-family: var(--primary-font);
    , но потерян
    Код (Text):
    1. :root{
    2.   --primary-font: ....
    3. }
     
    #13 Vladimir Kheifets, 4 дек 2024
  14. Matveiphp

    Matveiphp Новичок

    С нами с:
    29 окт 2024
    Сообщения:
    12
    Симпатии:
    0
    полностью страница выглядит так
     

    Вложения:

    #14 Matveiphp, 6 дек 2024
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)