folder structure
/
|--index.php
+--includes
|--header.html
+--css
|--style.css
I have 2 subfolders in my main project folder. One is a folder called 'includes' and the other one is called 'css'.
I have my
-index.php file in the main folder
-header.html in my 'main/includes' folder
-style.css in my 'main/css' folder
My index.php includes the header.html like this:include_once('includes/header.html'); (this Works!)
My header.html file links the css like this:<link href='../css/style.css' type='text/css' rel='stylesheet'/>
(this does NOT work!)
I don't understand why the css file is not loaded.
I have tried using the base tag, although I'm not sure I'm using it right.
<base href="http://localhost/main" /> (this is NOT working)
You should try using
<link href='css/style.css' type='text/css' rel='stylesheet'/>
As index.php and the css folder lie at the same level.
With
<link href='../css/style.css' type='text/css' rel='stylesheet'/>,
you are asking your server to look after the style.css in upper level directory of index.php which does not exist.
You can also use / because, it points do the document root of the website.
<link href="/css/style.css" type="text/css" rel="stylesheet" />
I don't think you understand how include works. Essentially the code in the referenced file will be copied into the main file, and then processed. So if you're including it into index.php, then you want to reference the CSS file accordingly.
The following should work:
<link href="/css/style.css" type="text/css" rel="stylesheet" />
You'll find it is the most easy to just use absolute paths when using HTML, that way the above like will still be valid, even if you copy it to a file that is in within a folder besides the root.
$siteurl ="http://localhost/project";
(store this variable in config file so that you can use globally)
<link href='../css/style.css' type='text/css' rel='stylesheet'/>
will be changed to
<link href='<?php echo $siteurl;?>/css/style.css' type='text/css' rel='stylesheet'/>
just change from <link href='../css/style.css' type='text/css' rel='stylesheet'/> to <link href='css/style.css' type='text/css' rel='stylesheet'/>
If you are trying to add CSS in html file using PHP require:
<style><?php require("css/style.css");?></style>
Note: <style> tag is important otherwise it will echo plain text
Related
Here is what I want to state
I have this structure-
Now considering the directory I want to add the CSS file to all the files if I am using the project-1 > sub-project > subfile.php
then I should be using <link rel="stylesheet" href="../../asset/css/style.css" />
Again if I use the project-1 > file.php
then I should be using <link rel="stylesheet" href="../asset/css/style.css" />
Now even if I use index.php
then it should be like <link rel="stylesheet" href="asset/css/style.css" />
In short, I want it to access CSS file from any file dynamically. It's a type of autoloading whenever included.
I have tried something but it failed because it's not dynamic
$search = glob("asset/css/style.css");
foreach ($search as $ser) {
$ser = $ser;
}
if(strpos($ser,"asset") !== false){
echo "<link type='text/css' rel='stylesheet' href='asset/css/style.css'>";
}else {
echo "<link type='text/css' rel='stylesheet' href='../asset/css/style.css'>";
}
But the problem is it is not dynamic. Please provide a solid solution. Thanks a lot in advance.
I'm assuming you have domain name like:
domain.local
And your init style url looks like that:
href="asset/css/style.css"
Then you trying to access your project located under proj1 directory:
domain.local/proj1/index.php
using same styles method the url will look like this:
domain.local/proj1/asset/css/style.css
And they are no longer applied
Solution:
You need to use relative approach.
Try this in your link:
<link rel="stylesheet" href="/asset/css/style.css" />
This will helps you no mater how many directories are, always grab styles using root as initial point.
Here are relative question: Why the CSS style is not applied in webpages within subdirectories?
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 use XAMPP and CI 2.14
(I know it's sounds ridiculous, but...) I don't know how to refer to a css file from a view. I've read and tried a lot of examples but, obviously I do something wrong...
<link rel="stylesheet" href="<?php echo base_url();?>css/main.css" type="text/css" />
The base url is: http://localhost/myapp/
Where should I put then main.css file (now is in the webroot/myapp/css folder), and how to reference it from a codeigniter view?
create folder assets:
path is: /assets/css/your_file.css
<link rel="stylesheet" href="/assets/css/your_file.css" type="text/css" />
Try to put the css folder inside the application folder, like this:
/yourapp/application/css/
And then
<link rel="stylesheet" href="<?php echo base_url();?>application/css/main.css" type="text/css" />
I asked in another question about how to reference a file in a higher directory, and the answer is:
<?php include('../filethatineed.html');?>
The problem now is that filethatineed.html can't find it's CSS file. If it's in the same directory as my file that includes it, this works fine. But when it and it's reference files are moved to a different directory, those files can't be located anymore. Opening filethatineed.html in a web browser displays it correctly, so the files are in the correct place.
Here's how I reference them currently, as an example:
<link rel="stylesheet" type="text/css" href="header_style.css">
How should I reference them differently to make sure they work when the file is included from another directory?
Reference them by using an absolute or root-relative path.
<link rel="stylesheet" type="text/css" href="header_style.css">
Either (absolute, protocol-less):
<link rel="stylesheet" type="text/css" href="//yourdomain/path/to/css/header_style.css">
or (root-relative):
<link rel="stylesheet" type="text/css" href="/path/to/css/header_style.css">
You will have to set CSS and image paths according to file in which you are using <?php include('../filethatineed.html');?> not to that file that you are including.
OR you can use this
<link rel="stylesheet" type="text/css" href="//example.com/path/to/image/img.jpg" />
You need to give full path of header_style.css
example
<link rel="stylesheet" type="text/css" href="http://foo.com/css/header_style.css">
or whatever your path is.
The client (= the browser) doesn't see nor care whether your HTML comes from an include() or not. All paths will be relative to the directory of the HTML file that the browser is currently pointing to. Hence, any relative paths you use in filethatineed.html will no longer work.
You'd have to use absolute paths as suggested by Alasjo, or change the relative paths.
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" />