This question already has an answer here:
CSS dissapears when adding trailing slash to URL
(1 answer)
Closed 5 months ago.
I'm developing a website and when I put a forward slash / at the end of a URL, the CSS file doesn't get read.
Example:
This URL runs perfectly fine: www.localhost.com/index.php
This URL ignores the CSS file: www.localhost.com/index.php/
In short, the forward slash ruins the design of the website.
How can I fix this problem? I searched for a .htaccess solution, but it doesn't work.
Try to include your CSS file using an absolute path (e.g., http://...) or a path starting from your webroot (e.g., /css/yourfile.css)
Otherwise, you need to disallow (or redirect) requests to index.php/ in index.php via .htaccess (or server configuration).
This will remove the trailing slash, except for the root and existing folders:
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)(\.php|\.html)/$ /$1$2 [R=301,L]
Just use a "/" before setting the location for the CSS in your index.html header.
<link rel="stylesheet" type="text/css" href="/style.css"/>
That way your index.html will look for the file from the root directory.
Just add the full URL of the CSS files, <link rel="stylesheet" type="text/css" href="http://domain/folder/stylesheet.css">.
And also use the full path for every href links on
that PHP page. Like don't just add <a href="home.html">, but instead use <a href="http://domain/home.html.
Related
I want to make my URL as SEO Friendly URL. I tried editing .htaccess file by rewriting rule
RewriteRule ^swift-details/([0-9]+)/([0-9a-zA-Z_-]+)$ swift-details.php?id=$1 [NC,L]
RewriteRule ^swift-details/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]
It's routing the correct URL but in that page CSS JS and images are not working.
Example URL:
http://www.example.com/swift-details/2/abblinbb
This is because your relative URIs have their base changed. Originally, the base is / when the page is /swift-details.php?id=foo, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /swift/details/foo the base suddenly becomes /swift/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">
You dont need the second rewrite rule. Your CSS/JS paths are all 'relative' to your current location.
Your CSS exists here:
/css/normalize.css
Your page is looking here:
/swift-details/2/abblinbb/css/normalize.css
All you need is 'forward-slashes' before your CSS/JS paths.
I want to make my URL as SEO Friendly URL. I tried editing .htaccess file by rewriting rule
RewriteRule ^swift-details/([0-9]+)/([0-9a-zA-Z_-]+)$ swift-details.php?id=$1 [NC,L]
RewriteRule ^swift-details/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]
It's routing the correct URL but in that page CSS JS and images are not working.
Example URL:
http://www.example.com/swift-details/2/abblinbb
This is because your relative URIs have their base changed. Originally, the base is / when the page is /swift-details.php?id=foo, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /swift/details/foo the base suddenly becomes /swift/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">
You dont need the second rewrite rule. Your CSS/JS paths are all 'relative' to your current location.
Your CSS exists here:
/css/normalize.css
Your page is looking here:
/swift-details/2/abblinbb/css/normalize.css
All you need is 'forward-slashes' before your CSS/JS paths.
Problem: rewrite url causing some links to break.
.htaccess has below rule:
RewriteRule ^blog/([0-9]+)/[-0-9a-zA-Z]+$ index.php?action=blog&postID=$1\%23disqus_thread [NC]
Style sheet reference in header template:
<link rel="stylesheet" type="text/css" href="style.css" />
I can click on:
domain.com/blog/1/title-of-article and get to the file just fine, but style sheet link breaks
If I go directly to:
domain.com/index.php?action=blog&postID=1#.UYV1mcqRiSo then the style sheet loads fine (ignore #.UYV1mcqRiSo, that is code from Disqus).
This is also breaking my logo link, which is:
<a href="./">
Instead of taking me to domain.com, it's going to domain.com/blog/1/
My basic file structure is:
index.php and style.css is in root, which loads up viewPost.php in/templates folder.
What is going and how do I correct this?
1. About the stylesheet link
You have to include these conditions in your .htaccess before the rewrite rule:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
The first means that rewrite rules work only if the requested URL is not to an existing file, and the second does the same for existing directories. Without these conditions the request for style.css is also passed to your index.php file, not to the style.css file directly.
If you have these rules already and it still doesn't work then the problem is with URL paths, see below.
2. About URL paths
You're using relative URLs in your links, both in the <a href="./"> and in the <link> tag. In this case they are resolved to the current directory of the URL (it doesn't matter that it's rewritten to the same file serverside, the path is prepared on the client side and every part separated with a slash / is treated as a directory. Thus if the current URL is domain.com/blog/1/, ./ is resolved to domain.com/blog/1/.) The path to style.css may be resolved to domain.com/blog/1/style.css. If you want these links work as if they're directly after the domain name in the URL, you have to use absolute URLs, i.e., / without the dot for the link on your logo; /style.css for the stylesheet link.
Easiest solution: Just set your links relative to the domain root, by fronting them with a slash (resp. removing the dot referring to the current folder in the link):
<link rel="stylesheet" type="text/css" href="/style.css" />
Logo
Let's say the domain for my website is [http://mywebsite.com][1] and that opens the index.php. That script gets the $page,$section,$language variables from the url. So [http://mywebsite.com/index.php?lang=en§ion=home&page=sitemap][2] opens the sitemap page in English which belongs to the "home" section. And I want that same url to be rewritten to [http://mywebsite.com/home/sitemap_en.html][3]. To achieve this, already I've put the following in the .htaccess:
RewriteCond %{REQUEST_URI} .+\/.+
RewriteRule ^(.+)\/(.+)_(mk|en|al)\.html$ index.php?lang=$3§ion=$1&page=$2 [L]
But there is a huge problem now. When I visit some url like that, the files are not found because the file style.css is in the root folder and not in [http://mywebsite.com/home/style.css][4] , and there the server is searching for it. "home" is not real folder and it doesn't exists, it's only a section. The same goes for all the jpg, png, js, gif etc. How can I redirect the pages the way I like, and the files to be found with the real paths?
p.s. Some section like [http://mywebsite.com/index.php?lang=en§ion=contact][5] don't have pages at all. They should be reached like so: [http://mywebsite.com/contact_en.html][6]
I have this for them, after the previous rule: RewriteRule ^(.+)_(mk|en|al).html$ index.php?lang=$2§ion=$1
You can use a base tag in your header so that all relative paths are off of a specific href so:
<head>
<base href="http://mywebsite.com/" />
</head>
would cause all relative (not just css) URL's to be loaded off your root directory
OR
as stated by others just make your paths absolute by putting a leading "/" at the front:
<link rel="stylesheet" href="/css/mycss.css" type="text/css" />
Did you try and make the references to css and js files etc relative to the top level directory (the home directory) by prefixing with a slash? ie if you keep them in a directory called styles in the sites home directory:
<link rel=StyleSheet href="/styles/style.css" type="text/css" />
I have successfully created rewrite rules to handle URLs like
http://example.com/xyz
http://example.com/xyz/
http://example.com/xyz/abc
http://example.com/xyz/abc/
Here is the mod rewrite & regex:
Options +FollowSymlinks
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^/?([0-9]+)(?:\/)?$ /index.php?p=$1 [L]
RewriteRule ^/?([-a-zA-Z0-9_+]+)(?:\/)?$ /index.php?n=$1 [L]
RewriteRule ^/?([-a-zA-Z0-9_+]+)/([-a-zA-Z0-9_+]+)(?:\/)?$ /index.php?n=$2 [L]
This works great, but the problem is that when I go to http://example.com/xyz/abc, my script gets the correct input (n=abc) but the paths are messed up, so all relative URLs in my code are broken, as they are now relative to xyz instead of the root.
Is there a way around this at all? As you can see above I have tried to redirect to /index.php to force the path to be correct. My brain is fried after a long day of regex and code, so I hope it's not something disastrously trivial.
Use the HTML base element to force all relative URLs to use a different path than the one the browser displays.
<base href="http://www.example.com/"/>
...
link
The relative URL will use "http://www.example.com" as its base, even if the browser thinks it's looking at the page "http://www.example.com/xyz/". So the link goes to "http://www.example.com/relative/url" instead of "http://www.example.com/xyz/relative/url"
And there's the Stack Overflow way of doing it, in which every URL is either an absolute path (to resources like images) or paths including the root (i.e. "/feeds/questions/123"), which avoid the relative path issues.
The three options are:
1) Use a base tag (this will affect every relative URI on your page, including links, images, scripts, stylesheets and so on)
<base href="http://yoursite/">
2) Change all of your links to fully qualified URIs
<a href="http://yoursite/yourpage.html">
3) Use the "/" prefix to show that the path is relative to the root on each URI.
<a href="/yourpage.html">
I have personally used the base-tag option the most, which does get some bad press (from people that have used it without really understanding it). When it comes to mod_rewrite, the base tag is perfect as you probably DO want all your paths to be relative to the root, including all your images, css, scripts and links.
Edit: I assume you are talking about URLs in your HTML code, e.g. to images and stylesheets, that are broken.
Nope, as far as I know there is no way around it, because the browser sees a path, and requests resources relative to it. It has nothing to do with the server, and there is nothing you can do.
You will either have to resort to a different splitter that is not interpreted as a directory splitter (e.g. underscores), or use absolute paths, or use the <base> tag. I have never used the base tag myself, however, and it is not very well regarded wherever you look. The best thing would probably be to switch to absolute paths.
modify your last RewriteRule to include the path. you have the path in the regular expression.
RewriteRule ^/?([-a-zA-Z0-9_+]+)/([-a-zA-Z0-9_+]+)(?:\/)?$ $1/index.php?n=$2 [L]
or alternatively (depending on what you are trying to achieve):
RewriteRule ^/?([-a-zA-Z0-9_+]+)/([-a-zA-Z0-9_+]+)(?:\/)?$ /index.php?n=$1/$2 [L]
I tried using the BASE element in my pages as a shortcut instead of changing all urls. Add the base element as follows:
<base href="/">
And here are the results:
This: <link type="text/css" rel="stylesheet" href="my.css">
Becomes: <link type="text/css" rel="stylesheet" href="/my.css">
This: <script type="text/javascript" language="javascript" src="include/my.js"></script>
Becomes: <script type="text/javascript" language="javascript" src="/include/my.js"></script>
This: <a href="foo.html">
Becomes: <a href="/foo.html">
This: <a href="foo/bar.html">
Becomes: <a href="/foo/bar.html">
You can always override the base tag where necessary:
This: <a href="/foo">
Remains: <a href="/foo">
This: <a href="/foo/bar/">
Remains: <a href="/foo/bar/">