I have a css file called main.css in my styles folder on the root of my project:
#header
{
background-color: aqua;
height: 120px;
}
In another php file header.php I have something like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/styles/main.css"/>
</head>
<body>
<header id="header"></header>
I also have a footer.php:
</body>
</html>
When combining the in my index.php like this:
<?php
require('includes/header.php');
?>
<?php
require('includes/footer.php');
?>
the result is that my css rules don't get applied. How can I fix this?
problem may be in your css path if php file and style folder both are in root use like this href="styles/main.css"
Link your css file using base
try
href="../styles/main.css"
it seems like your css file path cause this problem.
if your directory structure like this below:
includes
|__header.php
|__footer.php
styles
|__main.css
replace the css path in the header.php like:
href="../styles/main.css"
Related
I'm having a problem with included files accessing the style sheet in my header.php file.
I've created a very basic outline, with just a nav element outline, to see if I could get my inclusions working properly. My index.html has two links:
one to a page at the root level, test.php
a second that is within the includes folder, test2.php.
For whatever reason, my test2.php, although including the header.php element, does not bring in any of the styles. Below is my code from test.php and test2.php, what exactly am I missing?
Test.php
<?php
include 'includes/header.php';
?>
Test2.php
<?php
include 'header.php';
?>
Style.css
nav {
border: 1px solid;
width: 95%;
height: 50px;
}
Header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<nav></nav>
I think you should use ../ to read it's previous containing directory.
It should be like this:
<link rel="stylesheet" href="../style/style.css" />
OR
You can set the base_url of your website, so it will be more flexible even you uploaded it on a hosting.
<link rel="stylesheet" href="<?=base_url().'style/style.css';?>" />
You can read more about creating base_url
Hope this helps!
what is the meaning of :
My index.html has two links:
one to a page at the root level, test.php
a second that is within the includes folder, test2.php.
if that means your index.php contain :
include 'test.php';
include 'includes/test2.php';
you must set your header.php stylesheet link base on your index.php position/directory, like this :
<link rel="stylesheet" href="style/style.css" />
because your index.php that called header.php through test.php and test2.php.
I had to call my resources/includes/header-test.php from a subfolder called subfolder/mypage.php. That was solved with the following code, but gave me a new problem.
<?php include __DIR__.'/../resources/includes/header-test.php'; ?>
The folder structure can be seen here:
The problem is now that the css is not called when I go to mypage.php. So how can I call my css, so it is working in the php files there is in the root directory, and in the subfolders?
testProject/index.php -> css is working
testProject/subfolder/mypage.php -> css is not working
header-test.php
<html>
<head>
<link href="css/style.css" rel="stylesheet" />
</head>
<h1>THIS IS THE HEADER FROM INCLUDE</h1>
index.php
<?php include 'resources/includes/header-test.php' ?>
<body>
<h2 class="font">THIS IS THE INDEX BODY</h2>
<p>The css works on this page when I link to the css like this in the header:</p>
<p>link href="css/style.css" rel="stylesheet" </p>
MyPage subfolder link
</body>
</html>
mypage.php
<?php include __DIR__.'/../resources/includes/header-test.php'; ?>
<body>
<h2 class="font">THIS IS THE BODY OF SUBFOLDER/MYPAGE.PHP</h2>
<p>The css does not work when I link like this in the header</p>
<p>link href="css/style.css" rel="stylesheet"</p>
</body>
</html>
style.css
.font {
color: red;
}
This is a problem with the css/style.css path being relative the the file. You should prefix it with / to tell the page to load the asset from the 'root' of the web directory. In short it should be /css/style.css and that will work for both pages.
You should note that the root of the web directory, is different from the file server root. If you're developing locally and have a file such as index.html that lives in /path/to/your/website/ and you view it in your browser with /path/to/your/website/index.html, it will break the path to the asset.
I created a index.php file that's uses <?php require("sidebar.html"); ?> to include a sidebar; the HTML element of the sidebar shows, however the css styling isn't showing. I've search Google and tried different method but it's not showing, any help would be highly appreciated.
The sidebar.html is located in HTML/ folder. And index.php is located in root/ folder
The css styling for the sidebar is being reference within the sidebar.html file
My css file is located in CSS/ folder
new to web development; Trying to make a sidebar that I can call on every page instead of hard-coding it to every page.
When you include an HTML file into a PHP script, path to all the related files (i.e. files that are referenced in the HTML document) must be relative to the PHP script in which you have included the HTML.
Have a look at the file structure below:
Home
index.php
Includes
Assets
style.css
action.js
header.html
The Assets directory contains CSS and JS files which are included in header.html. Now, if header.html has to be included in index.php that is inside the Home directory, the src/href attributes need to point to the path of css/js files relative to index.php.
Something like this:
<link rel="stylesheet" href="../Includes/Assets/style.css" />
Happy coding :)
Prepare a BASE URL at the top of the page like below (based on your project directory location).
Try
$baseURL = "http://".$_SERVER['SERVER_NAME'];
or
$baseURL = "http://".$_SERVER['SERVER_NAME']."/your_project_dir/";
Use HTML base tag in your <head> tag before your<link> tags like
<html>
<head>
<title>Project Title</title>
<base href="<?php echo $baseURL;">
<link href="your_css_file.css" type="text/css">
</head>
<body>
page content
</body>
</html>
Cross check your "your_css_file.css" location (like css/your_css_file.css or styles/your_css_file.css ...)
Try to add
<style>
...
</style>
In the first and end of your css require file, the css will read as internal stylesheet. And change the extension .css to
.php
I have a index PHP page where I include all PHP files like index.php?page=example. All pages are in another folder, here is the structure:
public_html/index.php
public_html/css/style.php
public_html/pages/
Index calls the CSS file from css/style.php.
Pages are called from index.php like (include pages/example.php) using GET function.
If I run index.php I get no problems with CSS, if I run only the included page like example.php I get CSS problems because the CSS is in index.php and obviously will not show the CSS correct.
But when I run the index.php and include the index.php?page=example then the index CSS show correct but the classes from the included pages does not work...
I suppose the include will only import the code but it seems like something is wrong with the server or I am doing something wrong?
Here is a example code of what I am using. This is index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php
include('pages/example.php');
?>
</body>
</html>
Index.php all css classes works fine but the style class from the included pages does not work they are just not styled
You shouldn't write your css code in a php file. Better create a css file and put your style directives in there. You can include css styles best by following conventions, create a basic html template like the following and link to your css file and include the php in there.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="part/to/file.css"> <!-- link your stylesheet here -->
</head>
<body>
<?php
include('path/to/file.php'); // include your php code here
?>
</body>
</html>
Make sure you have header("Content-type: text/css"); as your first line in php file so it renders correctly as css. Then do not include the file. Instead refrence to it like a normal css file only change the .css to .php. <link rel="stylesheet" href="part/to/file.php">. That should get you working. I am assuming your pulling data from a database to fill in your css, so make sure it is format correctly. Do not use something like .headertext{
color:<?=$row['headercolor'];?>; . Instead declare it in php tags. $color= $row['headercolor']; . Then in css part of php file call that variable. .headertext{
color:<?=$headercolor?>;. Hope that helps
As the question suggests I have an index.php file with html in it and when I try to style it using external or internal css, it doesn't work. But inline css works. By the way I am using xampp on win7 to test the website. And the file structure looks like this c:/xampp/htdocs/test/index.php
Relevant html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<!--This css file contains the css shown below as internal css-->
<style>
body{
background-color: blue;
color: white;
}
.header{
color: white;
}
</style>
<?php
function somefuntion(){
/*I will be adding this function later once the html skeleton
is done.
This function will be calculating some numbers based on the
current date and echoing it.*/
}
?>
</head>
<body>
<section class="header">
<p>Spring</p>
</section>
<section class="body">
<p>Hello world</p>
</section>
</body>
</html>
Can someone also explain why internal css is not working?
Solution found by hRdCoder: missing " mark in the content attribute of meta tag.
<link rel="stylesheet" type="text/css" href="style.css"></link>
Only things to check for are that you add the closing tag and that the style.css file is in the same directory as your index.php.
Edit:
I just noticed that in your that you're missing the last set of quotation marks (") in the content attribute. Could that be affecting the rest of the page?
Also make sure you don't include the <style></style> tags in your external css file
Do one thing. open css file through xampp or wampp.. like
open browser -> search localhost/your folder and then open css or js file ,now copy that address and paste in href or src. hope this will help
the answer could be as simple as adding a class or id to the html tag like lets say there is a button tag like this..
<button>open</button>
and the code you wrote on external css is not working but inline does cuz there might be a class or id or the selector itself imposing the code without you knowing it so that's why it might not be working .That's why try adding a class or id to it like this..
<button class="btn">open</button>
<style>
.btn {
background-color:red;
}
</style>
it might just work..
there is something wrong with your path when linking your external css
is your index.php is in the same folder as your style.css?
<link rel="stylesheet" type="text/css" href="style.css">
try to put it in a separate folder named css
then link it as
<link rel="stylesheet" type="text/css" href="css/style.css">
you can also use firebug plugins for firefox or firebug lite plugin for chrome to check the errors