I'm getting this strange behavior using relative paths on a directory with DirectoryIndex.
This is the directory structure:
/project/index.html
/project/css/main.css
/project/scripts/site.js
When I load the index.html file using this path:
www.mydomain.com/project/index.html
Everything loads just fine.
When I load like this:
www.mydomain.com/project/
First, the ending slash gets removed, second, the browser is looking for the CSS/JS at:
www.mydomain.com/css/main.css
www.mydomain.com/scripts/site.js
Which is obviously wrong.
I'm referencing the assets like this
<link rel="stylesheet" type="text/css" media="all" href="styles/main.css" />
I also tried adding "./" and same results.
Why is this happening? I'm still new to Apache configs so I'm not sure what I'm missing.
I don't want to use ../css/main.css to reference the assets because if somebody lands on the index.html file directly, then the assets won't load.
I'm pretty sure it's a dumb problem I'm over thinking.
Thanks.
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 two folders. One called app, which contains index.html, sass, img. And second build with folders: css, js. What path should I type in index.html to access the style.css file, which is in build/css/style.css ? I tried this, but it doesn't work.
<link rel="stylesheet" type="text/css" href"build/css/style.css">
Your css and js folders should be in same directory as the app where index.html is then try css/style.css
<link href="css/style.css" rel="stylesheet">
So app, which contains index.html, sass, img , should now also contain js and css folder. Then it should definitely work.
If keeping the file directory as is, you should understand.
*Starting with / returns to the root directory and starts there then ../ moves one directory backwards and starts there and so on ../../. In that case
<link href="../build/css/style.css" rel="stylesheet"> should work.
Include this in your html file:-
<link rel="stylesheet" type="text/css" href="../css/style.css">
If your both folder 'app' and 'build' are siblings then use this
<link rel="stylesheet" type="text/css" href="../build/css/style.css">
You should change it become
<link rel="stylesheet" type="text/css" href"../build/css/style.css">
Your index.html is on "app" folder and the css is on "another folder" which have the same path with "app" folder. So you need to get out from the "app" folder first with "../" then redirect it into your destination folder. If you need to get out from current folder you're in twice it'll be like "../../your/destination/folder" and coulde be more.
<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
Relative path is relative to the file where you put the reference. Here in your case, style.css is in build/ folder which is next to app folder that covers index.html. So if you want to make a reference to style.css from within index.html, usually you should use the relative path ../build/css/style.css.
But make sure the css file is really reachable. It depends on whether you are using a web server, what web server you are using, and what is the starting point from which you run your project.
If you simply open index.html by clicking the file from file explorer, then you can use this to make style.css work:
<link rel="stylesheet" href="../build/css/style.css">
However the above method is not recommended. Normally you will want to make use of a web server to serve such static files like js, css.
I would recommend you to try lite-server which is a light weighted web server let allow you to do local development and checkout what you've been done immediately by visiting something like http://localhost:8000.
When you are using a web server to serve static files, make sure you start running it with a starting point that already covers app and build folders (such that all of the files you want are reachable), for instance, with the parent folder of those 2 folders. If so, when you want to open index.html, you are going to visit something like http://localhost:8000/app/index.html (Because index.html lies under app/ folder, you need to add the "app/"). When this layout is applied, you have at lease 2 ways to insert the css lines:
<link rel="stylesheet" type="text/css" href="../build/css/style.css">
or
<link rel="stylesheet" type="text/css" href="/build/css/style.css">
What if you don't want to add the "app/" while visiting index.html? Then you could move index.html out of app folder, right into the project starting point. That way whenever you go to http://localhost:8000, usually index.html is assumed to be served. (Just like visiting http://localhost:8000/index.html). When you are using that method to run your project, the reference to style.css is just the way you were doing, which is:
<link rel="stylesheet" type="text/css" href="build/css/style.css">
By the way, this is also perfectly fine in that case, with an absolute path:
<link rel="stylesheet" type="text/css" href="/build/css/style.css">
Things will go different if you are using other mechanisms to serve static files like css, js. But the core principle is that simple: make sure files you want can be reached, and the relative path you are using really reveals the path relation between the reference point and the target referenced file.
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
I am very new to CSS.
I am putting the following line in the header of my html, but CSS doesn't load:
<link type="text/css" rel="stylesheet" href="static/main.css" />
Basically my HTML doesn't see the CSS file. I am probably missing a very obvious point. My CSS file is in the "static" folder of my project and my HTML file is in the "templates" folder.
While writing this, I realized that I might be directing to the wrong path, but changing it to "../static/main.css" didn't help either.
Should I use SRC instead of HREF, when using this locally? Or is it something completely different?
Thank you for your help!
UPDATED:
The project tree is as follows:
|____.gitignore
|____app.yaml
|____appblog.py
|____appblog.pyc
|____README.md
|____static
| |____main.css
|____templates
| |____front.html
| |____newpost.html
I am linking to main.css from inside my front.html
You are giving the wrong route to the CSS file. It is currently looking for the file in templates/static/main.css, which doesn't exist. You need to add ../ to back out of the templates directory, and then head to the static directory.
Example:
<link rel="stylesheet" type="text/css" href="../static/main.css">
If the directory structure is in your root directory, you could also link relative to root by adding /. This will start in the root directory, and then look for the static directory.
Example:
<link rel="stylesheet" type="text/css" href="/static/main.css">
Also, make sure you are adding that in the head of the document.
The answer was somewhere else:
I am using Google App Engine for the app development and I should've included the following under -handlers:
- url: /static
static_dir: static
Thank you for all your helps.
Chrome browser: Open developer tool (F12) and look at right top of the panel, or click "Console" tab, if the develper tool console return Not found error with your main.css file then check your css path. You can try to locate html file and css file in one directory and then change link tag to
Can you show me how did you open the html file? direct click on the html or browse through webserver project?