I had a CSS and a HTML file in the same folder on the desktop. Earlier <link rel="stylesheet" type="text/css" href="style.css" /> was working fine. Now I've made two folders HTML and CSS to separate the files. So, now I use <link rel="stylesheet" type="text/css" href="/CSS/style.css" />. It works perfectly fine on Live Server in VS Code but when I open index.html normally in a browser, the CSS file does not link, neither do the images which are in the img folder now. I've tried href = "./CSS/style.css", href="/style.css". It works ONLY IN LIVE SERVER!!! HELP!
Let's say you have one main directory that has three sub-directories
-MainDirectory
-HTML
-CSS
-Images
Now each file lives inside it's directory...
-MainDirectory
-HTML
-index.html
-CSS
-style.css
-Images
image1.jpg
image2.jpg
The path for accessing the site is MainDirectory/HTML/index.html
Now, the main file (index.html) needs to use the stylesheet placed in MainDirectory/CSS and the way to achieve this is by manipulating the path to go one directory backwards and from there navigate to css so the code would look like this
<link rel="stylesheet" type="text/css" href="../CSS/style.css" />
What the code does now is that it navigates from HTML to MainDirectory and from there it goes to CSS where it reads the data written in style.css.
The same happens with the images, if you want to access an image you will have to pull the data from ../Images/image1.jpg"
Another way to navigate through the directories is to use a slash / as a starting point so for an example if you are using MainDirectory as your starting point, you can also access the stylesheet like this /CSS/style.css... This tells the code to start from the very first folder that exists in this path (in our case it is MainDirectory) and from there navigate to where you need to go...
Understand this by creating hyperlinks...
Hover Me!
Place this code in your index.html, then open index.html in your browser and hover over the link.
The path to where this clickable item goes will show in the bottom-left corner of the browser and by being able to see the path you can easily manipulate it... You can see it's starting point and see if you need to go a directory up or not, you can see where you are and where you need to go, play with it, change it until you understand the logic behind it
Related
I have a website with a multiple pages some of which are in a seperate directory. However, I can't seem to link pages in one directory to a css file in a separate directory.
I have tried the pasting entire directory and css/main.css.
//Here is the folder/directory structure of my project
home.html
css
--main.css
lines
--M51.html
--M50.html
--M53.html
Here is the HTML code I use to reference to the css in html file M51.html or any file in lines folder/directory:
< link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
When testing the html page in lines folder(M51 or M52 or M53), I see css is not applied and error "cannot resolve file css/main.css". How can I resolve this error?
It works fine on home.html but not on those inside the "lines" directory.
Since you have Css files stored in a different directory. Make sure you use relative file path to include css in the HTML:
<link rel="stylesheet" type="text/css" href="../css/main.css" media="screen" />
A relative file path points to a file relative to the current page.
Best Practice
It is best practice to use relative file paths (if
possible).
When using relative file paths, your web pages will not be bound to
your current base URL. All links will work on your own computer
(localhost) as well as on your current public domain and your future
public domains.
Copying an answer from the comments because it is the right answer:
Reference the file using this:
../css/main.css
for files in the "lines" directory (map). The two dots go up one level, where the "css" directory(map) is located relative to the current folder. Use the Relative Path for the external CSS file.
I have a style.css and a html files.
When I upload them to the server I see the headlines in the style I want but on my desktop I don't.
Both of my files are on the desktop
On the <head> I have this line in my html file:
<link rel="stylesheet" href="/style.css">
What can I do to connect the files and see the style applied when I'm offline working on my desktop? and also online in my website
i want to add i just removed the / and it works offline on my desktop (just href="style.css") but not online - but i want to be able to see it both online and both offline ---- and online its not in the same file
** edit : now i see that what works on both is if i put my spesific website adress - than it works on both online and offline :
but if i will want to ever change my website adress it would be hard to change on each page thats why i want it to be : href="/style.css and not the website adress
If you are working locally without a webserver you need to link your css files like this:
<!-- Windows -->
<link rel="stylesheet" href="C:\Path\to\File\main.css">
<!-- Linux & Stuff -->
<link rel="stylesheet" href="/path/to/file/main.css">
Additionally you could use the relative path to your file:
<!-- if it's in the same folder -->
<link rel="stylesheet" href="main.css">
<!-- if it's in the css folder -->
<link rel="stylesheet" href="css/main.css">
<!-- if it's in the parent folder -->
<link rel="stylesheet" href="../main.css">
your question is still not clear, but generally, your question seems to be based on the linking of the style sheet with your HTML file to see the results of your code on your personal laptop and the server both. The best practice to do that is to maintain a file structure which keeps the project organized, for example, there is a folder named "main" which is my project folder which further contains your subfolders like CSS and js, and inside these folders, you should keep your CSS and js files respectively.
A simple project file structure is,
main
|
|-css
|-style.css
|-js
|-script.js
|-file.html
If you follow the file structure to link your files, you won't go wrong, it doesn't matter whether you are on your personal desktop or on the server.
One thing i understood is that when you are working locally you have html files and the css file on the desktop. First of all i would recommend you to make a new folder and copy all your related files whether it be html files, css files or js files in that folder. It is a better way to encapsulate all your project files in a single folder.
Moving on to the css issue - you said that it works when you remove /. It works because since your files are all on desktop they are on same directory structure.
Enough for clarification I want you to follow these steps:-
First make a folder and copy your html files, css files and js files in it. Lets name the folder as website.
Create a folder named css inside the website folder. Copy all the css files in that css folder.
Inside your html files, inside the write <link rel="stylesheet" href="css/style.css"> provided that the name of css file is style.css and you want to include this particular file in your html.
And regarding your online issue, I am not able to understand it. If you clarify a bit more i may be able to help.
Your files should have the same relative path on your desktop and server, so that you can use that same relative path for both. The relative path is based on the location of your HTML file in both.
If you have a folder on your desktop that has 2 files:
index.html
style.css
Inside of index.html, you'll reference your stylesheet using <link rel="stylesheet" href="style.css">
If you have a folder on your desktop that has 1 file and 1 folder containing a file:
index.html
css/ (contains file: style.css)
Inside of index.html, you'll reference your stylesheet using <link rel="stylesheet" href="css/style.css">
Since you said that <link rel="stylesheet" href="style.css"> works correctly on your server, that means that your HTML and CSS files are contained in the same parent folder. On your local, you need to make sure that the same is true. That parent folder can be located anywhere - Documents, Desktop, a random subfolder - but as long as it contains that HTML file and that CSS file (and neither of them are nested in another contained folder), that <link rel="stylesheet" href="style.css"> will work for both.
Note: You can change the folder structure of either server or desktop, or both - but the relative paths must match, so that your relative link works for both.
give like this
<link rel="stylesheet" href="style.css">
I'm pretty much new to all of this and for the past days I've been working on my first Website using bootstrap. Locally, this works fine, but right now, when trying to get it up online, it looks like this:
http://wearemanjaro.de
Just ugly html, no css nor any images are loading.
I made the link above link to the html which is in the /manjarowebsitebootrap/robots/index.html path. The CSS (bootstrap and custom) is in the following directory: /manjarowebsitebootstrap/css/...
The link to CSS in my html looks like the following:
<link rel="stylesheet" type="text/css" href="../css/custom.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
Same problem with the images in my ../img folder. It all works fine locally. I'd really love some help or advice :)
First thing you need to do is use an absolute instead of a relative path.
if your directory structure is:
-root
--docs
---doc1.php
--includes
---header.php
---footer.php
---css.css
--index.php
In your header, you link to my CSS file like so:
<link href="includes/styling.css" type="text/css" rel="stylesheet" />
you need to do like this :
<link rel="stylesheet" type="text/css" href="/root/includes/css.css" />
You also need to use developer tools on chrome that will help you to debug these things.
I saw there that the images are not uploaded so once you able to upload them you will start getting them on the Website if the path is correct.
and best of luck for the new world of web development.:)
Your file structure has changed from local to online/live. I inspected your page, placed in the CDN for Bootstrap and pow, the styling came alive.
Use the following CDN to replace your current src='' path for bootstarp in your html head to see what I mean.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
The next steps you should take: make note of where all your files are living on your server, you must place all associated files on the server, as specified by your code, i.e shows that you have a CSS folder.
Also is this HTML file located at the same level as the CSS folder or does this HTML file live in a folder of its own. If not your paths do not need to include the ../ portion and you should use just css/yourFileName.css
There is my problem:
Since I had some organization issues with my website, I wanted to arrange my files to a better classification.
Now, the folder tree looks like:
www
ressources
images
...
css
design.css
mypage1
index.html
mypage2
index.html
index.html
And now I don't know how to link the css file to the pages stored in a folder like the "mypage1" folder.
To start from my C: drive will will produce path errors once online, I tried the "shortcuts to the css file in each folder" solution too, but I think there is a far better way to proceed.
Need some help!
Thanks again!
use the link:
<link type="text/css" rel="stylesheet" href="../ressources/css/design.css">
here, used ../ going back folder..
You can use:
<link rel="stylesheet" href="../ressources/css/design.css" type="text/css" media="all">
The .. will go one directory top. Since the html files are in a directory (like mypage1), this will go to the parent directory, which is www. Then the next that should be done is to pass the directory path to your CSS file, which in your case is /ressources/css/design.css.
I am attempting to use Bootstrap; I am downloading example pages to build off of from the Bootstrap website. When I launch them, however, they look quite crummy in my Chrome browser.
For example, when I load the narrow-jumbotron page, the jumbotron spans the entire screen... What am I doing wrong? I have the css, js, and font folders inside the folder that I've saved the narrow-jumbotron.html page in.
Any help would be much appreciated.
Please check the source url or path of the css and other files. Possibly this is creating problem.
Firstly ensure that you have downloaded bootstrap.min.css and jumbotron-narrow.css.
Place them in the folder you are having the html file.
After that find the following 2 statements in your html file.
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
Replace them with these lines:
<link href="bootstrap.min.css" rel="stylesheet">
<link href="jumbotron-narrow.css" rel="stylesheet">
It looks like it's probably is a path issue. When you download the original bootstrap framework, you'll have a /css and a /js directory. How your new html files get access to those places depends on where you put those directories. I'm going to assume you have some bootstrap test area. Let's just call this your main bootstrap area or core file area, whatever.
After you set that up, you probably went back for the other download which has the /examples directory buried within it. The files in there are set up to deal with being a few directory levels down. When you went into the /examples directory folder, did you copy over the whole /examples branch? Or just one set of the example files?
Let's try this just as one example just to try to get things working. Then once you get it working if you want to mess with directory / folder organization and file paths, that's fine.
Go find the examples/theme directory, wherever you put it. In this /theme directory rename index.html to theme.html
Take the theme.html and theme.css out of your /examples/theme directory and put them in the root directory of wherever you have your bootstrap's root index.html file. Now your file paths to CSS files and such should be set to match what the index.html file is doing.
Go into the theme.html file and look for the lines with the ../../dist/css/ as suggested earlier.
But make them look like this... "css/bootstrap-theme.min.css"
This should now have these files getting called from the correct places. This alone should work for you.
There's still one issue though. You'll see in the theme.html file a link to "../../assets/js/ie-emulation-modes-warning.js"
You could just ignore this, but to really have things all in order, you need to get that path right. So, go find your original download of the examples and get the whole /assets folder and sub-folders copied into wherever you have your bootstrap root; that is /assets should be at the same level as /css and /js.
Once again then, fix the link to look like this "assets/js/ie-emulation-modes-warning.js"
This will hopefully get you going and give you a clear and obvious sense of how the file paths work. If you like going forward, put things into better directory / folder structures and re-do the paths. Remember if you wanted to on a real web server, (local or remote), you can always use virtual paths from the root so you don't have to keep track of the levels everyplace for such files.
In any case, I did just test this and ideally it will work for you as well.
Just place bootstrap.min.css and bootstrap.min.js in the same folder as carousel folder for example.
Then fix the path of the js file to this:
<script src="bootstrap.min.js"></script>
And fix the path of the css file to this:
<link href="bootstrap.min.css" rel="stylesheet">
Try to delete "integrity" part
Instead of this:
<link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Make:
<link href="css/bootstrap.min.css" rel="stylesheet">
As integrity attribute checks whether code was changed.
That might help.
As of 2022 and the BootStrap version v5.2 the way to fix it is to copy paste the bootstrap.min.css file you get when you download the ready-to-use compiled code to the example folder you want it in and then change these lines from
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
TO
<link href="bootstrap.min.css" rel="stylesheet">
This must do the trick