-1

I'm using flask on atom editor to create a website. In the link I'm referring to the right path where the CSS file is placed, and still when I try loading the page I get it without CSS. I tried changing paths several times it still wouldn't work. After inspecting the web page I noticed an Error 404 file not found referring the CSS file, any ideas? Below is the code: 

<!DOCTYPE html>
<html>
  <head>
    <title>Flask App</title>
    <link rel="stylesheet"  href="/app4/css/main.css">
  </head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo">Ardit's web app </h1>
        <strong><nav>
          <ul class="menu">
            <li><a href="{{ url_for('home') }}" > Home</a></li>
            <li><a href="{{ url_for('about') }}" > About</a></li>
          </ul>
        </nav></strong>
      </div>
    </header>
    <div class ="container">
      {%block content%}
      {%endblock%}
    </div>
  </body>
  </html>

enter image description here

Georges Francis
  • 15
  • 4
  • put a period before /? – rguttersohn Jun 01 '20 at 18:04
  • How is your file directory hierarchy? – SMAKSS Jun 01 '20 at 18:06
  • 1
    A 404 Error means "Not Found" so you aren't referring to the right path. We've no way of telling what the right path is though. – Quentin Jun 01 '20 at 18:06
  • I just added a picture showing the hierarchy and distribution of my files. – Georges Francis Jun 01 '20 at 18:19
  • Have you tried `/css/main.css`? – j08691 Jun 01 '20 at 18:20
  • Visual Web Developer was an IDE created by Microsoft for use with ASP.NET. I don't see anything in your question about that product, so I've removed the tag. Please read the tag information that pops up as you type in the tags. – Heretic Monkey Jun 01 '20 at 18:21
  • A screenshot of your directory layout doesn't help much because we have no idea how your web server is translating that to URLs – Quentin Jun 01 '20 at 18:22
  • How to serve static files in flask https://stackoverflow.com/questions/20646822/how-to-serve-static-files-in-flask – doc-han Jun 01 '20 at 18:22
  • Even though you asume the path of your css file is correct, we'll need to know the path of the actual .HTML file calling that stylesheet to confirm if is correct. – Ken Jun 01 '20 at 18:30

2 Answers2

0

I failed to mention before that I'm using flask to create the website, and that I'm rendering an html template, sorry about that. The problem was solved after creating a static folder and placed the CSS file inside, after that in the link using the url_for function worked. I replaced: href="/app4/css/main.css with: href="{{url_for('static', filename='css/main.css')}}" and that did the trick. Thanks for the help.

Georges Francis
  • 15
  • 4
-1

While I don't know which directory is the root of the web server you are running this on (which has made it somewhat harder for me to give a specific answer with confidence that it is correct), you could try a relative path, like:

<link rel="stylesheet"  href="./app4/css/main.css"> <!-- '/' changed to './' -->

If the root of your server is the "app4" directory, then you could try 

<link rel="stylesheet"  href="/css/main.css"> <!-- '/app4' removed -->

I hope this helps.

Gabriel Romualdo
  • 235
  • 3
  • 9