'../' <-- this in internal links?

[EvanGR]

I used to write my internal HTML links like <a href="dir1/dir2/image.jpg"> and it works.

In CSS, I see it done like url(../dir1/dir2/image.jpg) and it works.

So I had no questions about it.

Recently I am doing some .htaccess URL rewriting stuff and I bumped into problems. With some rewrite rules, stylesheets and images do not get loaded from the index.php unless I prefix their locations with ../
This in turn breaks their paths with different rewrite rules.

So in general and out of my specific context, what does ../ mean for the URL? And how does that affecting when developing locally and for the server?

Thanks

[Raffles]

../ means "the parent directory".

Let's say I have a directory called "css" where I store CSS files, and "img" where I store image files. They are in the root directory and that's where my HTML files are. Suppose I want to use a background image in the CSS:

.foo {
  background-image:url('../img/bar.gif');
}

"Go to the parent directory, then to the img directory, and locate bar.gif".

You have to be very confident about what your current working directory is to use ../ properly.

Another is ./, which means "this directory". And simply "/" means "the root directory".

[ralph.m]

Raffles has given a nice summary. All I would add it that I prefer to reference all links in relation to the root folder (Raffles' last example) as the reference is always the same no matter what page you are on. E.g.

.foo {
  background-image:url(/img/bar.gif);
}

And how does that affecting when developing locally and for the server?

The only downside with this method is that it only works on the server, not on your desktop--unless you are running your own server environment or using something like WAMP or MAMP.

[Erik J]

The only downside with this method is that it only works on the server, not on your desktop--unless you are running your own server environment or using something like WAMP or MAMP.

In case you lack a server but want to use absolute paths; on a Windows system you can put the site in any drive's root directory, e.g. C:\ or an USB stick root directory e.g. E:\

That makes one USB stick for each site you are working on. Works on any PC-system for demo too if you don't have opportunity to burn a cd.

[ralph.m]

In case you lack a server but want to use absolute paths; on a Windows system you can put the site in any drive's root directory

D'oh! I never thought of that. Good suggestion. I'm on a Mac, but I just tried putting some files in Macintosh HD (the root folder) and it worked there too--although it's a bit messy. Perhaps the disc could be partitioned. Anyway, the USB stick is a good idea too. They cost virtually nothing these days.

[Raffles]

There is also the BASE element that can come in handy, especially when URIs are being rewritten and/or the relative paths starting with "/" would be really long.