Why doesn't css styles apply to html correctly in django?-CodePudding

Only body styling work in django, I use static files to get css. I tried even commenting out body part css, but it still works, I don't know how, I don't know why, please help! (I've used collectstatic, so it's not because of that). I've inserted static_root and url and other things in setting to, but it didn't help either.

body{
    max-width: 1080px;
    margin: auto;
    background: #8D7D77;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* ----------------------------------------------NAV-BAR-UPPER------------------------------------------ */

.nav-bar{
    display: flex;
    flex-direction: row;
    padding-top: 20px;
}

.nav-bar img{
    max-width: 150px;
    margin-left: 20px;
}

.nav-bar ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    
}

.nav-bar ul li{
    margin-right: 15px;
}

.nav-bar ul a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    margin-left: 80px;
    padding: 10px 20px 10px 20px;
    border: solid 1px;
    border-radius: 10px;
}

.nav-bar ul a:hover{
    text-decoration: none;
    color: #8D7D77;
    background-color: white;
}

.search-bar{
    width: 600px;
    height: 40px;
    margin-top: 10px;
    margin-left: 50px;
    border-radius: 5px;
    border-width: 1px;
    border-color:  #C2B280;
    font-size: 110%;
}

.search-bar:focus{
    border-style:none;
}

{% load static %}
<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="stylesheet" href="{% static 'styles/main.css' %}" />
  <link rel="icon" href="{% static 'images/logomogo.png' %}" />
  <title>BookShelf</title>

</head>
<body>
    {% include 'navbar.html' %}

    {% block content %}

    {% endblock content %}

</body>
</html>

And here's navbar

{% load static%}
<header>
  <div >
    <a href="">
      <img src="{% static 'images/logo-white.png' %}" alt="BookShelf Logo" />
    </a>
    <input type="search"  placeholder="Search">
    <nav>
      <ul>
        <li><a href="">Login</a></li>
      </ul>
    </nav>
  </div>
</header>

  <div >
      <nav>
          <ul>
              <li><a href="main.html">Books</a></li>
              <li><a href="reviews-page.html">Reviews</a></li>
              <li><a href="">Users</a></li>
              <li><a href="">About</a></li>
          </ul>
      </nav>
  </div>

CodePudding user response：

In firefox and I think in chrome pressing F12 can show the console, then we can see if all .css files are loaded properly and what is the problem if they aren't. Can also pick elements and see what CSS styles are applied to them and where they come from. Django has a specific way of managing static files that may be misconfigured, if tags in the template work, then the problem is most likely in the static files.

Django will likely produce an error message in the console if it can't provide a static file.

In any case, we may need some code from the template to see what is happening. If configured properly it can load static files, without problems, but there are steps to it. (explained here https://docs.djangoproject.com/en/4.0/howto/static-files/

CodePudding user response：

Clearing cache helped, Thank you - 0sVoid.