I stored my index.css in my css folder but the pictures i put here is outside the css folder and is inside the pics folder. I tried ../pics/walp.png but it's not working.
I suggest you compare the complete directory trees of both the .CSS and .PNG files and also make sure you have the exact path of .PNG file mentioned in the .CSS.
You may have to check it from the command line (in terminal), to get the complete folder paths.
For each time you go back a folder you have to make sure you include
a ../ to represent going back a folder.
Make sure spelling and capitalization are also in check.
One other option is to see if you can use /pics/walp.png -
sometimes this works based on file structure and operating system (however, relative paths are always recommended if you can get it to work)
Also, it would help to see the code you are using to make sure its
not the code causing the problems instead of file paths.
Related
I want the path to the file to look like this: "/assets/style/home.css"
But even though VSCode recognizes this path, and takes me there when I click it, the CSS doesn't appear on the page. It only appears when the path has the two dots: "../assets/style/home.css"
Any ideas on how can I fix this? This is what the entire path looks like:
It's like that with every single path I use in this project, actually. I have to use the two dots for everything.
The "../" means that it is to return a directory, as your HTML file is inside the PAGES directory it is necessary to use the "../".
To call the css file like this "/assets/style/home.css" you need to move the assets folder into the PAGES folder
The "../" before the file path is used to move up one directory level. It seems that the HTML file linking to the CSS file is in a subdirectory and the CSS file is in a directory one level up. If you want to use the path "/assets/style/home.css" the file should be in the same directory as the HTML file or a subdirectory of the HTML file.
You could also consider using absolute path instead of relative path, it would work regardless of where the HTML file is.
Upvote if it helps.
Your code should work if RANDOMWEBSITE is the root folder of the web server.
It will work in VSCode if you open the folder RANDOMWEBSITE, but perhaps your webserver is configured to use a different root folder above your directory.
For example the root folder might be html, and your website is at html/RANDOMWEBSITE/. In this case it would look for the css file in html/assets/style/home.css, rather than html/RANDOMWEBSITE/assets/style/home.css.
Check what the root folder of the webserver is set to and reconfigure, or alternativly remove the RANDOMWEBSITE folder from your folder tree and work within the existing root folder.
You have to do that because .html is isn't "in the same line" as css. You can imagine that it's something like a crossroad if turn right but then you realise that you want to go left firstly you have to go back and than you can turn left. If you want do do "/assets/etc" you need to move you .html file to "randomwebsite/.html"
I am learning HTML and i am keeping my secondary websites in /subwebsites/website.html
/ is the root folder containing also index.html:
File structure
However, opening the subwebsites anywhere outside of the VSCode live server browser makes the subwebsites not be able to find any stylesheet, other .html file or image anymore. It works with the index.html, but as soon as the website is contained in a subfolder it won't work anymore. I am sure it has to do with the way my paths are set but i tried everything I know off:
styles/main.css
./styles/main.css
/styles/main.css
picture showing how i added my paths
Thanks for your help in advance.
In this case your html file need to go one level up. So for this you can easily use ../.
So just use this:
../styles/main.css ^_^
or
./../styles/main.css for your subwebsites.
But better to think to start use some kind of local server. For example, live-server for VSCode.
Also useful information for you:
/ - root of the current drive
./ - current directory
../ - parent of the current directory
you can use ~/styles/main.css or ../styles/main.css
../ is previous folder
~/ is root of server
The reason, may be server look for style inside this folder. And can't find it.
A picture is worth a thousand words so here it is;
Picture, I am confuesed
I do not know why it does not link up with my css file I have created, it is exact file path!
Can anyone please help me, I want to style my handlebars and I cannot!
Thanks
anything that starts with ./ is a relative path. It's relative to the current file path. As the error suggests, it is therefore looking for a styles folder inside views/layouts.
Use either
styles/styles.css
or
../../styles/styles.css
I am storing style sheets in {root}/styles while images in {root}/images for a website.
How do I give the path in the style sheets to go look in the images directory for the specified images?
e.g. In background-image: url('/images/bg.png');
Use .. to indicate the parent directory:
background-image: url('../images/bg.png');
Here is 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 sub directory and keep moving forward.
Click here for more details!
Use ../:
background-image: url('../images/bg.png');
You can use that as often as you want, e.g. ../../images/ or even at different positions, e.g. ../images/../images/../images/ (same as ../images/ of course)
In Chrome when you load a website from some HTTP server both absolute paths (e.g. /images/sth.png) and relative paths to some upper level directory (e.g. ../images/sth.png) work.
But!
When you load (in Chrome!) a HTML document from local filesystem you cannot access directories above current directory. I.e. you cannot access ../something/something.sth and changing relative path to absolute or anything else won't help.
If you store stylesheets/images in a folder so that multiple websites can use them, or you want to re-use the same files on another site on the same server, I have found that my browser/Apache does not allow me to go to any parent folder above the website root URL. This seems obvious for security reasons - one should not be able to browse around on the server any place other than the specified web folders.
Eg. does not work: www.mywebsite.com/../images
As a workaround, I use Symlinks:
Go to the directory of www.mywebsite.com
Run the command ln -s ../images images
Now www.mywebsite.com/images will point to www.mywebsite.com/../images
Supposing you have the following file structure:
-css
--index.css
-images
--image1.png
--image2.png
--image3.png
In CSS you can access image1, for example, using the line ../images/image1.png.
NOTE: If you are using Chrome, it may doesn't work and you will get an error that the file could not be found. I had the same problem, so I just deleted the entire cache history from chrome and it worked.
if you want to go to the root of the folder use / or ctrl+space
if you want to go to the back folder use ../ and ctrl+space if it dont suggest
and not use the live server if you use the ../
Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.