I am having this issue here:
http://arflux-rpg.com/game/index.php
On line 5:
<link type="text/css" rel="stylesheet" href="/src/style.css">
The stylesheet exists (and is populated in correct syntax), I am linking correctly, and yet the styles fail to apply.
EDIT: Removed clickability of link as it's generating Google malware warning.
You actually mean to link to
<link type="text/css" rel="stylesheet" href="src/style.css">
Starting your url with / will treat it like an absolute path from your domain, without the slash it treats it as a relative path from the current directory.
Replace
<link type="text/css" rel="stylesheet" href="/src/style.css">
with
<link type="text/css" rel="stylesheet" href="../src/style.css"/>
Hope it helps
Your stylesheet may exist, but not under that path. Try to access it directly at http://arflux-rpg.com/style.css - you'll get a 404 Page Not Found error.
Check your path - you're specifying an absolute path with the leading /, so make sure the stylesheet is actually located in the "src" directory directly under your document root directory.
Related
I've run my css through a validator (nothing is wrong)
My header looks as following (with irrelevant pieces removed)
<head>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400&display=swap" rel="Stylesheet">
<title>Projekter</title>
<link rel="Stylesheet" href="Stylesheet.css">
</head>
and my stylesheet is named Stylesheet.css in the following folder hierachy
What could possibly be wrong here?
Please do tell me if I'm missing giving some relevant information.
The stylesheet call path is invalid.
The index.html file is in the HTML folder and Stylesheet.css is outside the HTML folder.
Please correct it as follows.
<link rel="stylesheet" href="../Stylesheet.css">
Chrome DevTools makes it easier to determine the cause.
I know this is a dumb question, but my Freemarker view isn't loading the css file, despite the fact that they in in the same package, in the resource. I've used the following links:
<link rel="stylesheet" type="text/css" href="absolute path here">
<link rel="stylesheet" type="text/css" href="/resource/views/styles.css">
<link rel="stylesheet" type="text/css" href="styles.css">
Is there a proper way to do this in an ftl file? I'd rather not have to code in the style on each page.
The CSS (and JavaScript) files are loaded by the browser. FreeMarker has nothing to do with it. The path you have in the href is resolved by the browser based on the URL you see in the address bar of the browser (unless you have a base element in the HTML head).
Last time I have worked with some Dropwizard project it used bootstrap.addBundle(new AssetsBundle()); in the Application.initialize method, and then there were src/main/resources/assets/whatever.css, and then in the template <link rel="stylesheet" href="assets/whatever.css"> or href="/assets/whatever.css">, depending on how the URL-s of you pages will look for the user.
// THIS WORKS ('contact' is the folder we're in)
<link rel="stylesheet" type="text/css" href="../contact/local.css">
// THESE DO NOT WORK (they point to a 'local.css' in the root directory)
<link rel="stylesheet" type="text/css" href="./local.css">
<link rel="stylesheet" type="text/css" href="local.css">
This is only an issue on 'localhost'. It works perfectly well on the web-server I'm using but for testing it would be nice if I can use './'.
I'm using Phpstorm with PHP Built-in Web Server.
This is a known issue for PHP Built-in Webserver.
Currently, the webserver processes the path without trailing / as a file even if it's a directory.
To fix this, please make sure you have a trailing forward slash in your URL.
E.g. Instead of http://localhost/folder, use http://localhost/folder/
I have a HTML file and a CSS file located in different directories in my PC.
in the head tag I use a link tag to reference my css file
<link href="C:\Users\UserName\Desktop\Web_testing\BGsample SS.css"
type="text/css" rel="stylesheet" />
this doesn't work
try using the file:/// protocol.
href='file:///C:\Users\UserName\Desktop\Web_testing\BGsample SS.css'
If that doesn't work (and you say it doesnt), then my guess is that it won't work at all due to it being prevented by security features in the browser.
It depends on where you are loading the main HTML content from, but if the main HTML is loaded from the internet then I can understand why the browser might object to loading the CSS from the client machine's local file system.
One final thing to try: You might try setting up a web server on your machine, putting the mystyles.css file into the web folder, and loading it into the page using:
href='http://localhost/mystyles.css'
I can't really suggest much else, I don't think.
Check your paths, Best practices is to always use a relative paths. Ex
If your stylesheet is called style.css the link should be:
<link rel="stylesheet" type="text/css" href="style.css" />
If you have the css file in a subdirectoy (and the subdirectory is called styledirectory) the link becomes:
<link rel="stylesheet" type="text/css" href="styledirectory/style.css" />
If the css file is in the parent directory of the html file the links becomes:
<link rel="stylesheet" type="text/css" href="../style.css" />
.. goes up 1 directory, if you need two you could do: ../../
Sample Folder structure
Assuming structure is like that then,
<link rel="stylesheet" type="text/css" href="styles/BGsampleSS.css" />
Name files without spaces too.
You should be using '../' to move back in your path, and then into the directory with the CSS file.
Please always follow the CSS External Style Sheet way. In your case the CSS file cannot be located. Try adding \ before SS.css
<link rel="stylesheet" type="text/css" href="C:\Users\UserName\Desktop\Web_testing\BGsample\SS.css">
This is the link: https://footballcoder.github.io/YearOfCode/projects/about.html (source code: https://github.com/FootballCoder/YearOfCode)
If you see in my repo, I have a folder called projects and in there I have my about.html, and a folder called css. I have a file in the css subfolder that is called about.css, which is the css for about.html. I don't know why the css isn't being used. Is it the way the file is being linked or some other error. The link from the HTML file is in the tags.
change this
<link rel="stylesheet" type="text/css" href="/projects/css/about.css">
to this
<link rel="stylesheet" type="text/css" href="./css/about.css">
I hope this article can help you
You refer to the link as such:
<link rel="stylesheet" type="text/css" href="/projects/css/about.css" />
See if the following edit (removing '/projects/') fixes the problem.
<link rel="stylesheet" type="text/css" href="css/about.css" />
This should work because it is linking the path starting at the serving html, aka about.html, not at the root of your site. Just tested it with Dev Tools in Chrome, and it looks like it works (and is super cool!)
Side note: if your fonts from Google aren't loading, move the custom CSS below those links in the head. I'm not sure if they are or not since I'm not familiar with them, but that will work if that is also an issue.