I have a Chromebook and I am using the app: HTML Viewer with this app: http://drive-html-viewer.pansy.at/
This is the HTML file: https://shiftedit.net/edit#162629/0B94fPcefbkHSXzJpNFc5cmlWMnc
CSS files: https://shiftedit.net/edit#162629/0B94fPcefbkHSVmhVb0M5d2hrSTg
https://shiftedit.net/edit#162629/0B94fPcefbkHSN2o3c1I3WTd4ZG8
and the page shows up fine in basic HTML format but when I try to apply a CSS style sheet it doesnt recognize it ? this is part of the code with the stylesheet link:
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Scissors
</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="rps.css" />
</head>
<body>
help?
I was running into the same problem when opening an HTML file from within my Chromebook; the styles would not display. When I opened the same file from my PC, the styles would display just fine.
After a lot of searching I finally ran into this article that helped me figure it out. Basically, since the Chromebook files are in Google Drive, I needed to include a direct link to the file, even though my HTML and CSS files were stored in the same folder.
Did not work on Chromebook:
<link rel="stylesheet" href="style.css">
Worked on Chromebook:
<link rel="stylesheet" href="https://googledrive.com/host/put-the-fileID-here">
You can get a file's ID by right-clicking the file in Google Drive and selecting "Get Link". Copy everything that comes after "id=".
Never used HTML Viewer, but are you sure the path to those two css files are correct?
The solution is...
From a chromebook, open the Files App
Locate the index.html you wish to view
Double-click on the index.html file
The file will open in the Chrome browser
Copy all of the local address, except for "index.html"
Open/Edit index.html
Paste the local address into the "link" tag in the "head"
example:
link rel="stylesheet" type="text/css" href="externalfile:drive-6a0d36c37ed3c1d0c03bd5ca216484a83b9d68ae/root/CodedWebsite/style.css"
Hope this helps anyone in the future!
Related
So I've been creating a project on my localhost server for the first time using wamp (I've only coded html/css/js in repl.it before this) and for some reason, my css will not
stay on my page. When I try changing styles using my CSS file, it shows up when I refresh, but then very quickly disappears. The following pictures represent this (NOTE: I had to record and slow down the refresh just to see that it did change):
this appears right after refreshing
milliseconds later, the CSS no longer does anything
The following code is the link to the css in my html file (have some other script tags in there as well):
<html>
<head>
<title>Home Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap-icons.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="/PHP-Login-System/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
An image of directory tree (trying to link style.css with index.php):
directory tree
As far as I know, since my styling does show up for a brief moment, I don't think the error could be in my linking between the files, but I could be wrong. Any comments are appreciated.
Everything looks good to me, I think the problem is coming from wamp server, because like you said, your css styles is showing up and disappearing.
My advice is:
Uninstall wamp total , download a fresh copy from the internet.
Restart your computer, then reinstall the new copy you downloaded
I'm trying to add a Favicon to my Site.
This code works as expected
<head>
<link rel="icon" type="image/png" href="https://i.stack.imgur.com/YvjfT.png" sizes="16x16"/>
<title>home</title>
</head>
<body>
<h1>favicon png</h1>
</body>
and I got this
However, when I change the value of href
href="favicon.png"
my site doesn't load it any more.
my index.html and favicon.png are at the same directory.
What am I missing?
Open the source code of the "index.html" file in a tab and open the favicon.png from the code by clicking on it, and in another side open the favicon.png in another tab from the directory. And now compare both the URL, you will find difference.
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.
I've been experimenting with Twitter Bootstrap and have run into a problem I cannot resolve. Basically, I have a very simple HTML file (based on the beginning of this tutorial: http://www.sitepoint.com/understanding-twitter-bootstrap-3/ ) and I can open the file, but it is not loading the CSS.
I've tried this locally as well as from my web server and in both instances, the CSS does not load. This tutorial has some errors on where quotes go which I've fixed, but I've had the same problems with another tutorial.
index.html is located in the same folder as the CSS folder.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Please for the love of God help me before I destroy my Macbook.
Try using bootstrap.css instead of bootstrap.min.css. Also, make sure that it's in the correct path.
Another thing you can try as well is using media="all" instead of media="screen" in your link specifications.
Your javascript link tag for jQuery looks suspicious. Either give a relative path on your local directory, or the absolute path to an external url.
I had the same problem but it was unique, not sure if other had the same issue. I had "rel=" before the "href=". Just swapping the places, i.e. "href=" before "rel=" resolved the issue.
Thanks a ton for the correct syntax.
I followed below steps to load or apply Boostrap css.
first check bootstrap available in node_modules?
If you don't see, Install bootstrap with below command
npm i bootstrap
After installation successful, verfiy again boostrap in node_modules.
enter image description here
next open your project styles.css file and import below line.
#import '~bootstrap/dist/css/bootstrap.css';
when you upload the bootstrap files to your hosting, make sure to upload ALL the files even the .map files. I did that and it worked for me.
I had the same problem and I solved it.
open your file in windows notepad, choose save_as > Beside the Save button , open Encoding dropdown and choose UTF-8 !
my file was saved in Unicode Encoding.
I used windows notepad to save-as my file in a UTF-8 Encoding and the issue was gone.
you may also use notepad++ to change the encoding of a file.
good luck
I found this answer because it was the top google search yet I had this problem for a completely different reason.
For those who might have made the same mistake I have, remember to add
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
or some reference to another version of bootstrap so that your code knows where to get all the bootstrap related information
Sounds like this is just a simple directory issue.
You are saying you have the HTML file and the CSS file in the same folder right?
Then to load the file link it like this:
<link href="bootstrap.min.css" rel="stylesheet" media="all">
Else
If your css file is in a "css" folder then change the directory to:
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
If worse comes to worse use the external link instead for troubleshooting:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
I am using the latest updated version of Chrome.
I am trying out external CSS and images for the first time, the heirarchy works like this:
>parent folder
-index.html (html file uploaded)
>images
-file1.jpeg
-file2.jpeg
>css
-styles.css (css file)
When I go to test what I wrote, it's only showing the index.html folder with plain HTML despite using the proper link href="css/styles.css" and img src="images/file1.jpeg" tags. How do I include these external folders when testing website work?
Here is the head section of the index page
<head>
<title>West Coast Emirates</title>
<meta name ="description" content = "A look at Arsenal's 12/13 season in the Barclay's Premier League"/>
<link href="css/styles.css" type="text/css" rel="stylesheet"/>
</head>
I am opening the html file in a browser, no servers or anything just a word processor and chrome