0

введите сюда описание изображения

settings.py:

STATIC_URL = '/main/static/'
STATICFILES_DIRS = [
    BASE_DIR / "main/static"
]

index.html:

{% extends 'main/base.html' %}
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'main/css/style.css' %}">
<body>
  <div class="grid-wrapper">
    <header class="grid-header">
        <img class="circles" src="{% static "/img/main8.jpg" %}" alt="main pic">
        <p>Предоставим качественное образование, <br>
          поможем понять школьную программу, <br>
          улучшить оценки и <br>
          подготовиться к экзаменам</p>
    </header>
  </div>
</body>
{% endblock %}

base.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/png" href="{% static 'main/img/favico.png' %}">
  <title>{% block title %}{% endblock %}</title> 
  <link rel = 'stylesheet' href = "{% static 'main/css/main.css' %}">
  <link rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'>
  <link rel = 'stylesheey' href = "https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

style.css:

.grid-wrapper {
    display: grid;
    grid-template-columns: 1 fr;
    grid-template-rows: 1 fr;
    grid-template-areas: 'header header';
}

.circles {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

header {
    position: relative;
    width: 100%;
}

p {
    color: red;
    text-align: center;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
}

h1 {
    color: red;
}

Несколько раз изменял settings.py. Делал и по документации Django, и по видео-уроку. Удалял main в static и писал заново. Менял название css и html - файлов. Вне static всё работают. Изображения из static/img подключаются.

1
  • Мой ответ помог вам?
    – Timofey
    12 мая 2022 в 15:49

3 ответа 3

0

Измените файл settings.py таким образом:

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

А в файле html просто добавляйте main:

{% static 'main/css/style.css' %}

Конечно можно оставить так же как у вас и сделано, просто поменяйте везде с "{% static 'main/css/style.css' %}" на "{% static 'css/style.css' %}".

4
  • Если я меняют с "{% static 'main/css/style.css' %}" на "{% static 'css/style.css' %}", то все пропадает 6 мая 2022 в 14:42
  • Тогда измените по тому способу, который я указал выше
    – Timofey
    6 мая 2022 в 14:52
  • Css все равно не работает 6 мая 2022 в 16:11
  • css нужно подключать внутри тега head. Вот так вот должно быть: <head> <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> </head>
    – Timofey
    7 мая 2022 в 7:56
0

Что то подобное было. Джанго не видел ни css ни js. В итоге решил этот вопрос с помощью изменения подключения статики в settings.py Попробуйте этот код, я свой закоментил, вставил этот код и вуаля все мои изменения в статике заработали и все начало работать. Даже потом, когда я снова свой стандартный код раскоментил, а это подключение стаики убрал, все уже работало. Надеюсь поможет комуто. Мне так помогло. Отпишитесь кому поможет.

STATIC_URL = '/static/' STATICFILES_DIRS = ( 'static', ) STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

На сколько я понял, BASE_DIR дает нам каталог нашего проекта. Поэтому, когда мы делаете os.path.join(BASE_DIR, 'myproject/static'), это становится myproject/myproject/static. Или '/static'), надо указывать 'static/'),или попробуйте так '/').

Надеюсь поможет комуто. Мне так помогло. Отпишитесь кому поможет.

0

Здесь проблема в том, что твоя ссылка на твой css файл грузится перед ссылкой на бутстрап файл. переставь свой линк со своим css файлом в конец, и не забывай кликать в своем файле стилей ctrl + s, это так на всякий случай.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.