I am creating my first project in web application using python flask.
Now I'm working with my html, but my css is not linking to my html when running with flask.
code when linking the css:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main_layout.css')}}">
file directory:
Project
├───static
├───main_layout.css
└───templates
├───layout.html
├───main.py
Try this:
filename=‘../static/main_layout.css’
It looks like you are looking for the file in the same directory as the html file. You need to back out one directory and move into the static folder with the link above.
Related
I am building a web project at Eclipse in Java. I wrote a simple HTML and CSS files but I can't see how to link them and I can't spot the problem.
<link rel="stylesheet" type="text/css" href="css/AdminOptionCss.css" >
My files are located here:
you have to give a relative path of that css file , it means that :
your HTML's are in html folder , but your CSS's are not in html folder but your are trying to load them from html folder!
what you need to do is, go a step backward in directory by using ../ and continue pathing, something like this :
<link rel="stylesheet" href="../css/AdminOptionCss.css" >
Try to do like this
<link rel="stylesheet" type="text/css" href="../css/AdminOptionCss.css" >
../ help you to navigate out of html location path , and after go to css and so on
Change your Eclipse view to "Navigator" to see the real file path and use a relative path, like href="../css/AdminOptionCss.css" in your link tag.
I have Index.cshtml file and I want to include login.css file there. Index.cshtml lives on Views/Home. I created login.css file in Views/Home/css folder. Here is how I linked it on Index.cshtml:
<link href="css/login.css" rel="stylesheet" type="text/css">
But it doesn't work. When I writes styles inside Index.cshtml, it works perfectly. Where I made a mistake?
Typically you would not put your css in the Views folder. This would belong at the root of the website project(wwwroot). This way you would reference your external styles like this:
<link href="~/css/login.css" rel="stylesheet" type="text/css">
You can juste drags you file css file into yous cshtml file and VS to the work for u
I have made a .css file for a html i'm using in a dynamic web project. The css implementation clearly works because if i run the tomcat server from the html i can clearly see the css effect but if i run it from the main project it opens the same html page but without the css effect. How am i supposed to fix this? Do i have to write something into the web.xml file ?
This is the link tag in the html file
<link rel="stylesheet" type="text/css" href="style.css"/>
Am i supposed to add something else ?
it depends on location of css file. Your path will if css is in same folder as html/jsp file. If it is in sub folder in webcontent folder then use href="foldername/filename" if its in root folder then href="../foldername/filename"
I am very new to CSS.
I am putting the following line in the header of my html, but CSS doesn't load:
<link type="text/css" rel="stylesheet" href="static/main.css" />
Basically my HTML doesn't see the CSS file. I am probably missing a very obvious point. My CSS file is in the "static" folder of my project and my HTML file is in the "templates" folder.
While writing this, I realized that I might be directing to the wrong path, but changing it to "../static/main.css" didn't help either.
Should I use SRC instead of HREF, when using this locally? Or is it something completely different?
Thank you for your help!
UPDATED:
The project tree is as follows:
|____.gitignore
|____app.yaml
|____appblog.py
|____appblog.pyc
|____README.md
|____static
| |____main.css
|____templates
| |____front.html
| |____newpost.html
I am linking to main.css from inside my front.html
You are giving the wrong route to the CSS file. It is currently looking for the file in templates/static/main.css, which doesn't exist. You need to add ../ to back out of the templates directory, and then head to the static directory.
Example:
<link rel="stylesheet" type="text/css" href="../static/main.css">
If the directory structure is in your root directory, you could also link relative to root by adding /. This will start in the root directory, and then look for the static directory.
Example:
<link rel="stylesheet" type="text/css" href="/static/main.css">
Also, make sure you are adding that in the head of the document.
The answer was somewhere else:
I am using Google App Engine for the app development and I should've included the following under -handlers:
- url: /static
static_dir: static
Thank you for all your helps.
Chrome browser: Open developer tool (F12) and look at right top of the panel, or click "Console" tab, if the develper tool console return Not found error with your main.css file then check your css path. You can try to locate html file and css file in one directory and then change link tag to
Can you show me how did you open the html file? direct click on the html or browse through webserver project?
I have 2 folders, 1 named template where my index.html is. The other is named static where my main.css file is. I used the following code to access my css file from index.html but i got a 404 error. I'm using google app engine in python.
<link rel="stylesheet" href="../static/main.css" type="text/css">
If these folders are at the application root you could try using a url like below.
<link rel="stylesheet" href="/static/main.css" type="text/css">
try giving full path e.g
C:\xampp\htdocs\yourFolder\static\main.css