I am working on a remote instance using amazon ec2 instances and created an index.html file. In that HTML file, I have created links to an external CSS file which is in the same directory as my index.html file but when I try it out in chrome it doesn't seem to find the CSS file and gives me a 404 not found an error. I have tried doing the same thing on my local machine and it works just fine there. Am I missing something? How can I fix this issue? Any help is appreciated, thank you.
This is the part of the code i am confused with:
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" media="screen" href="signin.css">
</head>
Try the usual suspects:
1. Renaming your css file
2. Check if it works on you local machine. You've done that, so it's a server related issue.
3. Try absolute path for the css
4. Try other browsers, maybe it's just chrome
Related
I was working on a preview card component and when I uploaded my code to a repo to deploy it, github doesn't seem to load my css file style.
note: not my first time to deploy on github pages.
thanks in advance!
repo link: https://github.com/HanyAyad/Stats-preview-card-component-
live-website link on github pages: https://hanyayad.github.io/Stats-preview-card-component-/
same website deployed on netlify (working fine): https://62116b02da6915993f04d79c--suspicious-hypatia-156ece.netlify.app/
Maybe because the folder is CSS/styles.css and your declaration in index.html is css/styles.css?
I just tested here and when importing your CSS file, you are using
<link rel="stylesheet" href="css/style.css">
when you should be using
<link rel="stylesheet" href="CSS/style.css" >
URLs may be case-sensitive, it depends on what file system you are running your website.
Try renaming the folder CSS to css.
The directory in your repo is named CSS and not css as expected. So, please rename the directory.
It only works on Netlify because it doesn't take casing into account, for some reason. (That is, https://62116b02da6915993f04d79c--suspicious-hypatia-156ece.netlify.app/CsS/sTyLe.css works fine.)
im very new using html and css, my problem is that when I link my css file at the begin of the html, like this
<link type="text/css" href="../html/doc/ui.css" rel="stylesheet">
But when i try to execute the html file that i have inside my /var/www/html directory, there is no problem, the page is working, but when I run it on apache2, seems that its not detecting my css file
PD: Im using linux
Hope you all can help me!
I have configured an apache server with document root to public_html folder and i want to keep my css files in the above directory as following code
<head>
<meta charset="utf-8">
<title>Name</title>
<link rel="stylesheet" type="text/css" href="../css/login_page.css">
</head>
Using above code i am not getting style changes related to css but if i keep my css file in public_html folder and change it to
<link rel="stylesheet" type="text/css" href="login_page.css">
there seems no problem. I want to know how to make the first code work.
Maybe it's about cache? Have you tried clear cahce and reload the page?
To me it seams impossible, the apache server can only send the file in your public_html.(for security reasons)
More that the server side, your browser will request a file that it's not in the domain.
The only solution it's to be in your public_html.
Edit:
The only files that you work with were are above are php files of config files, apache will never work with files that are above the public_html
It's not clear enough for me, but if your problem is that css file in browser doesn't update when you edit it, the solution is to disable cache for your site
In any browser: devtools -> network -> disable cache checkbox example image
you cannot reference files, folders outside your public_html folder. Hence the name of the folder. It's by design and it would be a BIG security risk if this would be possible.
I am having a weird problem.
I am trying to build my github page site. So I am writing my html locally and then push it online to see it.
The problem is that Chrome doesn't recognize my css file when I am opening it locally. When I push the changers online or I am using another browser it work just fine
Here is how I import it on my index.html file:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
And when I go to the chrome dev tools
css have turned to chinese
Microsoft edge load the css file normally.
I have tried a couple of different things like:
Using another editor
Creating the file in different directory
trying different filenames
Clearing Chromes Cache
Nothing seems to work
I have loaded again a local a site like this and it worked fine.
Any ideas?
Make sure the file encoding is UTF-8. You can use iconv or just in your text editor > save as.
I am completely new to Digital Ocean. I have a Ubuntu droplet set up on digital ocean and am able to access my index.html file on port 80. My app is set up as a single page application using angular routing.
It loads the navbar and seems to be loading bootstrap...but both angular and my own css file are not loading. I initially thought it was a problem with my bower installing angular dependencies, but even just my local css file is not being attached. My css file is included with:
<link rel="stylesheet" href="css/style.css" type="text/css"/>
For some reason bootstrap seems to be working though:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Any tips or suggestions on what the problem might be? I'm completely lost.
The hrefs in all your links are set up to work in your local environment, but not on digital ocean. Bootstrap works because you are linking to an external url on a CDN.
You'll have to work through all the relative links in your hrefs. There are numerous approaches to this, including embedding the entire server path.
I'm not certain but it might be enough to replace href="css/style.css" with href="/css/style.css" to get a root relative path.
You should first load your styles to Digital Ocean and link to them.
Here - href="css/style.css" - you use local path, which you have to replace with a URL of file on virtual machine.