header.php not displaying properly from root folder homepage - php

I have the index.php in my public_ root destination which has the header taken using php include from the folder include/header.php.
But when the index page loads the menu and images within the header.php doesnt load because its directory is from include folder.
Ex in header.php the menu will be in directory
<link rel="stylesheet" href="../scripts/menu.css" type="text/css" media="all" />
but the index.php directory to menu stylesheet would be scripts/menu.css. So i guess the menu styles are not loading.
Is there a way to get the index page right without having to have header in the same folder as index.php or is it because i am testing this on windows using xampp?

Let me clear this one up for you.
When you write HTML and CSS from PHP like you are doing here, the HTML and CSS don't know where the PHP is being run from or anything about the PHP. This is because PHP is interpreted and writes out the page into HTML which is then processed in your browser (i.e. the PHP never reaches your browser, all it sees is HTML).
This means that you must add the correct paths to the CSS files relative to your web server root not the PHP script location (in your case that is probably "/scripts/menu.css" for the example you've provided - assuming that the scripts is in the root web folder).
So for example, on your website / means the root of the web server (i.e. mywebsite.com/) and anything after that is it's path relative to the root of the web server.
By using /mycssfolder/mycssfile.css like I suggested, you can ensure that the location is correct regardless of the page which the PHP script is called on.
Hope this helps.
Ben

<link rel="stylesheet" href="/scripts/menu.css" type="text/css" media="all" />
You might try simple removing the .., like shown above. Remember, any external source file that you include becomes part of the destination. Thus, think of the location of your CSS file relative to index.php.

Related

Moving website to localhost: Document Root changed

I have download a website that was written from scratch using PHP, MySql, html, css, jQuery.
After fixing some configuration with MySql and htaccess, I get to a point where all my CSS and JS files are not loaded because of a relative path error.
This is how it looks:
The error in the console GET http://localhost/fonts/fonts.css sends me to index.php which loads all those files with a relative path.
Now, if I remove the / at the beginning of each line, the files will be loaded, however, I get more errors on different pages with bad URLs and such, that means that I need to fix this / problem instead of just renaming the hrefs.
So my question is, how to fix it?
I have tried to set a base href tag:
<base href="http://localhost/israelrescue/">
or
<base href="http://localhost/israelrescue">
or in PHP:
$_SERVER['DOCUMENT_ROOT'] = 'http://localhost/israelrescue';
or
$_SERVER['DOCUMENT_ROOT'] = $_SERVER['DOCUMENT_ROOT'] . '/israelrescue/';
P.S:
israelrescue is the name of the folder I am using in my localhost installation for this website.
Nothing seems to work, any ideas?
Thanks!
Answers:
It's because you've got the site in a subfolder in localhost. Is it possible for you to move the site into the root? I think #MukeshPanchal is telling you to load the assets from live, which is missing the point somewhat. – thebluefox
Looks like this site was not written to be run from within a
sub-folder. Easiest way to work around that would be to set up a
VirtualHost for this project in your local server, so that you can
load it directly via a local domain name, without any additional path.
(And btw., setting DOCUMENT_ROOT to an HTTP URL is complete nonsense.)
– CBroe
You can leave the site in its subfolder as long as you drop the "/" in the beggining of every file path :
<link rel="stylesheet" href="/css/main.css">
<script type="text/javascript" src="/js/common.js"></script>
becomes
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/common.js"></script>
Should work like this

Two separate ways to link a css file to multiple php files in same directory

I have multiple php files in the same directory.
Then I have one css file in the following directory: style/css/fileName.css
All of my php files in that directory link to the stylesheet through the following code:
<link href="style/css/fileName.css" rel="stylesheet" type="text/css"/>
Except one file for some reason the styling will not be applied except when I add "/" behind the style to look as the following:
<link href="/style/css/fileName.css" rel="stylesheet" type="text/css"/>
Why is this the case? They are both in the same exact directory.
EDIT: All of the files I am discussing ARE at the same index level. Just this one file requires "/"..if both of the above links are correct for the index level. Then why is it that this one file without having "/" before the style/css/fileName.css stops it from being styled?
You could define a variable which contains your base url in your main configuration file and just do something like this:
$base_url = 'http://mysite';
And then you just do
<link href="<?= $base_url; ?>/style/css/fileName.css" rel="stylesheet" type="text/css"/>
Or basically an absolute path. Have you considered that option?
I think like that there wouldn't be an issue with the location of the file.
Adding "/" at the beginning of a path means "start from the root of the site." Leaving off that initial slash means "start from where we are right now."
If your php files are at the root of your site, such as http://localhost/index.php, then href="/style/css/fileName.css" and href="style/css/fileName.css" ultimately point to the same place, which is http://localhost/style/css/fileName.css
If your php files and other directories are not at the root level (for example, in a directory called "directory", like this: http://localhost/directory/index.php), then using href="style/css/fileName.css" in that php file is equivalent to href="http://localhost/directory/style/css/fileName.css"
My guess is that your PHP file is not at the root level, which is why the presence of the leading slash in your CSS file's path breaks things. If you do want to start your path to your CSS file with a slash (which you probably should do, so that you don't have to add a different path to your CSS in every PHP file, depending on where it is in your directory structure) then you just need to make sure that you have identified the correct path from the root level to your CSS.

Hosted Site Not using CSS/JQuery

I have created a site, running it locally using XAMPP as i developed it, and it runs perfectly when local.
However i tested it when hosted and the CSS & JQuery (Google library) do not work at all.
The CSS tags use the standard:
<link rel="stylesheet" type="text/css" href="/css/css.css">
Is there a reason this wouldnt work when live? But surely this has nothing to do with why JQuery doesnt work either?
I dont feel comfortable leaving it live when it doesnt work, so im sorry i cannot give you a live version to view.
Any help would be great!
Do check with Inspector if the CSS and JS files are loaded correctly when you go live — do note that the first slash in front of the URL means you're referencing the root URL of the live site. Are the directory structures of the local and live site different?
Also, you can try loading the external files using the absolute URL, like http://domain.tld/css/css.css (double check if the file exists, or loadable). If it works, then it's your relative URL path that is not working.
[Edit]: For the sake of completeness, this is how relative URL paths work:
/<fileName>.<fileExtension> will point to the file at the root directory
./<fileName>.<fileExtension> will point to the file in the same directory as the current page
../<fileName>.<fileExtension> will point to the file in the directory one level above, relative to the current directory
Check that you have actually uploded CSS files into /css/ folder. (Obviously /css/ folder should be present on your server)
Make sure you can access you CSS files from the web: eg if you go herehttp://yourdomain.com/css/css.ss you should see the contents of you CSS file.
if you can see the contents of your file here: http://yourdomain.com/css/css.css
then try this:
<link rel="stylesheet" type="text/css" href="http://yourdomain.com/css/css.css">
And as #Terry already mentioned check the paths.

Include HTML files with a PHP script in a different directory while keeping file paths in HTML intact?

From a PHP script, I want to include a "header.php" and "footer.php" file, which are in a different directory. They have HTML in them, and the HTML has references to file paths in them such as:
<link rel="stylesheet" type="text/css" href="css/custom.css">
and
About Us
When I include this html from the php file (which is in another directory) the html looks for the file paths in the directory it's included into, instead of where it's included from.
Is there an easy fix to that? I realize I could go through the html and prepend something like <?php echo dirname(__FILE__); ?> into every file path. But is that the correct way to do that?
Should I restructure my files completely?
Currently the reason the php script is in a different directory is because currently most of my web pages are in the root directory of the server -- so my css js and template files are in folders named "css" "js" and "inc"; but I want to have some web pages be in a url of the format "[root]/Account/settings.php". So I'm trying to put some php pages into a folder in the root directory named Account. But when I try to include my templating files, the file paths in them get messed up.
Use the following path -
<link rel="stylesheet" type="text/css" href="/css/custom.css">
and
About Us
This is assuming that the CSS directory and About Us are both in your document root. Really a simple HTML and path issue rather than PHP, if I am understanding what you are trying to do.

Problems with links not working on local server

I'm trying to set up my site in Dreamweaver CS5 to work with my local server, and I'm having issues with document relative links.
I've got a structure on my HD like this
website
_Common
header.php
_css
twoColFixRtHdr.css
index.php
and the same structure mirrored on my local WAMP server, except on the local server the site is in a subfolder, so it's something like www/website/
The problem is this line inside header.php
<link href="../_css/twoColFixRtHdr.css" rel="stylesheet" type="text/css" />
That looks correct to me pathwise, but on the local server it cannot find that css file from the header.php
If I change it to
<link href="/website/_css/twoColFixRtHdr.css" rel="stylesheet" type="text/css" />
or
<link href="_css/twoColFixRtHdr.css" rel="stylesheet" type="text/css" />
It works fine, but I want to use document relative links if I can, any ideas?
This sounds clear to me, since I'm sure that you include the header file in the index.php file. So the path for the css files is set relatively to the index.php.
you may achieve it by several ways.
one of them: you can setup a VirtualHost (in httpd.conf) and point your subfolder as root folder for host.
If header.php is being included in index.php, the relative link ../_css/ in header.php won't work because index.php is at the same level as _css.
For all intents and purposes, once it's been included in index.php, to the browser, the content in header.php is now simply part of index.php, so all paths need to be relative to index.php.
Ie:
index.php
/my_include_folder
- header.php
/_css
- style.css
Once I add <?php include('my_include_folder/header.php); ?> to index.php, the links to css files, js, and hyperlinks in header.php should be relative to index.php.
Hopefully that makes sense.

Categories