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

vv_tomilin · 03.01.2021, 07:15

Добрый день уважаемые профессионалы и гости форума!

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

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

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

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

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

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

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

styles.css

Код:

.page {
  height: 100%;
}

.page-body {
  min-height: 100%;
  display: grid;
  grid-auto-rows: min-content 1fr min-content;
  align-content: start;
}

.main-navigation {
  display: grid;
  font-size: 16px;
  line-height: 20px;
  background-color: transparent;
}

.main-heder-img {
  order: 1;
}

.text {
  font: Arial;
  font-size: 14px;
  line-height: 24px;
}

.no-decore-list {
  list-style: none;
}

index.html

Код:

<!DOCTYPE html>
<html class="page" lang="ru">

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body class="page-body">
  <header>
    <h2>Header</h2>
    <nav class="main-navigation">
      <a class="main-header-img">
        <img src="img.jpg" width="400" height="250" alt="image">
      </a>
      <div>
        <ul>
          <li> <a href="https://www.google.com">Home</a> </li>
          <li> <a href="https://www.google.com">News</a> </li>
          <li> <a href="https://www.google.com">About us</a> </li>
        </ul>
        <div>
          <a href="#">Login</a>
        </div>
      </div>
    </nav>
  </header>

  <main>
    <h2>Content</h2>
      <p class="text">
        Text text text text text text text text text text text text text text text text text text text text <br>
        text text text text text text text text text<br>
        text text text text text text text text text text text text text text text text text text text text <br>
        text text text text text text text text text<br>
        text text text text text text text text text text text text text text text text text text text text <br>
        text text text text text text text text text<br>

        Text text text text text text text text text text text text text text text text text text text text <br>
        text text text text text text text text text<br>
        text text text text text text text text text text text text text text text text text text text text <br>
        text text text text text text text text text<br>
        text text text text text text text text text text text text text text text text text text text text <br>
        text text text text text text text text text<br>
      </p>
  </main>

  <footer>
    <p>Copyrigt 2021</p>
  </footer>
</body>

Alar · 03.01.2021, 07:42

Если совсем не работает, то проблемы в подключении стилей

Код:


  <link rel="stylesheet" href="styles.css">

vv_tomilin · 03.01.2021, 07:47

Alar, Да вряд ли, все остальные стили работают корректно.

vv_tomilin · 03.01.2021, 07:53

Alar, не работает даже если включаю стили непосредственно в код html через тег <style>, но не работает конкретно это, остальные стили отрабатывают так как я хочу.

vv_tomilin · 03.01.2021, 08:11

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

Alar · 03.01.2021, 08:13

Цитата:

Сообщение от vv_tomilin

хром этого не показывает,

Почистить хеш в хроме. посмотреть в другом хроме на крогом компе.

vv_tomilin · 03.01.2021, 08:18

Alar, Тоже об этом подумал. Кэш чистил, везде, на всех браузерах, и в мозиле и в хроме и яндексе и опере, но все равно нет результата.

Alar · 03.01.2021, 10:37

В стилях

Цитата:

.main-heder-img

в html файле

Цитата:

class="main-header-img"

Alar · 03.01.2021, 11:13

На я тебе рабочий пример нашёл

А ещё у меня не работает он в 40 фаерфоксе, а в 84 работает, т.е. в старых браузерах не работает, а значит лучше технологию не юзать. )

https://webformyself.com/sortirovka-...v-grid-layout/

Код:



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 10px auto;
  width: 700px;
  font-family: 'Lato';
  text-align: center;
}

h2 {
  margin: 25px;
  margin-bottom: 50px;
  font-size: 2em;
}

.container {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-gap: 10px;
  font-family: 'Lato';
  text-align: center;
  font-size: 1.4em;
  margin: 40px 30px;
}

.item {
  padding: 40px;
  font-size: 1.5em;
  border: 1px solid black;
}

.c {
  background: lightgreen;
  grid-row-start: 1;
  grid-row-end: 2;
}

.e {
  background: lightgreen;
  grid-row-start: 1;
  grid-row-end: 3;
}

.b, .j {
  background: orange;
  order: 2;
}

.a, .i {
  background: violet;
  order: 3;
}

Код:



<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="styles.css">
</head>

<div class="container">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
  <div class="item e">E</div>
  <div class="item f">F</div>
  <div class="item g">G</div>
  <div class="item h">H</div>
  <div class="item i">I</div>
  <div class="item j">J</div>
</div>

vv_tomilin · 03.01.2021, 16:35

Цитата:

Сообщение от Alar

В стилях

Код:

.main-heder-img

в html файле

Код:

class="main-header-img"

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

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

Прошу сильно не судить.

03.01.2021, 07:42	#2
Alar Александр Администратор Регистрация: 28.10.2006 Сообщений: 17,501	Если совсем не работает, то проблемы в подключении стилей Код: `<link rel="stylesheet" href="styles.css">` Купить рекламу на форуме за 42 тыс руб за месяц размещения

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Почему не применяется свойство CSS в HTML?	King_McDonald	HTML и CSS	6	08.01.2018 13:54
[CSS]: Пытаюсь сделать Карусель без JS, но не срабатывает нужное css-свойство. Помогите разобраться.	MeriPoppins	HTML и CSS	2	10.02.2017 22:50
Как узнать прописано ли css свойство	byte916	JavaScript, Ajax	1	23.12.2014 15:27
css свойство	ts-alan	HTML и CSS	2	01.07.2013 13:58
Почему здесь css не работает?	Иришка753	Помощь студентам	1	03.04.2010 02:54

03.01.2021, 07:47	#3
vv_tomilin Пользователь Регистрация: 03.01.2021 Сообщений: 11	Alar, Да вряд ли, все остальные стили работают корректно.

03.01.2021, 07:53	#4
vv_tomilin Пользователь Регистрация: 03.01.2021 Сообщений: 11	Alar, не работает даже если включаю стили непосредственно в код html через тег <style>, но не работает конкретно это, остальные стили отрабатывают так как я хочу.

03.01.2021, 08:11	#5
vv_tomilin Пользователь Регистрация: 03.01.2021 Сообщений: 11	Так же забыл написать, что в браузере (в инструменте для разработчика) сетка видна, то есть браузер показывает, что Грид работает, в яндекс браузере даже показывает что order: 1; не перебивается никакими другими свойствами (то есть активен и работает), а вот хром этого не показывает, но то что сетка есть они показывают оба, а вот почему не отрабатывает это свойство я не понимаю...

03.01.2021, 08:18	#7
vv_tomilin Пользователь Регистрация: 03.01.2021 Сообщений: 11	Alar, Тоже об этом подумал. Кэш чистил, везде, на всех браузерах, и в мозиле и в хроме и яндексе и опере, но все равно нет результата.