Let's say I have
/index.php
<?php include("boxes/boxes.php"); ?>
boxes/boxes.php
<link href="style.css" rel="stylesheet" type="text/css" />
boxes/stylesheet.css
body{ background-color: yellow; }
The stylesheet won't be included on /index.php, as it'll look in / for the stylesheet instead of boxes/. How do I fix this?
Can you not explicitly write in the href
<link href="/boxes/stylesheet.css" rel="stylesheet" type="text/css" />
The slash in front of /boxes/stylesheet.css will tell the link to start from the start of the domain. That way it can be used anywhere and it will still work
Provide an absolute path to your stylesheet file as follow,
<link href="http://www.example.com/boxes/stylesheet.css" rel="stylesheet" type="text/css" />
This will solve your issue.
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>
In my root, I have index.php which references css files like this:
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/custom.css" type="text/css" />
I have a rewrite rule that makes my path example.com/products/.....
RewriteRule ^products/([0-9a-zA-Z-]+)$ product-detail.php?slug=$1 [NC,L]
The issue I have is that the css links are now broken on the products pages because the reference to the css files is incorrect as it should change to:
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<link rel="stylesheet" href="../css/custom.css" type="text/css" />
I would like to have a header.php file where I can just make changes once if I need to add or remove css references but now I have to have 2 make changes twice. Is there a way around this?
you can start the include with the root path
<link rel="stylesheet" href="/css/style.css" type="text/css" />
I solved this by adding this to the head:
<base href="//localhost:8888/mysite/" />
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.