Reputation: 428
I have a bunch of folders on my desktop (working on a Mac) and I am trying to call various files into my style.css file and index.html files. Rather than trying to post a complicated explanation of all my directories/code, could someone please explain to me how calling files into my code works? How do file tree hiearchies work in adobe-brackets? For example, if I have three folders:
If my index file is in Folder A, and I want to call the cat image, do I write Folder A/ Images/ cat.jpg or do I only need to write Images / cat.jpg ?
And to call items outside of Folder A, so in Folders B and C, do I need to do anything in adobe-brackets in order for adobe-brackets to understand where these folders are located? As an example, I was trying to call my style.css sheet into my index.html file. I did so by simply writing Folder C/ MoreCode/ style.css. I also double clicked my style.css sheet to add it to my working file list in Brackets. However, my style sheet still was not being read by my html file.
Upvotes: 2
Views: 388
Reputation: 43
The directory structure works from the file(s) current location. For instance, if your index.html
file is in the following location:
Parent Folder/Folder A/Code/index.html
And you want to call the cat image, you would use the following path:
../Images/cat.jpg
../
- Move out of the current directory (Code), back to the previous
directory (Folder A).
Images/
- Look for a directory called Images.
cat.jpg
- Display the cat.jpg image.
Likewise, to load your stylesheet, you would need to move back two directories. Out of the current directory Code/
, then out of the Folder A/
directory, back to the Parent Folder/
directory. So you would use:
../../Folder C/MoreCode/style.css
I would also remove the whitespace from your directory names as this can cause issues, so instead of Parent Folder/Folder A/
, change it to ParentFolder/FolderA/
.
Upvotes: 1
Reputation: 33
<img src="picture.jpg">
picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg">
picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg">
picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg">
picture.jpg is located in the folder one level up from the current folder
To call your styles sheet since it is 2 levels down add the period period three times and then / then name of folder and your style sheet name.
Straight from W3schools: https://www.w3schools.com/html/html_filepaths.asp
Upvotes: 0