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.
Related
So I have a webpage where I use the same header/footer for every page:
<?php include 'header.php?>
In header link to css looks like this:
<link rel="stylesheet" type="text/css" href="styles.css">
they both are in the same folder.
Problem:
When I try to load page in another folder (products/page.php) - the assets wont load properly. I put a link to header like this:
<?php include '../header.php' ?>
header and footer loads properly but the assets defined in them do not.
How can I fix the paths so I would not need to copy same files to every folder.
Sorry for noob question :)
A pssible solution is to use absolute paths:
<link rel="stylesheet" type="text/css" href="/styles.css">
This way your assets are indepent to your phps structure.
rootFolder
index.php
cssFolder
fontAwesomeFolder
-main.css
-tablet.css
imagesFolder
-image.jpg
includesFolder
-navMain.php
-footer.php
pagesFolder
-contactUs.php
jsFolder
-core.js
I have topology here about my website. Thing is, when I tried to link/include navMain.php in the includesFolder to the contactUs.php in the pageFolder, some other links are messed-up, particularly - css and images files. They don't seems to work.
The issue is the PHP INCLUDE. Alright. It works fine with the index.php. But not with the file in the subdirectories.
How am I going to bring this around. Some said, I'd use config.php. I tried, didn't work. If ever I'm going to use Config.php, what exact codes do I have to place in there and what codes to the other documents.
Thanks for the help!
The problem seems to be that your assets urls are relative to your file location. To avoid this you can always use / to make them relative to your root url and avoid getting 404 errors:
<link rel="stylesheet" type="text/css" href="/cssFolder/main.css" />
<link rel="stylesheet" type="text/css" href="/cssFolder/tablet.css" />
I am baffled by this and I am hoping someone can indicate at a highlevel where my thinking is faulty.
I have a simple PHP programme
- index.php includes a file /common/header.php
- header.php links to the stylesheet.
Issue 1 which I think has baffled other people but I have not seen a reply that answers the question directly.
If I put the style sheet in the root folder (in the same place as index.php), then I can link to the file without a path
<link rel="stylesheet" type="text/css" href= "style.css" />
The point is that the style sheet is relative to index.php NOT the the header.php when it is included in index.php. Is this correct?
Issue 2 is really odd. When i put the file in a folder I can link to it as
<link rel="stylesheet" type="text/css" href= "/common/style.css" />
or
<link rel="stylesheet" type="text/css" href= "common/style.css" />
or
<link rel="stylesheet" type="text/css" href= "styles/style.css" />
and so on.
BUT, this fails if I name the folder css. Anyone?
There is one other point which might be relevant. I am using WAMP and this website is set up with a virtual host.
That is, I have the host set up in the hosts file in Windows/System 32 and in the Apache httpd.vhosts.conf file.
That means that the index.php file is in the root directory and /common/style.css is functionally equivalent to common/style.css.
Any tips for understanding this would be much appreciated. thanks.
First of all, a relative link to a path in html is completely different from one that is in PHP.
in PHP your document root might be /var/www/example/ while in html this could be http://www.example.com/
the client browser that reads the HTML as no idea of where your html is echo'd location wise other then the entry script (in this case : http://www.example.com/index.php)
So if i just refer to
<link rel="stylesheet" type="text/css" href= "/css/style.css" />
and put the stylesheet in /var/www/example/css/style.css then it doens't matter what the location of header.php is and where it is echo'ed, as long as it is in relation the to entry script (index.php in this case)
Issue 1:
Your problem is not one of PHP, but rather of HTML. CSS is applied by the browser after it has received the HTML source. So when your index.php is the script that outputs the content, all resources your reference in your html will be relative to the path this file is in.
Issue 2:
the difference between
<link rel="stylesheet" type="text/css" href= "/common/style.css" /> and <link rel="stylesheet" type="text/css" href= "common/style.css" /> is that version 1 will only work as long as /common resides in the root of your web server. It's an absolute path (starting with /) while version 2 is relative and would also work if your file was /xyz/common/style.css.
I have no idea why this should not work with the name css though. You should probably retry this.
Thanks everyone. That was fast.
To sum up the include problem which I suspect many people have. The path to the stylesheet must be relative to index.php not header.php.
The other problem I have solved. Some files were inadvertently copied into C:/wamp/www, i.e., the normal root. I cleaned all those out and the odd problem of refusing to play with a folder call /css went away. So this is a two fold problem beginning with 1. mess and 2. being something to do with the virtual host not working properly. At least the fog has lifted. Thank you all.
And for DarkMukke, "Anyone?" is phatic. It is a social nicety most likely used by newbies to convey respect when they realise the problem is as much to do with their own fog as anything technical. Or in geek-speak, the newbie is tipping their hat to anyone who will give them 5 mintues to set them straight.
Thanks everyone.
File structure is as follows:
index.php
settings/
|-manage_account.php
templates/viriditio-v2/
|-index.tpl
templates/virditio-v2/css
|-style.css
localhost/~braden/virditio/index.php shows the template like expected showing index.tpl with the style sheet paths correctly showing:
<link rel="stylesheet" href="templates/virditio-v2/css/style.css" type="text/css"/>
However localhost/~braden/virditio/settings/manage_account.php shows the same path, which is the relative path (should be ../ to be complete).
What's an easy way to make it relative to the template? Or absolute to the root? Is there a Smarty function that includes css files and makes them not relative?
Currently I have it set like this:
config:
template_url = "templates/virditio-v2/"
and .tpl:
<link rel="stylesheet" href="{#template_url#}css/reset.css" type="text/css"/>
EDIT
It's not pretty but I was able to accomplish it with
{assign var='config_url' value=#template_url#}
{assign var='template_url' value=http://`$smarty.server.SERVER_NAME`$config_url}
Any better solutions out there?
Why not access the CSS like
/templates/virditio-v2/css/style.css
with an absolute path?
If its about different hosting environments in subdirectorys, consider a config option to set the base directory and append it as a vairable to the path in your smarty template.
If I understood correctly the issue is to have a CSS file linked to a webpage no matter where in the folder tree the page comes from. This might be written as:
<link rel="stylesheet" href="/~braden/virditio/templates/virditio-v2/css/style.css" type="text/css"/>
This would make it a fixed path starting from the root of the server.
<?php
// This is index.php
ob_start();
include 'tem/u.html';
ob_end_flush();
?>
<html>
<!-- This is u.html -->
<link rel="stylesheet" href="style.css" media="screen" />
<body>
<p> abc </p>
</body>
</html>
Now my problem is when i run h.html -> Ok with style.
But when i run index.php -> Ok without style (because now the index.php include style.css, not tem/style.css)
Need a fix
If possible, refer to a domain relative path to the style.css, for example
<link rel="stylesheet" href="/style.css" media="screen" />
If that is not possible, you need to keep track on the page base in some way, which I cannot tell because I do not know enough about your application. But anyway, like
<link rel="stylesheet" href="<?php echo $pageBase; ?>/style.css" media="screen" />
where $pageBase is a variable containing the url to the root of your application.
I'm assuming that the tem directory is supposed to be for some sort of template, and so you don't want it to be directly exposed to the user; rather, you want to be able to include the files so that they're accessible via index.php, possibly with the option of later changing what files are included.
You could create another PHP file called style.php (in the root directory) which would include tem/style.css. You could do this for any other files that your templates used as well — the idea being that each PHP file in the root directory would correspond to a "role" in the template, not a particular template file, so that the template could later be changed without everything needing to be rewritten.
This might get a bit cumbersome if you had a lot of files required by your template, so it might be better to have a single script that could be instructed which file to load (through a $_GET variable). But in that case, you need to be very careful not to allow the user to specify arbitrary files. I'd suggest avoiding this approach until you're more proficient in PHP.
EDIT: On second thought, I'd suggest using a <base> tag in your template HTML file, as suggested in my comment on #gnud's answer.
This has nothing to do with PHP or include. This has to do with your browser, and how URLs are interpreted.
When your browser is pointed at http://xyz.abc/tem/h.html and asked to load "style.css", it tries to load http://xyz.abc/tem/style.css - this is known as a relative url, relative to the current document location.
When your browser is at http://xyz.abc/index.php and is asked to load the stylesheet in the same way, it tries http://xyz.abc/style.css. Maybe you see the problem?
As for a solution, you might use a domain-relative path for the stylesheet ("/tem/style.css").
just always use absolute path to your css file
<link rel="stylesheet" href="/tem/style.css" media="screen" />
that's all