The problem is that when I add a trailing slash at the address bar url localhost/register.php/ the CSS dissapears (is not applied anymore). CSS is in a separate file in a separate dir. Here is the structure:
CSS is invoked in header.html with <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
header.html is included in index.php with include 'includes/header.html';
Running apache under Windows 7.
When a trailing slash is added, your browser assumes register.php to be another directory, rather than a file. When relative URLs are specified, the external resource will be sought relative to the subdirectory register.php/ (because of the slash).
Example:
Before adding a slash:
css/style.css > http://localhost/css/style.css
After adding a slash:
css/style.css > http://localhost/register.php/css/style.css.
Fixing
To fix this issue, make use of absolute URLs. Either of the following:
<link href="/css/style.css" ... />
<link href="http://localhost/css/style.css" ... />
<base href="/register.php" /> (this tag has to be specified within the <head>
Related
I have a .htaccess file that redirects all the URL request to my index.php
AcceptPathInfo On
RewriteEngine on
RewriteBase /Projects/tester/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?request=$1 [L,QSA]
Inside my index.php I have a code that include the URL file:
<?php
if(isset($_GET['request'])){
include('pages/'.$_GET['request'].'.php');
}else{
echo 'index';
}
?>
If my URL is localhost/Projects/tester/green my index will include a file called green.php that exists inside the folder pages.
inside pages/green.php I have this code:
<link rel="stylesheet" type="text/css" href="style.css">
<div id="greenBox">
This box is green!
</div>
When I run that URL I can see a large green div with an text inside.
Great, now lets create a folder called subs inside the folder pages and create a file called yellow.php
<link rel="stylesheet" type="text/css" href="style.css">
<div id="yellowBox">
This box is yellow!
</div>
When I run this URL localhost/Projects/tester/sub/yellow I can see the text but the style.css don't load (I can't see the yellow div).
If all the content is being included in the index.php and style.css file is in the same folder as the index.php, why green.php can load the style.css but the yellow.php not?
I can see the yellow div only if I add ../style.css inside the yellow.php, but if it is to work on this way, I believe we should use ../style.css on green.php while in yellow.php use ../../style.css, no?
Is there a way to solve this? is problem in .htaccess?
Of course the external browser doesn't understand where your files are located on the server, so if you are in the following situation (from the browser's perspective):
http://localhost/Projects/tester/green
-> hey browser, load "style.css"
-> browser loads http://localhost/Projects/tester/style.css
But if you change the "virtual" path:
http://localhost/Projects/tester/sub/yellow
-> hey browser, load "style.css"
-> browser loads http://localhost/Projects/tester/sub/style.css
So you have three solutions here, in order of my personal preference:
1) Use absolute URLs for loading css data, optionally using a PHP var:
<link rel="stylesheet" type="text/css" href="/Projects/tester/style.css">
<link rel="stylesheet" type="text/css" href="<?php echo $base_path; ?>/style.css">
2) Use the <base> html element in head: (warning: it applies to ALL relative urls in the page: links, images, etc.)
<head>
<base href="http://localhost/Projects/tester/" />
</head>
3) If using absolute URLs is not an option, you can calculate how many "virtual subdirectories" you are down and generate a prefix like this:
<?php
// first calculate $virtal_subdirs_number
$relative_urls = str_repeat("../", $virtual_subdirs_number);
?>
<link rel="stylesheet" type="text/css" href="<?php echo $relative_urls; ?>/style.css">
Its because the style.css is in parent directory of yellow.php, So for accessing a file in parent directory you must have to give path like ../style.css which mean look for it in one directory back and /style.css mean in the current directory which contain yellow.php
I'm building a PHP based site with this directory structure
index.php
css
style.css
bootstrap.css
includes
header.php
footer.php
bikes
road.php
mountain.php
The Problem
So I'm working on road.php and I obviously need to be able to link to both style.css and bootstrap.css, but when I declare at the start of road.php to include the header.php and footer.php it is like as if it cannot find the stylesheets and the site reverts back to the default 1990s look.
I have also found that any form of link on the page loads a 404. I'm only just starting out with PHP because I need some more power in my sites, but I just can't seem to get my head around the super basic things.
I just don't know what to do and I'm finding myself turning my back on the whole PHP language.
Thanking you in advance,
Stu :)
I can't be certain without seeing the actual content of header.php (in perticular the part where you import the stylesheets), but it sounds like you are using a relative path to your stylesheets. Something like <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />. This works fine for index.php, but since the other pages are inside the subfolder bikes, they will be looking for the CSS files in yoursite.com/bikes/css.
The solution is to provide an absolute path. Something like this:
<link rel="stylesheet" type="text/css" href="http://yoursite.com/css/style.css" media="screen" />
This way, it doesn't matter if the page is inside a subfolder (or a subfolder of a subfolder) - it will allways look for the CSS file in the right location.
If you are using multiple domain names, or for some other reason you cannot hardcode the domain name, you can prepend a slash (/) to the path as well:
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" />
This path is relative to the root of the website, not to the current directory.
I'm dealing with some strange behavior that I don't understand.
So if I type:
http://localhost/site/index.php
The http server will return a page with no problems at all, a slash after the index.php will generate a page without any style!
http://localhost/site/index.php/
How can i solve this?
The beneath CSS link isn't working why?
<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
This will work for the slash but if I add something after the slash then I get the all website without styles.
<link rel="stylesheet" type="text/css" href="http://localhost/site/index.php/css/fonts.css" />
EDIT:
All of the requested url are OK after adding the complete path on the href's with this function:
function baseUrl(){
return ("http://".$_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']));
}
Anyway, I've added some rules to the .acccess so now I can't type slash after the index.php but if I type something after the slash everything falls apart :(
Check if your <link /> tags href attributes and <img /> tags src attributes are prepended with /:
Bad:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<img src="img/image.png" />
Good:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<img src="/img/image.png" />
This way you are certain that browser will compute correct path.
It's nothing wrong with Apache. Your document is using relative URLs.
For example, you specify href="myimage.png" instead of /myimage.png
Changing the base URL breaks these relative URLs.
This is likely a problem with absolute and relative paths in your css <link />. Make sure to use an absolute path.
This is probably related to how you define your references to the CSS, images, etc. If they are defined as relative paths, you are probably in essence looking for them in a wrong directory.
You probably have Apache set to ignore the trailing slash (and just serve index.php rather than look for an index file in index.php directory). The client browser however does not know this and is thinking it is referencing something in a directory called index.php and looking for these files relative to that directory.
To correct this, you should either configure Apache not to ignore the trailing slash (and give a proper 404 error), or implement a rewrite rule to clean up the trailing slash.
The following rule works, but it changes the URL in the address bar, which is not intended.
RewriteRule ^network/(.*)$ http://www.example.com/network.php?networkUrl=$1 [L]
The following rule redirects, the URL stays the same, but all the images, includes in the network.php file become referenced incorrectly...
RewriteRule ^network/(.*)$ network.php?networkUrl=$1 [L]
Is there a way to make this work?
This is because your browser interprets paths as relative.
To solve this reference your images and CSS with absolute paths, i.e. <img href="image.jpg" /> becomes <img href="/image.jpg" />
Same applies for css so
<link href="stylesheets/foo.css" media="print" rel="stylesheet" type="text/css"/>
becomes
<link href="/stylesheets/foo.css" media="print" rel="stylesheet" type="text/css"/>
In this way all resources links works as expected when referenced from any depth as /foo/bar/baz/script.php and so on.
Setting a base href HTML tag in your page could help too:
<base href="http://www.domain.com/" />
then all your relative images, stylesheets or javascript files will be relative to this base href.
http://www.w3.org/wiki/HTML/Elements/base
I have a php file that i include in other php files. This php file is the menu. It links to my stylesheet with <link href="styles/main.css" rel="stylesheet/index" type="text/css" />. But this only works if the php file that includes it is correct according to the path. How can I use absolute paths?
Say if I include the menu.php from another folder how can you automatically update the path to the css file?
Just use the absolute path, href="/style/main.css"
<link href="/styles/main.css" rel="stylesheet/index" type="text/css" />
It means styles/main.css from root of website
An absolute URI is like this:
href="http://example.com/absolute/path/to/file.css"
an URI relative to the current directory is like this:
href="relative/url/to/file.css"
an URI relative to your site's root (http://example.com/) starts with a /:
href="/relative/path/from/yoursite/to/file.css"
Inside your css file all URLS are relative to it's own position so it's behaviour doesn't change when the path of the file which includes it changes.
In example if your menu.css file is located into
http://example.com/styles/menu.css
just use
<link href="/styles/menu.css" rel="stylesheet/index" type="text/css" />
And browsers will always look for menu.css in http://yoursite.com/styles/menu.css
Use the full path relative to your document root instead of the relative path. E.g.
<link href="/styles/main.css" rel="stylesheet/index" type="text/css" />
as you suggested, just you absolute paths. So when you link to your stylesheet, just use the the full path like http://www.mysite.com/css/myCssFile.css
By the way always make sure you put a base tag on your HTML, like that:
<base href="http://www.mysite.com/" />