Важная информация
Показано с 1 по 3 из 3

Тема: Почему не работает CSS свойство order в гридах?

  1. #1 Почему не работает CSS свойство order в гридах? 
    Новичок
    Регистрация
    19.12.2020
    Сообщений
    4
    Сказал(а) спасибо
    0
    Поблагодарили 1 раз в 1 сообщении
    Добрый день уважаемые профессионалы и гости форума!

    Я изучаю HTML и CSS и у меня возникла проблема со свойством order в гриде.

    Суть проблемы такова:
    я создаю grid в блоке навигации на моей странице в которой находятся: изображение, и три навигационных ссылки (завернуты в список),
    я через свойство order с индексом 1 хочу переместить в самый низ картинку (ибо остальные элементы должны иметь по умолчанию индекс 0 согласно спецификации),
    чтобы она была самой последней в сетке, но у меня это не получается.

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

    Помогите пожалуйста понять, что не так я делаю, может я что то упускаю из виду.
    Перечитал все в справочниках по этому свойству, вроде делаю все так же как в справочниках и примерах, но ничего не выходит.

    Запускал в разных браузерах, результат одинаковый.
    Ниже прикрепил скриншот со стрелкой которая указывает на то куда я хочу переместить изображение.

    Заранее благодарю за помощь! Прошу сильно не ругаться если я пишу какие либо глупости, просто я совсем новичек

    Код css и html блок <header> один в один как в учебном проекте просто с абстрактным контентом для упрощения.

    styles.css
    css code
    CSS Code:
    1. .page {
    2.   height: 100%;
    3. }
    4.  
    5. .page-body {
    6.   min-height: 100%;
    7.   display: grid;
    8.   grid-auto-rows: min-content 1fr min-content;
    9.   align-content: start;
    10. }
    11.  
    12. .main-navigation {
    13.   display: grid;
    14.   font-size: 16px;
    15.   line-height: 20px;
    16.   background-color: transparent;
    17. }
    18.  
    19. .main-heder-img {
    20.   order: 1;
    21. }
    22.  
    23. .text {
    24.   font: Arial;
    25.   font-size: 14px;
    26.   line-height: 24px;
    27. }
    28.  
    29. .no-decore-list {
    30.   list-style: none;
    31. }


    index.html
    html code
    HTML Code:
    1. <!DOCTYPE html>
    2. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="page" lang="ru">
    3.  
    4. <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    5.   <[Ссылки могут видеть только зарегистрированные пользователи. ] charset="utf-8">
    6.   <[Ссылки могут видеть только зарегистрированные пользователи. ]>Test</[Ссылки могут видеть только зарегистрированные пользователи. ]>
    7.   <[Ссылки могут видеть только зарегистрированные пользователи. ] rel="stylesheet" href="styles.css">
    8. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    9.  
    10. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="page-body">
    11.   <header>
    12.     <[Ссылки могут видеть только зарегистрированные пользователи. ]>Header</[Ссылки могут видеть только зарегистрированные пользователи. ]>
    13.     <nav class="main-navigation">
    14.       <[Ссылки могут видеть только зарегистрированные пользователи. ] class="main-header-img">
    15.         <[Ссылки могут видеть только зарегистрированные пользователи. ] src="img.jpg" width="400" height="250" alt="image">
    16.       </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    17.       <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    18.         <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    19.           <[Ссылки могут видеть только зарегистрированные пользователи. ]> <[Ссылки могут видеть только зарегистрированные пользователи. ] href="https://www.google.com">Home</[Ссылки могут видеть только зарегистрированные пользователи. ]> </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    20.           <[Ссылки могут видеть только зарегистрированные пользователи. ]> <[Ссылки могут видеть только зарегистрированные пользователи. ] href="https://www.google.com">News</[Ссылки могут видеть только зарегистрированные пользователи. ]> </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    21.           <[Ссылки могут видеть только зарегистрированные пользователи. ]> <[Ссылки могут видеть только зарегистрированные пользователи. ] href="https://www.google.com">About us</[Ссылки могут видеть только зарегистрированные пользователи. ]> </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    22.         </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    23.         <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    24.           <[Ссылки могут видеть только зарегистрированные пользователи. ] href="#">Login</[Ссылки могут видеть только зарегистрированные пользователи. ]>
    25.         </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    26.       </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    27.     </nav>
    28.   </header>
    29.  
    30.   <main>
    31.     <[Ссылки могут видеть только зарегистрированные пользователи. ]>Content</[Ссылки могут видеть только зарегистрированные пользователи. ]>
    32.       <[Ссылки могут видеть только зарегистрированные пользователи. ] class="text">
    33.         Text text text text text text text text text text text text text text text text text text text text <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    34.         text text text text text text text text text<[Ссылки могут видеть только зарегистрированные пользователи. ]>
    35.         text text text text text text text text text text text text text text text text text text text text <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    36.         text text text text text text text text text<[Ссылки могут видеть только зарегистрированные пользователи. ]>
    37.         text text text text text text text text text text text text text text text text text text text text <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    38.         text text text text text text text text text<[Ссылки могут видеть только зарегистрированные пользователи. ]>
    39.  
    40.         Text text text text text text text text text text text text text text text text text text text text <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    41.         text text text text text text text text text<[Ссылки могут видеть только зарегистрированные пользователи. ]>
    42.         text text text text text text text text text text text text text text text text text text text text <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    43.         text text text text text text text text text<[Ссылки могут видеть только зарегистрированные пользователи. ]>
    44.         text text text text text text text text text text text text text text text text text text text text <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    45.         text text text text text text text text text<[Ссылки могут видеть только зарегистрированные пользователи. ]>
    46.       </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    47.   </main>
    48.  
    49.   <footer>
    50.     <[Ссылки могут видеть только зарегистрированные пользователи. ]>Copyrigt 2021</[Ссылки могут видеть только зарегистрированные пользователи. ]>
    51.   </footer>
    52. </[Ссылки могут видеть только зарегистрированные пользователи. ]>

    [Ссылки могут видеть только зарегистрированные пользователи. ]
    Ответить с цитированием  
     

  2. #2  
    Новичок
    Регистрация
    19.12.2020
    Сообщений
    4
    Сказал(а) спасибо
    0
    Поблагодарили 1 раз в 1 сообщении
    Так же забыл написать, что в браузере (в инструменте для разработчика) сетка видна,
    то есть браузер показывает, что Грид работает, в яндекс браузере даже показывает что order: 1; не перебивается никакими другими свойствами (то есть активен и работает),
    а вот хром этого не показывает, но то что сетка есть они показывают оба,
    а вот почему не отрабатывает это свойство я не понимаю...
    Ответить с цитированием  
     

  3. #3  
    Новичок
    Регистрация
    19.12.2020
    Сообщений
    4
    Сказал(а) спасибо
    0
    Поблагодарили 1 раз в 1 сообщении
    Проблема найдена! Это оказалась банальная невнимательность с моей стороны, я просто пропустил одну букву в объявлении класса в css, то есть этот класс отличался на одну букву в файле css и в файле html.
    Ответить с цитированием  
     

  4. Пользователь сказал cпасибо:

    >Quiet Snow< (05.01.2021)

Информация о теме
Пользователи, просматривающие эту тему

Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

Похожие темы

  1. Почему висит пк от этого исходника
    от Ктото в разделе Общие вопросы программирования
    Ответов: 3
    Последнее сообщение: 04.04.2018, 18:23
  2. Почему разные результаты.
    от JGalt в разделе Delphi
    Ответов: 1
    Последнее сообщение: 21.10.2013, 14:39
  3. Почему нету С#?
    от krot в разделе .NET
    Ответов: 11
    Последнее сообщение: 01.04.2013, 15:17
  4. Почему меняются позиции?
    от гелий в разделе Яндекс
    Ответов: 3
    Последнее сообщение: 24.09.2012, 14:24
  5. Ответов: 5
    Последнее сообщение: 29.11.2010, 16:49
Ваши права
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •