Referring to an external stylesheet confusion (formatting)

The URL is: http://users.volja.net/tayiper/index.html

<link rel="stylesheet" type="text/css" href="style.css" title="stylesheet" />

<link rel="stylesheet" type="text/css" href="/style.css" title="stylesheet" />

<link rel="stylesheet" type="text/css" href="/tayiper/style.css" title="stylesheet" />


The URL is: http://users.volja.net/tayiper/other/projects.html

<link rel="stylesheet" type="text/css" href="style.css" title="stylesheet" />

<link rel="stylesheet" type="text/css" href="/style.css" title="stylesheet" />

<link rel="stylesheet" type="text/css" href="/tayiper/other/style.css" title="stylesheet" />


The URL is: http://tadej-ivan.50webs.com/index.html

<link rel="stylesheet" type="text/css" href="style.css" title="stylesheet" />

<link rel="stylesheet" type="text/css" href="/style.css" title="stylesheet" />


The URL is: http://tadej-ivan.50webs.com/other/projects.html

<link rel="stylesheet" type="text/css" href="style.css" title="stylesheet" />

<link rel="stylesheet" type="text/css" href="/style.css" title="stylesheet" />

<link rel="stylesheet" type="text/css" href="/other/style.css" title="stylesheet" />


When I thought I have problems viewing my documents off-line (i.e. from hard-disk), I started to wonder the following. Are those variations above the same thing (if you refer to a file from your document in "current directory") ?? Also note that the "style.css" file is under the root and under other directory. I guess that the first case (where my site is hosted in a sub-directory itself) is the most "problematic" ...


Thanks in advance, tayiper

 

Hi,

"style.css" is equal to "./style.css" but "/style.css" is meaningless.

- P

 

<link rel="stylesheet" type="text/css" href="style.css" title="stylesheet" />
Would look for it here: http://tadej-ivan.50webs.com/other/style.css

<link rel="stylesheet" type="text/css" href="/style.css" title="stylesheet" />
would look for it here: http://tadej-ivan.50webs.com/style.css

<link rel="stylesheet" type="text/css" href="/other/style.css" title="stylesheet" />
would look for it here: http://tadej-ivan.50webs.com/other/style.css


'/' on it's own means root directory, which in most cases on the web it would be the domain name. So '/style.css' http://users.volja.net/style.css.

../ means directory up from the current and 'style.css' means look in current directory for the file.

 

Oops,

I should have been more specific, I was referring to offline I did some testing and the / trick did not work.

- P

 

You'd find testing a lot more 'real world' if you were to install Apache, PHP, MySQL, PERL and all the other expected hosted goodies. That way you could use includes, server side scripting, cgi scripts, &c., mimicing hosted results.

cheers,

gary

 

Ah thanks, you know, in fact I just wanted to ask about these href="../" ones too. And also I thought/speculated that it is what you said it is, yes, it's all pretty much the same as hard-disk drive's structure and browsing through it in a command-line environment ...


tayiper

 

/UPDATE: Further thoughts ...


Now I see why when I use the following code (see below) everything works fine on "http://tadej-ivan.50webs.com" site for instance (i.e. the browser looks for a file in a root), but would not work on the "http://users.volja.net/tayiper/" one.

-- <a href="/articles.html">articles</a><br>-- <a href="/software.html">software</a>

Code (markup):

However on "http://users.volja.net/tayiper/ I use:

-- <a href="/tayiper/articles.html">articles</a><br>-- <a href="/tayiper/software.html">software</a>

Code (markup):

-- <a href="/tayiper/other/specs.html">specs</a><br>-- <a href="/tayiper/other/events7.html">events7</a>

Code (markup):

... and this seemed necessary/required to me for links to work. So you say I could simply use the "<link rel="stylesheet" type="text/css" href="style.css" title="stylesheet" />" variant to refer "current directory" ??


tayiper

 

Hi,

I assumed by "offline from hard disk" it was not using a webserver (of which I do have several )

Correct and that's the preferred way to do it. The other way is not using a relative path so it will break if you move the page at all. For websites you should always use relative paths (which includes ../ when the need arises).

If the HTML file is located in /tayiper/ and the stylesheet is in /tayiper/styles, say, you can then use this:

link rel="stylesheet" type="text/css" href="styles/style.css" title="stylesheet" />

HTML:

Very simple

- P

 

Curious, but isn't this the same as (note the additional "slash" char):

<link rel="stylesheet" type="text/css" href="/styles/style.css" title="stylesheet" />>

Code (markup):

/EDIT: Also, if refer to my "favicon.ico" file like this: "<link rel="icon" type="image/png" href="favicon.ico" title="icon" />", I should then put the file into all directories (i.e. the root and "other" one), similaly as with stylesheet case above ??


tayiper

 

No, but it may point to the right place depending where root is. ie. http://users.volja.net/tayiper/ could be your root if it's a shared domain name. Whereas with most people it would be: http://www.url.com/

 

Oh and yes, where is basically the difference between these two examples below that you've provided ...

(of course, assuming that we are currently under the "other" directory)

tayiper

 

Well, which one of those two points to the root (in my opinion none) ??


tayiper

 

Well, I've experimented with various different combinations a bit more, and so I noticed this ...


If I use the following code for links on the "Volja" free-host (which is itself located in a sub-directory)

<a href="tayiper/links.html">links</a>

Code (markup):

<a href="tayiper/other/config.html">config</a>

Code (markup):

Then I am directed/pointed to ""tayiper/tayiper/links.html" and ""tayiper/tayiper/other/config.html" (and it's similar in src="tayiper/1x1-px.png" case), as you can nicely see in this example-document at "Volja" free-host: index-rel.html (or see similarly modified index-rel.html file at "50webs" free-host); note that I've left the href="style.css" part intact so that the layout is still displayed correctly ...


tayiper