Html5 relative path for anchor and stylesheets

HTML & CSS
1

Two issues.
First, invoking

<a href="../gamesonhorses/games/blockBalance/"> only lists the files in that folder (that includes index.html) instead of invoking …/gamesonhorses/games/blockBalance/index.html".

I thought specifying index.html or index.php in a folder only required the link to provide the path to the owning folder.

Second. My folder structure is
gamesonhorses
gamesonhorses/css
gamesonhorses/games
gamesonhorses/games/blockBalance

How do I reference the stylesheet style.css that resides in gamesonhorses/css from the index.html that resides in gamesonhorses/games/blockBalance?

in gamesonhorses/games/blockBalance/index.html

<link rel="stylesheet" href="../gamesonhorses/css/style.css"> does not work

windows 10, Dell Inspiron 15 laptop using html5 on (version 53… 64-bit) Chrome

2

You need to go back two levels of folders to get to “gamesonhorses”, so try:-

<link rel="stylesheet" href="../../css/style.css">
3

if “gamesonhorses” is in the root directory, then simply preceeding it with a forward slash instead of two dots should work.

If it is not in the root directory, then to get from
gamesonhorses/games/blockBalance/index
to
gamesonhorses/css/style.css

<link rel="stylesheet" href="../../css/style.css">
or
<link rel="stylesheet" href="../../../gamesonhorses/css/style.css">
should work.

(two dots before the slash says to go back (up) one directory level)

(ninja’d by Sam. My screen must have been stalled. WinXP)

4

[off-topic]
Why use relative links especially when the anchor requests a Html Reference?

I used to use relative links and created problems when trying to use a common <header> ... </header> or moving files to a different path.

After bitter experience I now prefer using a common http://example.com/assets/css/style-sheet.css

[/off-topic]

5

You’re not the only person I’ve heard say that.

1 Like
6

That does it, thanks. Also see my reply to John_Betong

7

My reason for using relative links, which may be a further indication of my limited experience, is that I am doing my development on my local (XAAMP Apache) server before I move it to my Bluehost addon domain. I’m looking to do relative linking to save having to recode upon migration from xaamp/htdocs to Bluehost/public/gamesonhorses.

Or am I misunderstanding the migration issues?

8

Thanks much both for the solution and the context.

I thought two dots took me back to the root, not just one level. So much for self-teaching, huh?

Also see my reply to John_Betong

2 Likes
9

With your local XAMPP experiment by creating a test.php file in the root directory::

<?php
# STYLESHEET TESTING
  $styleSheet = '/assets/css/styleSheet.css';
  $msg = 'Yes we have no: '.$styleSheet;
  if( file_exists($styleSheet) ):
    $msg = '<br>SUCCESS - there is a : ' .$styleSheet;  
  endif;

echo '<dl>';
  echo '<dt><b>TESTING:</b> file_exists("'. $styleSheet .'")</dt>';
  echo '<dd style="color:red;">' .$msg.'</dd>';
  echo '<dd>&nbsp;</dd>';

  echo '<dt><b>FileName:</b>  __FILE__ .</dt>';
  echo '<dd>' . __FILE__ .'</dd>';
  echo '<dd>&nbsp;</dd>';

  echo '<dt><b>Directory:</b> getcwd()</dt>';
  echo '<dd>' .getcwd() .'</dt>';
  echo '<dd>&nbsp;</dd>';

  echo '<dt><b>Directory:</b> __DIR__</dt>';
  echo '<dd>' .__DIR__ .'</dd>';
  echo '<dd>&nbsp;</dd>';

  echo '<dt><b>RealPath():</b> realpath()</dt>';
  echo '<dd>' .realpath(__DIR__) .'</dd>';
  echo '<dd>&nbsp;</dd>';

echo '</dl>';
10

I still use MAMP sometimes instead of XAMPP, and to avoid this problem of different local and remote file paths, I set up MAMP as a root server. It’s very easy, and only takes a few minutes, and means you can use those universal URLs locally and remotely.

A few links for Windows and XAMPP that might help:

http://foundationphp.com/tutorials/apache_vhosts.php
https://gist.github.com/deepak-rajpal/3303728a3a8f36b8aecd

11

I switched to MAMP Pro some time ago, that allows me to run any number of hosts which are easy and quick to add, then I can use relative URL’s at any time with no problems.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.