My pages in pretty basic html hold styling when kept in the root folder. Created a new folder for a group, but when I move pages to that folder they seem to lose connection to the css file.
Thought the problem might be the link since it now had to move up one folder. So I changed this:
link href="assets/css/readable/bootstrap.css" rel="stylesheet"
To this:
link href="http://www.example.com/assets/css/readable/bootstrap.css" rel="stylesheet"
but that changed nothing. Still page works fine in root folder, but not in /new folder.
Thank you for pointing out the basic premise I could be missing.
link href="/assets/css/readable/bootstrap.css" rel="stylesheet"
Add a / at the beginning of the path to refer to the Document Root instead of using a relative path.
Related
Icons not showing , So I've this problem.
I'm using some weather icons provided by erikflowers on github.
They are working and showing up fine when I've opened my app through the live server extension in Visual Studio Code. However, when I open my index.html manually from the folder, they are showing up as blank squares.
Anyone have any clue why this might be?
Thanks in advance
EDIT:
Directory:
<link rel="stylesheet" href="./weather-icons-wind.css">
<link rel="stylesheet" href="./weather-icons.css">
I did try changing to ./ no help
It says it can't find the files but they are there
Your pathing is wrong. As u wrote by urself in a comment -
"To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type ""<i class="wi wi-night-sleet""> "
You dont have a CSS directory.
Also look at your console error.
The route is wrong.. your Project Name is missing.
"../JavaScript/Projects/fonts/weather..", where is your Folder "Weather API"?
I would suggest to create a CSS folder (your styles.css stays in the project root), with your icon stylesheet files in it. That should fix your problems.
How are you accessing those icons? CDN? Or do you have them stored locally in some separate folder? Also, share your index.html and folder structure.
For example, you have them in a folder called icons, say a file called cloud.png. Then there are 2 ways to access them in your HTML file:
Using icons/cloud.png
Using ./icons/cloud.png
Both of these approaches work in Live Server, but sometimes we have to use the 2nd one when opening index.html directly or when hosting on Github Pages.
So try both of them and see which one works for you.
This is an academic query as I basically have things working two ways but surely one should fail. No? (Sorry I don't know why but I always struggle with paths and this has me flummoxed.)
I have just moved the HTML of three sections out of the main file and am now using an include.
Structure now is:
root - vendor - datepicker - dist -etc- datepicker.css
- beta - main.php
- static - date.inc
In the main.php file I used to have a
<link rel="stylesheet" href="../vendor/
bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
When I moved the link up to the .inc file in the static directory (one level up) I thought I should add an extra ../ but was not sure if the css would be called in the new file or in the main.php where the include is called. So I tested both
<link rel="stylesheet" href="../vendor/
bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
and
<link rel="stylesheet" href="../../vendor/
bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
BOTH worked. I inspected in chrome and then tried ../../../ and that worked fine too.
I thought the directory form of ../ meant down one from the current level.
To quote on page I just looked at:
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
I realize this is an idiot question and I know I have to sort out proper document paths at some stage but this has me completely confused.
the page you looked at is right ./ means from current working directory, and ../ means go up one directory, ../../ up 2 dir's and so on.. but what happens if 1 directory up is your root folder and you do a ../../? the answer is you'll still be in the root directory, you can only go so far up. this is precisely what happened to you check out your structure, "root - vendor - datepicker" I can elaborate further if you wish. I hope this helps.
So i was doing some basic formating to my html page using CSS, and when i ran it on netbeans nothing happened. I double checked the <link> on my html page and it was correct.
So kind of confused now I went to the folder where netbeans project is saved and copied the files to a new folder on the desktop. I made the same edits on my css file using notepad++, and then ran my index.html file (double clicked and it opened with browser) and viola, changes i made appeared. Has anyone else experienced this encounter? Why will it not work on netbeans? Am i missing a plugin or something?
The CSS file first need to be listed on the directory tree on the left side of Netbeans. If its not there, the program won't run the css file that you're trying to include in the html.
It'll also help if you put the
your_css.CSS
In a sub folder... e.g. Folder Name: CSS
and then have your CSS file in there.
Then you should have this to link the css to the HTML document
<link type="text/css" rel="stylesheet" href="directory/css.css">
I'm trying to add an external css file in my index.html.
Organization-name - codehunks
My directory structure is as:
codehunks.github.io
_layouts/
style.css
LICENSE.txt
README.rst
index.html
I tried adding it as:
<link rel="stylesheet" type="text/css" href="_layouts/styles.css"/>
but it didn't work.
I searched and get to know that raw.github.com/../.. doesn't work in case of css/text
I found some articles adding it by providing link as [username].github.io/[repo]/[folder]/[filname] but this didn't work for my organization.
I tried adding it as codehunks.github.com/codehunks.github.io/_layouts/style.css but the link is giving me 404 not found response.
Any possible solution or I'm following something wrong.
Here's my page codehunks.github.io and here's my code Source Code
your style will work at /styles.css if you put it in the root, _layout folder is used by jekyll/ruby.
create a css folder in the root of your repo and put the style in there.
/css/style.css instead.
I have a style sheet where I include background images.
background: url(../Images/myImage.png);
problem is, pages from different directories use this css!
My CSS files are in a CSS folder, images in an Image folder, and my html pages are in many different folders depending on their content and meaning to the website.
All my pages inherit this css as it is the MAIN theme.
The path used in the above example is a relative path. And obviously, this path only works for some of the pages. ALL i need is to link the images in the css from the ROOT folder. Therefore every path is correct no matter where the file is in the folder structure!
I have tried:
~/Images/myImage.png
./Images/myImage.png
/Images/myImage.png
Images/myImages.png
I don't think a root folder selector exists... but I hope it does :/
/Images/myImage.png
this has to be in root of your domain/subdomain
http://website.to/Images/myImage.png
and it will work
However, I think it would work like this, too
images
yourimage.png
styles
style.css
style.css:
body{
background: url(../images/yourimage.png);
}
click here for good explaination!
All you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backward and starts there
Starting with "../../" moves two directories backward and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
I use a relative path solution,
./../../../../../images/img.png
every ../ will take you one folder up towards the root. Hope this helps..
For example your directory is like this:
Desktop >
ProjectFolder >
index.html
css >
style.css
images >
img.png
You are at your style.css and you want to use img.png as a background-image, use this:
url("../images/img.png")
Works for me!
This problem that the "../" means step up (parent folder) link "../images/img.png" will not work because when you are using ajax like data passing to the web site from the server.
What you have to do is point the image location to root with "./" then the second folder (in this case the second folder is "images")
url("./images/img.png")
if you have folders like this
then you use url("./content/images/img.png"), remember your image will not visible in the editor window but when it passed to the browser using ajax it will display.
In the CSS all you have to do is put url(logical path to the image file)