I have created
a static html page in a play 2.2.1 project.
My public folder looks like that:
These are my stylesheet links:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="assets/css/social-icons.css">
<link rel="stylesheet" href="assets/css/coming-soon-style.css">
However, when I open the site I only get the html.
I appreciate your answer!
UPDATE
My routes:
GET / controllers.Assets.at(path="/public", file="comingSoon.html")
GET /coming-soon_followUpPage.html controllers.Assets.at(path="/public", file="coming-soon_followUpPage.html")
Move all files/folders from /public/assets/ directory one level higher, so for an instance instead /public/assets/bootstrap it should be /public/bootstrap
As I can see you are using default route for assets, which means that every file/folder placed in /public folder will be available with assets/file or assets/folder within your templates.
If you are gonna to keep them in /public/assets/file.css style you just need to use proper path in your templates, ie.:
<link rel="stylesheet" href="assets/assets/bootstrap/css/bootstrap.min.css">
Anyway as you can see it doesn't make sense ;)
Hi you're linking in the wrong way your css files, you have :
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
With this you're searching on the same level the folder assets but that is the parent and you don't need to reference this then you only need:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
You also can try adding / at the begin of the path:
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
Related
i spent the last hour figuring out why my style sheet is working.
enter image description here
I tried every possible way, but none of it works.
It just shows error 404 when i check it in the developer mode of my browser.
I tried
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="./style.css" type="text/css" rel="stylesheet" />
<link href="../style.css" type="text/css" rel="stylesheet" />
<link href=".../style.css" type="text/css" rel="stylesheet" />
I also placed the the css file in the same file as my header.php.
The path to the css file is a relative path from the file that's called from the browser, and that's most likely not header.php.
If you start the path with a / it's considered relative to the webroot, so you probably want /css/style.css. Note that you cannot go up (using ../) from the webroot.
../ is meant to go back a folder so if my folder layout is
Root
css
style.css
includes
header.php
I have ho down a folder and enter the css folder like:
<link rel="stylesheet" href="../css/style.css">
You are using many link tag to integrate the css file in you html file. You should use one tag and it would be a relative path like the following <link rel="stylesheet" href="/css/style.css">
I need some help here.. I tried different links but it does not load the CSS file..
<link rel="stylesheet" type="text/css"
href="https://github.com/cengizkirazjs.github.io/cengizkiraz.github.io/styles.css">
This is the page and the outcome: https://cengizkirazjs.github.io/cengizkiraz.github.io/
Any advice? Its my first time linking CSS with HTML on Github!
As it was said in the comments, what do you think about changing file path a bit?
In your code we have this line
<link rel="stylesheet" type="text/css" href="cengizkiraz.github.io/styles.css">
It contains an absolute path. If you want to stick to this method, maybe just add a protocol, like this
<link rel="stylesheet" type="text/css" href="https://cengizkiraz.github.io/styles.css">
But it would be better if you use relative paths
In this case, our <link> will look like this
<link rel="stylesheet" type="text/css" href="styles.css">
It means that HTML will search for this file in folder, where .html file is saved. Looks slightly better, doesn't it?
I have separated some HTML files other than index.html and CSS too. It is working well in VS code but on creating Git Hub pages only index.html file is running.
Here is my repository:- https://github.com/shashi-singh18/BlogWritingSite
please help!
Change you links to the following structure
src='./css/utils.css'
Your current paths force your index.html to search for a sub-directory "BlogWritingSite" which does not exist at that reference level.
I saw your repository and noticed some errors when linking your css file in index.html
<link rel="stylesheet" href="/BlogWritingSite/css/utils.css">
<link rel="stylesheet" href="/BlogWritingSite/css/style.css">
<link rel="stylesheet" href="/BlogWritingSite/css/mobile.css">
change for
<link rel="stylesheet" href="./css/utils.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/mobile.css">
and
change the name of your css folder to lowercase letters
after
CSS
fixer
css
I think the error is in the address of the CSS files
Here, you should have given the address of each CSS file, relative to the index.html file and not the project directory as a whole
Try changing these link tags to this and tell me if it works.
<link rel="stylesheet" href="./CSS/utils.css">
<link rel="stylesheet" href="./CSS/style.css">
<link rel="stylesheet" href="./CSS/mobile.css">
I have a static website that is locally stored in the C drive: C:\site
I've now created a new site within IIS and pointed it to that location.
When I type 'localhost' in the browser, it pulls up the sites index.html
The issue is I've lost all CSS / JS / etc. and I assume this is because my paths aren't pointing to the right source. I have the same issue for links (hrefs).
Before connecting to IIS, my paths were as follows:
<link rel="stylesheet" type="text/css" href="C:/Site/css/MyFontsWebfontsKit.css" />
<link rel="stylesheet" type="text/css" href="C:/Site/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="C:/Site/css/style.css" />
<script type="text/javascript" src="C:/Site/scripts/jquery-1.12.3.min.js" ></script>
<script type="text/javascript" src="C:/Site/scripts/bootstrap.min.js" ></script>
I've tried looking around for answers, as well as trying some things such as:
<link rel="stylesheet" type="text/css" href="localhost/Site/css/style.css" />
OR:
<link rel="stylesheet" type="text/css" href="http://localhost/Site/css/style.css" />
But still no luck in seeing my CSS, JS, etc.
As for the links, they were working before IIS and looked like this:
About Us
I assume once I can achieve the correct paths for my CSS & JS I'll be able to figure out the links. Any help would be appreciated. Thanks!
If your folder structure is this:
css
style.css
index.html
Then the path css/style.css will always work from index.html, regardless of where it's hosted. You're hard-coding root paths in the references, so when the root path changes in any way it's going to break all the references.
Try:
<link rel="stylesheet" type="text/css" href="css/style.css" />
(With the same change applied to other references.)
You can always reference files relative to each other, but referencing them relative to the root requires a consistent root.
I am using Windows (7) trying to create an offline html page that should link to a separate CSS file located in same directory. I tried to use
<link rel="stylesheet" type="text/css" href="/styles.css" />
but no luck.
And I also want to import another css file named styles2.css within style.css. Didn't check yet but putting #import "style2.css"; on style.css may be not work as well. I can use absolute links like C:\Users\ELITEBOOK\Desktop\offline\style.css but it won't work if I move the folder anywhere else from Desktop. Any help? I mean, any code that calls/adds the link of the folder?
Use <link rel="stylesheet" type="text/css" href="./styles.css" /> instead. Note: href="/styles.css" changed to href="./styles.css", which is current directory of your script.
While the accepted answer is not wrong it's over-complicate things.
If your file is https://www.google.com/b/bananacream/bananas/index.html
<link rel="stylesheet" href="/style.css">
Will try to get https://www.google.com/style.css as the last / tells the file is located in the "root" folder.
<link rel="stylesheet" href="style.css">
Will try to get https://www.google.com/b/bananacream/bananas/style.css as nothing indicate what folder the file is located in it will use the same folder as the requesting file.
<link rel="stylesheet" href="./style.css">
Will try to get https://www.google.com/b/bananacream/bananas/style.css as ./ tell that the file is located in the same folder as the requesting file.
<link rel="stylesheet" href="../style.css">
Will try to get https://www.google.com/b/bananacream/style.css as ../ tell that the file is located in the previous folder as the requesting file.
<link rel="stylesheet" href="../../style.css">
Will try to get https://www.google.com/b/style.css as ../../ tell that the file is located in the folder two steps before as the requesting file.
A general complete answer:
to address through existing folder, use:
<link rel="stylesheet" href="./style.css">
to address through parent folder, use:
<link rel="stylesheet" href="../style.css">
to address through the internet( CDN ) use:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3./css/bootstrap-theme.min.css"
>
to address through your hard drive use:
<link rel="stylesheet" href='file:///C:/mystyles.css'>
try this one, it worked for me.
<link rel="stylesheet" href="./main.css">