Unable to locate the CSS file

I'm struggling to link a stylesheet file to my 'base.html' template that is used throughout my entire project. Here's the path to the file I want to link:

C:\forum_project\static\main\css\style.css

Below is a code snippet from the 'base.html' in the head section.

<meta charset="UTF-8">
<title>Django Developers Forum</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{% static 'main/css/style.css' %}">

You can see that the last line attempts to link to this stylesheet.

When the browser tries to send a GET request for the stylesheet, I receive the following message in the console.

[16/Apr/2017 23:55:14] "GET /static/main/css/style.css/ HTTP/1.1" 404 1670

Any suggestions on what I might be doing wrong?

cssdjangostatic

Answer №1

Simply eliminate the last forward slash in the URL:

href="{% static 'main/css/style.css' %}

I recommend relocating the bootstrap and jquery inclusion tags within the body, positioned right before the closing body tag.

Answer №2

C:\website_project\layout\templates\base.html

C:\website_project\assets\css\style.css

Here is the code snippet to include the CSS file:

<link rel="stylesheet" type="text/css" href="../../assets/css/style.css">

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

Ways to reduce the width of a flex box

I am facing an issue with my main container where I have two items placed on the same line. Item 1 is an image linked to a URL and it should be positioned at the far left of the container. On the other hand, item 2 contains a font awesome icon that needs t ...

htmlcssfont-awesome

What could be the reason my black overlay doesn't show up when the button is clicked?

Attempting to craft a pop-up window on my own, I encountered an issue. Upon pressing the button, instead of the anticipated pop-up appearing and darkening the background below it, the entire page freezes with no sign of the pop-up box. If I eliminate the ...

javascriptjqueryhtmlcss

Is it recommended to keep static files in a dedicated S3 bucket while deploying using AWS Elastic Beanstalk?

I am currently running a Django app on AWS Elastic Beanstalk. The platform has created an S3 bucket to house the source code, versions, and other data. I have set up the S3 bucket to also store my static files. However, with each new code deployment, the ...

djangoamazon-web-servicesamazon-s3amazon-elastic-beanstalk

Issue with Ng-style not functioning properly when setting background color

I am struggling to set the background of an element using a configuration object with ng-style. For some unknown reason, I can't seem to make it work and I'm finding it really perplexing. The element I'm attempting to configure: <div id ...

javascripthtmlcssangularjsng-style

What is the best way to customize the lower border color of a collapsed Bootstrap navbar with an inverse design

Discussing this issue.. I am noticing two distinct colors. One is darker than the background shade and the other is lighter than the background shade. How can these be set? <nav class="navbar navbar-inverse"> <div class="container-fluid"> ...

csstwitter-bootstrap

Ensure text within list items is positioned properly and not obscured by any decorative elements

I'm struggling to create top-bottom borders for list items with customized decorations. The text of the element should not be hidden under the decoration even if it's too long. Any ideas on how to achieve this? div { width: 20%; } ul ...

htmlcss

Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...

cssnode.jsnpm

Invalid POST Request Triggering 400 Error in Django with Ajax Communication

I have been through numerous discussions on various forums about this issue, but I am unable to make my form submit successfully; it always results in a 400 (Bad Request) error in the console. I have tried everything I could think of at this point, too ma ...

jqueryajaxdjangodjango-formsdjango-views

Why won't my Twitter Bootstrap navigation bar apply the styles?

I am currently working on a Rails app (4.0) and have incorporated Bootstrap 3 into my project. Both bootstrap.css and bootstrap-theme.css are stored in the stylesheets directory, while bootstrap.js is located in the javascripts directory. Most of the Boots ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for finishing a row of images using CSS3

Here is the code snippet that I am currently working with: <div id="images" class="img"/> <img src="spiderman.png" alt=""/> <img src="superman.png" alt="" height="25%" width="25%"/> <img src="batman.png" alt="" /> </div> ...

javascripthtmlcss

Guide on shifting an element into a different one with the help of jQuery

I'm attempting to relocate an element within another in order to enable a css :hover effect. <ul> <li id="menu-item"> //move into here </li> </ul> <div class="tomove">...</div> 'tomove' is set to dis ...

javascriptjquerycss

The collapsible hamburger navbar is unresponsive and fails to collapse

Currently, I am working on a project that requires my navigation bar to be scaled down to a hamburger menu for mobile view. I have managed to do most of it, but for some reason, the navigation is not collapsing within the hamburger bar. I have been tweakin ...

jqueryhtmlcssresponsive-designhamburger-menu

Arrangement of cards in a column

As someone who is new to working with CSS, Wordpress, and similar technologies, I am seeking assistance. I am struggling with creating card layouts. My goal is to achieve a layout similar to this, where the cards are displayed in two columns instead of ju ...

htmlcsswordpresslayout

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Recently delving into the world of reactjs, I find myself facing a challenge with a page that contains 3 distinct blocks formed by divs. Have a look at the layout on my page: My Page This is the code snippet I have worked on: return ( <div> ...

javascripthtmlcssreactjs

Is it possible to overlay color on top of a div background? (i.e. modify div color without altering the 'background-color' property)

Can you apply a color "on top of" a div's background? I'm looking to change the displayed color of a div without altering the 'background-color' value. I need to keep the background-color for comparison when divs are clicked: var pick ...

javascriptjquerycsshtmlbackground-color

The navigation menu dissolves into hiding at the uppermost part of the page upon scrolling upwards on iOS devices

I am currently working on creating a navigation menu that will automatically hide when scrolling down and reappear when scrolling up. This functionality works perfectly fine on desktop and Android browsers, but I have encountered an issue specifically with ...

javascripthtmlioscsstwitter-bootstrap

horizontal menu consolidation

Web Design <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Online Hangout</title> <meta http-equiv="Content-Type" content="text ...

htmlcss

Steps for incorporating Bootstrap 5 pagination without using jQuery

Currently, I am working on incorporating pagination for cards using Bootstrap 5. My reference point is the following link: https://getbootstrap.com/docs/5.0/components/pagination/ While I can find the UI elements, I am struggling to come across a concrete ...

htmlcsspaginationbootstrap-5

Unable to see Bootstrap 5.2 Modals in action with documentation demo

Here is an example that I copied and pasted from the documentation on https://getbootstrap.com/docs/5.2/components/modal/: <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal&q ...

javascripthtmldjangobootstrap-5bootstrap5-modal

Tips for incorporating multiple classes in Material UI by utilizing the classes props

When using the css-in-js technique to apply classes to a react component, how can I add multiple classes? Below is an example of the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap&apo ...

cssreactjsmaterial-designmaterial-uijss