1

How do I move up a directory using the <link> in HTML for my stylesheets to work while using htaccess?

My directories are as:

index.php
.htaccess
css/
    styles.css
php/
   login.php

In my htaccess, it contains:

RewriteRule ^login/?$ php/login.php [L,QSA,NC]

Now, the stylesheets work when I copy the css folder to inside my php. They work with href="css/styles.css".

I don't want that. I want to move up and out of the php directory to the css folder in my root directory. But the stylesheets won't show when the href="../css/styles.css".

How do I move up a directory to use my stylesheet in the root css folder with htaccess?

EDIT: I have tried using the <base href="/" />, but that prevents the stylesheets from loading on both /login/ and /login.php.

login.php:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../js/system.js"></script>
<link href="../css/styles.css" rel="stylesheet" />

.htaccess:

ErrorDocument 404 http://localhost/Sites/OrderFresh/html/error404.html
RewriteEngine On
RewriteRule ^login/?$ php/userconnect.php [L,QSA,NC]
<Files .htaccess>
order allow,deny
deny from all
</Files>
| improve this question | | | | |
  • The base tags prevent the stylesheet from working on both /login/ and /login.php – Ackados Jan 21 '17 at 20:51
  • Have you tried using the absolute URL? – Steve Jan 21 '17 at 21:51
  • Can you please include the relevant link and base element combinations you have tried to your question. Do you have any other directives in your .htaccess file? – MrWhite Jan 21 '17 at 22:16
  • 1
    Don't overcomplicate it. <link href="/css/styles.css"... – Tim Fountain Jan 21 '17 at 22:44
  • 1
    The URL-path that Tim suggests already does "move up one directory". It is a root-relative URL-path. If the css directory is in the document root, as you stated, then that is all you need (you don't need a base element in that case). If, however, you did include a base element that references a document in the web root then the path to your js and css files would simply be "css/styles.css". However, if you specified a path of "../css/styles.css" with the above base element then you would be trying to go above the document root which would fail. This is covered in the dupe question. – MrWhite Jan 21 '17 at 23:08
0

I get around this problem using site relative linking for CSS and JS files.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/js/system.js"></script>
<link href="/css/styles.css" rel="stylesheet" />

When the URL starts with a slash, that tells the browser to start at the document root for the site. Your CSS and JS files will then be correctly linked no matter what directory your page looks like it is in.

| improve this answer | | | | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.