In my project I have a master page and 2 pages using that master page. One of them is beside the master page in the root folder, and another is inside 'admin' folder in the root.
The problem is when I use an image in my master page with relative address for example 'images/pic.jpg', it is displayed in first page but not in second page.
I can solve this problem by addressing from root folder like this: '/images/pic.jpg' but this is not a good idea, as may be my project folder will change in the future.
What should I do for this purpose?
Relative addresses will work only if the folder schema remains the same. Masquad's solution presumes the same...that the file will remain in a folder 1 level below the root and on the same level as the image folder.
If this is not the case, and you change the schema, an absolute address is needed, thereby making 'http://www.example.com/images/pic.jpg' a good idea.
Related
I faced a problem using a link inside my main html and giving another html file name to the link which is in the same root as the main html.
unfortunately after click on the link the address bar is changed but the page is not loaded and it redirects to the main html page.
this is the way I wrote the link:
click
this is my folder structure:
I also tried with giving the full path but I got this error:
Not allowed to load local resource: file:///C:/my_project/templates/PU.html
As you said in the comments, I assume you're working locally on your computer, so I'm going to answer accordingly.
The first and foremost thing to know is that your main, i.e the file you want users to see first should be named as index.html and it should be in the root directory of your project, i.e according to your question, it should be in my_project.
Now if it is as I said, then your my_project folder/directory will be considered as the root directory. With the help of this consideration, now you can set links with respect to the root directory. e.g:
click
The / at the beginning here tells the HTML to look from the root directory, i.e from my_project in your case.
I don't see any errors in the code you have. Though, I will tell you a few things here.
**./** at the beginning of the link tells HTML to look at the file in the same folder as of the present file. So, if the PU.html file is not in the same folder as of the file you're working on, it will give an error, because as I said, it's looking for the file in the same folder.
There is nothing wrong with your syntax.
click is correct,
but if you have your files in the same directory you don't need ./.
My website on my server does not want to show the on server saved image.
The path is relative and to my information correct, but I always get a 404 error.
Found no solution after browsing endlessly.
All nessecary information is found in the second picture posted.
Apparently, you use a Framework. The file you have in the view folder isn't the one you send to the browser, it's just a source file that will be used by your Framework entry point: public/index.php. Your root folder is therefore public.
Two things must then be understood:
Even though the line your type is in application/view/index/index.php, the browser will only see it as index.php, located at the base of your site (http://localhost/index.php or somethig like that). The relative path must therefore be written as relative to public.
As your root folder, public, is seen as http://localhost by the browser, you can't use .., there is nothing above the root of your website, for the browser. You must do one of the followings:
Place your image in public/_images instead of application/_images (normally, all the files that can be sent without passing by the PHP preprocessor can go in public)
Place it wherever you want and create a controller that maps a custom URL to your image. Something like /images/(:any) maps to a controller looking into your specific image folder (please, don't, it's not because you can that you should).
My advice: create a public/img folder and place it your images, then you load it with <img src="/img/title_image_me.jpeg" alt="My picture">. (The initial / is very important there!, it's understood as the root folder of your website, Linux-style).
This seems like a simple question but it's baffling me. Let's say my domain is:
bar.com and my subdomain is foo.bar.com.
If I'm on foo.bar.com/1/2 and I go back a directory through a link with a relative path (href="../") it will take me to foo.bar.com, not foo.bar.com/1 as I'd expect it to. Why is this? How do I get to foo.bar.com/1 with a relative path?
Side question: If foo.bar.com is masking another directory (let's say bar.com/foo, and I go to href="/", will that take me to the root of the entire domain (bar.com) or just to the root of the subdomain (foo.bar.com)?
If the current page is http://foo.bar.com/1/2, browser thinks 2 is a document under the directory 1. So if you have ../, it goes to its parent directory, which is the root directory. If you want to link to http://foo.bar.com/1/, you can use href=./.
I don't quite understand your side question. Generally if the URL displayed in browser is bar.com/foo, then href="/" takes users to bar.com/; if the URL displayed in browser is foo.bar.com/, then href="/" takes users to foo.bar.com/
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 ../
I have a website, let's call it example.com. Within this site, I have some FAQs but the person that built the site saved the FAQ pages under a directory on the site named "FAQs".
As an example an FAQ page would be located at:
example.com/pages/en/faqs/faq-page1.html.
Note the pages/en/ directory. Ideally I would like all the pages to be saved under example.com/index.html etc but I can't change this.
Anyway, when I am on any of these FAQ pages, and I try to link back to say the home page index.html the navigation won't go to the page. So for example, when I am on:
example.com/pages/en/faqs/faq-page1.html
and I try to link back to the home page
example.com/pages/en/index.html (which is where the index page is saved) the nav won't work. Instead it will try to go to example.com/pages/en/faqs/index.html.
Now I am assuming this happens because I am in the "faq" directory, but how do I go back to the root directory when linking? The code for the link is simply Home. I could of course just put in the full link example.com/pages/en/index.html, which would solve this but is there another way around this?
You need to give a relative file path of Home
Alternately you can specify a link from the root of your site with
Home
.. and . have special meanings in file paths, .. means up one directory and . means current directory.
so Home is the same as Home
There are two type of paths: absolute and relative. This is basically the same for files in your hard disc and directories in a URL.
Absolute paths start with a leading slash. They always point to the same location, no matter where you use them:
/pages/en/faqs/faq-page1.html
Relative paths are the rest (all that do not start with slash). The location they point to depends on where you are using them
index.html is:
/pages/en/faqs/index.html if called from /pages/en/faqs/faq-page1.html
/pages/index.html if called from /pages/example.html
etc.
There are also two special directory names: . and ..:
. means "current directory"
.. means "parent directory"
You can use them to build relative paths:
../index.html is /pages/en/index.html if called from /pages/en/faqs/faq-page1.html
../../index.html is /pages/index.html if called from /pages/en/faqs/faq-page1.html
Once you're familiar with the terms, it's easy to understand what it's failing and how to fix it. You have two options:
Use absolute paths
Fix your relative paths
To go up a directory in a link, use ... This means "go up one directory", so your link will look something like this:
Home