I'm currently learning to use yootheme's uikit. I'm currently running it off of Apache 2.4.16 on my Mac, but the index.html page won't bring up the main uikit.css (or any css) buried two or more folder levels deep (as all the css files within uikit's directory are).
Here is my folder structure:
MainSiteFolder
index.html
uikit/
css/
uikit.css
fonts/
js/
And here is the line I included in the head of index.html (copied and pasted):
<link rel="stylesheet" href="uikit/css/uikit.css" />
If I pull out that css file and put it in any other folder I create (or the root directory), I can change the reference to "otherFolder/uikit.css" and it works perfectly... but I'd like to be able to keep things organized within multiple folders until I nail down which of the many uikit css files I plan to use.
Is there something I've missed that removes my ability to load css files that are more than one folder lever deep? Or do I need to just put everything into one css folder, despite the loss of convenience organization would bring?
EDIT: Must have been something strange with my browser (or Apache?) not realizing there were files in the folder. I don't know the reason, but removing the entire folder, and recreating it inside the directory, then uploading the files individually got it working. Though it still baffles me why it didn't work in the first place. Some sort of missing reference or something perhaps.
Use:
../
To go to a higher directory, like:
href="../uikit/css/uikit.css"
To go 'up' one level of directories. ../../ goes up 2 levels, and so on ...
Alternatively , start at the root directory, in Windows it is C: not sure what it would be on your system, but something followed by a :
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.
I'm new and don't really know how to phrase my question.
so in VSCode I'm trying to learn how to organize my files better.
I created new folders called Views, Styles and Img. Then I moved my loginform.html files into views, loginform.css into styles and the pictures into Img folder.
Now that means since I moved the html, css and images into views, styles and img folders I need to rewrite or reassign the code path in the html for any images or css links.
For ex the html file with img tag now reads (I added the Img folder path)
But the ouput still is giving me a 404 message and the html is not loading
What are all the steps I need within the html and css files to take when I move files into new folders. Sorry for the long explanation, I couldn't think of a way to shorten it lol
From what i understand your arborescence looks like this :
root
|Views/
|----loginform.html
|Styles/
|----loginform.css
|Img/
|----image1.jpg
|----image2.jpg
If you want to refer to loginform.css from loginform.html, you'll need to write :
href="../Styles/loginform.css"
Notice the "../" at the beginning, which means "get out of the 'Views' folder and then go to styles/loginform.css". You can even combine multiple ../ , for example "../../../" goes 3 parent folders back.
Your mistake, with href="Styles/loginform.css", is that there are no folder named "Styles" in your Views folder (where your HTML is sitting). You first need to get out of the Views folder.
After finishing my website locally using HTML5, SASS (Koala for compiling) and a bit of jQuery, I uploaded it to GitHub and hosted it on git pages. Everything works flawlessly except that my background images are not showing up. Using the 'Inspect element' I found out that deleting one '../' from the URL specified for the img file background-image: URL("../../img/background.jpg"), solves the problem and the background image is shown.
The thing that confuses me is that I uploaded the structure from my PC straight to Github without modifying anything. Plus, I checked the structure of the project in my repo and it doesn't make sense that the background-image shows after deleting one '../' because there are two folders that you have to get out of to reach the image.
This just doesn't make sense. Can anyone explain what is happening?
P.S. Basic representation of my project structure:
index.html
folder: img
folder: sass
research-pages
SASS FILE
Inside this folder is my specific sass file where I type my styling.
You have to go up two folders to reach the img folder where my background.jpg is located.
edit: With your file structure, just one ../ should take you to the sass folder. But on GitHub, perhaps their directory structuring method is more forgiving than the 'correct' way (perhaps ../ means both the parent folder and the parent folder level).
Some other possibilities: maybe things somehow got moved around or arent' uploading the way you think they are during your git add/commit/push, or possibly I'm interpreting your file structure incorrectly, or maybe you're mistaken with what you are seeing (though I tend to believe you - I will test this myself soon). Can you send us a link to your gh-pages repo?
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.