Error 1689: Django struggles to locate and display static .css files, resulting in a 404 error

Why was Django able to load a static .png file but not the static .css file?

settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATE_DIR = os.path.join(BASE_DIR,"templates")
STATIC_DIR = os.path.join(BASE_DIR,"static")

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    STATIC_DIR,
]

CSS file

h1{
  color: red;
}

HTML

<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <meta charset="utf-8">
    <title>Django Guitar Page</title>
    <link rel="stylesheet" href="{% static "css/mysyle.css" %}"/>
  </head>
  <body>
    <<h1>Hi, this is text</h1>
    <img src="{% static "images/a_picture.png" %}" alt="Uh oh, didn't show">
  </body>
</html>

File Path

first_app/static/css/mystyle.css

first_app/static/css/images/a_picture.png

Answer №1

There's a typo in the spelling

Correction

{% load "staticfiles" %}
{% static "style/myfile.css" %}

should be changed to

{% load "staticfiles" %}
{% static "style/mystyle.css" %}

Answer №2

After making some adjustments, my configuration looked like this: ├───myapp │ ├───migrations │ ├───templates ├───static │ └───css | └───main.css └───myproject ├───templates └───registration

Surprisingly, this change resolved the issue I was facing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-ic ...

html - generating a block of code

Does anyone have any tips on creating a block like this one using CSS and HTML: Check out this image for reference I want to streamline the process and make it faster, any suggestions? ...

Getting the parent instance from the Inline model admin in Django

Is there a way to access the parent instance from within the inline model admin? I am looking to customize the has_add_permission function based on the status of the parent instance. I want to restrict the ability to add a child if the parent's statu ...

What could be the reason my dropdown menu is not appearing on hover?

Currently, I am in the process of developing a menu using angularJS and google app script within a dialog box. I have been referring to this sample code for guidance. Instead of pasting all my code here, I can summarize what I have come up with: var a ...

Troublesome display problem with photo gallery

I have encountered an issue with the image gallery in my HTML file. The images are displaying nicely, but on the second row, three of the images are slipping down. Here is a screenshot for reference: https://i.sstatic.net/YmPdv.png I attempted to address ...

Tips for positioning content within a div: Organize an image to the left, a header in the center, a description, and a link on the right

Can someone please help me with this HTML section on my webpage? I'm struggling to identify the CSS errors... <div id="publications"> <div id="singlepublication"> <div id="pubthumb"><a href="#"><img src="siteima ...

The toggle button requires two clicks to activate

I created a toggle button to display some navigation links on mobile screens, but it requires two clicks upon initial page load. After the first click, however, it functions correctly. How can I ensure that it operates properly from the start? Below is t ...

Add a sublime project with a specific directory path

Currently, I am using Sublime Text 2 for a project that is structured as follows: public vendors a.css b.css myfile.less myfile.css (compiled) I am facing an issue where I need to exclude the css files from the main 'public' folder (specifi ...

"Create a unique visual layout with CSS using a four-grid

When utilizing four div grids and increasing the content size of table 2, it causes table 3 to align with table 4, creating a large gap between tables 1 and 3. Is there a way to adjust the responsive content sizing for tables 1, 3, 5... and 2, 4, 6... in o ...

The operation malfunctions if the variable input is below 50, causing it to produce inaccurate results

The function "calcFinalTotal()" was created to calculate the post-tax discount on a purchase of items that were previously totaled and stored in an input tag with the ID of "totaltaxamount". This function applies a 10% discount to orders between $50 to $ ...

The resizing issue of Textarea during transitions

Whenever I add the transition property to a textarea, it automatically affects the resizing function of the textarea. Is it possible to disable the transition only when resizing the textarea, but not for the textarea itself? <textarea name="" id="" cla ...

What is the best way to make sure my navigation menu adapts to changes in my div size

Just curious, how can I make my navigation menu adjust its width to match the div box? Any help would be appreciated! If you'd like to see an example, here's a jsfiddle link: http://jsfiddle.net/AtM2Q/ Below is the code snippet: <html> & ...

What is the best way to adjust the placement of an Icon component when it is nested within a Tab component?

Incorporating MaterialUI's tabs into my React project has been quite a task. Here's the JSX code for the tabs: <AppBar color="default" position="static"> <Tabs indicatorColor="primary" textColor="primary" value={tabIndex} onChan ...

Using Sass to Loop through Specific Items

Currently, I am in the process of developing a SASS loop to iterate over a series of images (let's say 50). My goal is to increment the transition delay by 50ms for every nth-of-type image. However, it appears that the current for loop I have implemen ...

Creating a responsive navigation menu by converting overflowing menu items into a dropdown list

I'm currently designing a menu that contains multiple list items. I would like the overflowing li's to collapse and display in a dropdown when resizing the browser to smaller screens, such as laptops and tablets. Original Menu. https://i.sstatic ...

How can you use a Django QuerySet to filter for records that do not have a corresponding entry in a many-to-one relationship?

I am faced with a scenario involving two models structured as follows: class User(models.Model): email = models.EmailField() class Report(models.Model): user = models.ForeignKey(User) In reality, both models contain additional fields that are no ...

Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

I already know how to do this once. However, I would like the animation to restart or begin again when the user clicks on it a second time. Here is what I have: function animation() { document.getElementById('ExampleButton').className = &apo ...

What is the method to ensure an element is displayed in Selenium WebDriver?

Looking for assistance on how to choose options from a dropdown when the element is not visible and has a boolean attribute? Here's the HTML code snippet: <select id="visualizationId" style="width: 120px; display: none;" name="visualization"> & ...

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

Currently, I am developing an extension and using a template from a previous YouTube video that is based on manifest v2. However, I am implementing manifest v3 in my extension. Can anyone guide me on how to update this specific piece of code? "backgro ...

Align multiple elements in a responsive fixed container

I have been attempting to center multiple elements, including images and buttons, within a fixed div at the top of the screen. Despite trying various tricks I found online, none seem to be effective. My goal is to ensure that the alignment works seamlessly ...