I've searched around and found people with similar problems, but nothing suggested seems to work for me.
Here's my file structure...
CSS
> style.css
INCLUDES
> header.php
> footer.php
IMGS
index.php
contact.php
about.php
terms.php
MUSEUM-PAGES
> dummy.php
the header.php which contains the link to css works fine for any html/php page that isn't nested in a sub-directory.
But when I use a sub-directory to better organise the files it falls apart. In this example museum-pages > dummy.php can't bring in the css. The content from the header and footer work fine, just not the CSS files.
I tried replacing the
<link rel="stylesheet" href='css/style.css' type="text/css" media="screen" title="no title" charset="utf-8"> in the header.php to...
/css/style.css
.
../
../../
but it will drop all non-sub directed references in other pages, such as the homepage. I am baffled.
Anyone able to help me please?
Use an absolute path:
<link rel="stylesheet" href='/css/style.css' type="text/css" media="screen" title="no title" charset="utf-8">
This should work fine?
<link rel="stylesheet" href='/css/style.css' type="text/css" media="screen" title="no title" charset="utf-8">
The / is 'root'
EDIT
Since this didnt work, you could try this below, it isnt good practice IMHO however.. it will work.
<?php
// this is your header.php file
$linkToCss = "http://yoursite.com/css/styles.css";
?>
<link rel="stylesheet" href='<?php $linkToCss; ?>' type="text/css" media="screen" title="no title" charset="utf-8">
If that doesn't work there is another issue going on - try it see if it works.
Related
Writing a simple PHP website and having trouble linking the stylesheet to the page. In the past I've had issues with this but usually it ends up working.
Anything wrong with my code? Or am I just doing it wrong?
<head>
<title>San Joaquin Valley Town Hall</title>
<link href="styles/main.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="styles/normalize.css">
</head>`
(I am using a XAMPP server to run my files)
Thanks
Without understanding your file structure, there isn't much else that can be said here.
I'd recommend using a relative link from the root directory of your project. Let's say your file structure is something like:
[website]
[resources]
[styles]
[images]
[js]
...
Then you're style include would be something like:
<link rel="stylesheet" href="/resources/styles/my_sheet.css" media="screen" type="text/css"/>
This is personal preference, as I'm not a fan of using directory traversal .. or . to find files. In my experience, files end up moving around a bit (we develop our own framework, so things are always changing) so with this we're sure exactly where the file is located just by viewing the href.
The link tag looks fine, however the href is relative. Is the styles directory in the same directory as your html?
If you can see your stylesheet at http://yoursite.com/styles/main.css, I would change the link to be less relative:
<link href="/styles/main.css" media="screen" rel="stylesheet" type="text/css" />
This way, no matter where your HTML page resides in the file structure, the stylesheet will be found.
HTML media Attribute
Read the page that was recommended and after reading, try this:
<head>
<title>San Joaquin Valley Town Hall</title>
<link rel="stylesheet" type="text/css" href="styles/main.css" media="screen">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
</head>
if the next problem is the directory, try this:
<head>
<title>San Joaquin Valley Town Hall</title>
<link rel="stylesheet" type="text/css" href="/styles/main.css" media="screen">
<link rel="stylesheet" type="text/css" href="/styles/normalize.css">
</head>
I have two CSS links in the head of my PHP file.
<link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../styles/style.css">
The first one (Bootstrap) works. The second one doesn't. They are both in the same path. I've double and triple checked that the second one is spelled correctly. What should I do?
Check the location of your file in a web site's folder structure.
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
css is located in the same folder as the current page
<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
css is located in the styles folder in the current folder
<link rel="stylesheet" type="text/css" href="/styles/bootstrap.min.css">
css is located in the styles folder at the root of the current web
<link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css">
css is located in the folder one level up from the current folder
I am currently working on a admin backend and now want to move some pages into different folders (so I do not have all scripts in one folder).
Structure looks like this:
/
/theme/assets/...
/templates/head.php
/templates/foot.php
/top/index.php
/index.php
In head.php there are some stylesheets added like this
<link href="theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
This works fine for files in the root folder (e.g. index.php), but when I use the same head.php in /top/index.php it does not work because the path is wrong.
Is it somehow possible to properly include the stylesheets etc. while having the scripts in different folders?
Greetz,
Just specify the root identifier (/) at the beginning of the href attribute:
<link href="/theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Try this,
<link href="../theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
In /top/index.php
OR
<link href="<?php echo $_SERVER['DOCUMENT_ROOT'] ?>/theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
This code can be used in any page. The $_SERVER['DOCUMENT_ROOT'] points to the root.
Use '../' to reference the folder above and work your way back.
e.g
<link href="../theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
I am new to php, but suspect there is a simple solution that I am not aware of.
I have made a template for the header on every page, but when the user loads pages the css page changes in relation to their current page.
How do I have php track how many levels up in a folder the user is so I can pull the css from anywhere in the website?
<link rel="stylesheet" href="../templates/css/css.css" type="text/css" />
That is my current link to css, but for a page further down in folders I need it to add additional ../
You should use an absolute path from the root of the website (note, no ".." just a "/"):
<link rel='stylesheet' href='/templates/css/css.css' type='text/css' />
Will always work, as long as your css is at:
http://yourwebsite.com/templates/css/css.css
you shouldn't be using a relative path then. Why not just do something like:
<link rel="stylesheet" href="http://www.mysite.com/templates/css/css.css" type="text/css" />
or
<link rel="stylesheet" href="/templates/css/css.css" type="text/css" />
or
<link rel="stylesheet" href="<?php echo $_SERVER['DOCUMENT_ROOT']; ?>/templates/css/css.css" type="text/css" />
whichever suits your needs - since you may be working locally and have a strange file structure, or a shared style directory for example
The best method is to use:
<link rel="stylesheet" href="<?php echo $_SERVER['DOCUMENT_ROOT']; ?>/templates/css/css.css" type="text/css" />
If I include an HTML page on a PHP page (say, index.php) with the following:
<?php
include ("../../forms/login/form.html");
?>
Then will form.php show up correctly in index.php? When I say correctly, I mean with all of its images and CSS.
The reason I am asking is because that's not the case with me. I tried it out, and it will show the form.html but without any styling...
Any help would be appreciated, thanks!
UPDATE:
Currently, I have the following on forms.html:
<link href="view.css" media="all" rel="stylesheet" type="text/css" />
<script src="view.js" type="text/javascript"></script>
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
Now, forms.html displays correctly by itself.
On index.php, I have:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>UofS :: Residence Life Management System</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
include ("html/header.html");
?>
<?php
include ("php/navigation.php");
?>
<br></br>
<?php
include ("forms/login/form.html");
?>
<br></br>
<?php
include ("html/footer.html");
?>
</body>
</html>
The only reference to forms.html is through the php include(). There is no stylesheet pointing to it. This is the page that does not load forms.html correctly. Is this not right?
Thanks!
The path to your style sheet is probably relative. It will need to be relative to the url in the browser (index.php). Or make it an absolute path.
Edit since your update:
view.css and view.js will not be loaded because their paths are relative. Make those paths absolute or relative from the index.php page. Making them absolute will make them work whenever form.html is included from anywhere. Making the paths relative from index.php will make them work when included from there, but not when included from other directories.
Better yet, if you know you need to load those files, put the links on the index.php page and not the form.html page.
Also note that you can use paths that start with the root of your site, you do not have to include the host and domain name:
<link href="/css/style.css" rel="stylesheet" type="text/css" />
The slash before "css/style.css" will make that an absolute path that will work on your live and dev servers.
Edit...
Assuming that your index.php file is at the root level, try this in forms.html:
<link href="/forms/login/view.css" media="all" rel="stylesheet" type="text/css" />
<script src="/forms/login/view.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
show the form.html but without any styling...
You'll need to adjust the reference to the CSS file accordingly. Probably a better idea to use absolute path.
IF BEFORE
<link rel="stylesheet" type="text/css" href="style.css" />
NOW:
<link rel="stylesheet" type="text/css" href="http://host/path/to/style.css" />
It will include the HTML file verbatim in the PHP page. If the paths on external resources are correct based on the URL of the PHP page then they will show up.