I have a problem with relative file paths. I wrote this line:
<img src="\bootstrap\Rezepte\GrilledFruitKebab.jpg">
It's not showing the picture, so I wanted to ask if anyone of you can help me.
The whole file path is:
C:\Users\if160109\Downloads\bootstrap-20171222T093142Z-001\bootstrap\Rezepte
The file path of my HTML file:
C:\Users\if160109\Downloads\bootstrap-20171222T093142Z-001\bootstrap\startbootstrap-blog-post-gh-pages\index.html
(I'm working on Windows)
Thank you for reading
(Sry if I'm doing any mistakes, but this is the first questions I ever asked here)
Try, <img src="../../Rezepte/GrilledFruitKebab.jpg">
Remember,
Is the image in the same directory as the file referencing it?
Is the image in a directory below?
Is the image in a directory above?
By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example:
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 backwards and starts there
Starting with "../../" moves two directories backwards and starts
there (and so on...)
To move forward, just start with the first subdirectory and keep
moving forward
Given your directory structure, the correct path would be
../Rezepte/GrilledFruitKebab.jpg
Because the Rezepte directory is a level above where your html lives.
Try change the \ to / and remove the first /
Because this symbol in the first position will take the picture in your root folder. Or look the permission of the image.
You can see more about this here:
Here is all you need to know about relative file paths:
Quick Reminder About File Path
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
or HTML 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"
Here is the path I am working with - /public_html/websystems/websystems.css
The HTML file I am trying to link is in the public_html directory and named index.html
The CSS file I am trying to link is in the websystems directory and named websystems.css
The contents of the files are shown in the images below.
HTML file
CSS file
Why are none of the styles I've set in my CSS file applying to my HTML file?
Thanks for your help.
Try this,
websystems/websystems.css
Note that, (taken from Quick Reminder About File Paths)
Is the image in the same directory as the file referencing it?
Is the image in a directory below?
Is the image in a directory above?
By "below" and "above", I mean subdirectories and parent directories.
Relative file paths give us a way to travel in both directions. Take a
look at my primitive example:
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 backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
Change the /websystems/websystems.css to just websystems/websystems.css and see if that works. That's a path relative to the current path of index.html.
I have made a HTML website connected with a CSS.
body{
background-image: url("imag.jpg");
}
When I run my code, why wouldn't the image show up? As my background image. I have tripled checked all the spelling and the file format of my image.
Does anyone know why the background image won't show up?
The problem is your image is not on the CSS folder. If that line of code is in your style.css file, then its reading from that folder,
if the picture is in another folder then you go for example:
background-image: url("../img/imag.jpg");
Is the image in the same directory as the file referencing it?
Is the image in a directory below?
Is the image in a directory above?
By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example:
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 backwards and starts there
Starting with "../../" moves two directories backwards and starts
there (and so on...)
To move forward, just start with the first subdirectory and keep
moving forward
I am beginner in web designing. Please tell me what are differences between ../aa.css, ./aa.css and /aa.css links and their meaning in html.
is this effect to URL www.example.com/aa and www.example.com/aa/ deference
The ./ and ../ directories it's simple: . is current directory, .. is previous directory (parent directory) And / represent the root directory
For More understanding with folder/directory:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
Hope so it would be helpful !
You must use user friendly url for seo.
In user friendly seo, you must use slash before assets such as img css links etc
You should use /aa.css versus others.
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 ../