I recently asked a question about my php includes and received the answer. Now that the include accesses the correct file, my html/css/javascript web pages show some hope. The only issue is that the php includes of the pages have this look:
Instead of this:
Is there a way for the php includes to access the css files? My current code for one page that contains the includes is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<title> Water Polo, The Best Sport</title>
</head>
<body>
<div class="wrapper">
<?php
include'../includes/header.php';
?>
<?php
include'../includes/navbar.php';
?>
<div class= "content">
</div>
<?php
include'../includes/footer.php';
?>
</div>
</body>
</html>
Header.php
<?php echo'<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> Water Polo!</h2></div>';>
To develop the website I am currently using MAMP and running the code which is in a folder by putting it in htdocs.
I took the header out of the php include and made the css file work with the document, but one thing remains the same. The code that I included in the document via php does not take on the effects of the css document, but the header, which now is out of the include and is written write in the document works. Is there a way to allow the code which has been included via php to access the working css file? If it would facilitate the answering process, I'll post any necessary pictures. Just comment below.
You have correctly identified the problem, that the HTML cannot find the CSS. That is directly because of this tag:
<link rel="stylesheet" href="styles.css" type="text/css" />
Specifically, this part of the tag:
href="styles.css"
You have told your code to look for the styles.css file in the same directory as the index.php file. Is that correct?
Usually, the web site structure looks like this:
public_html
- css
- js
- includes
- img
Your website seems to be structured like this:
includes
public_html
Imagine yourself inside the index.php file. All files that are INCLUDEd become part of index.php, as if they were there originally. So, you are expecting to find the CSS file here (as per your <link rel="stylesheet" tag):
public_html/style.css
If they are really inside a CSS folder, then perhaps this will fix it:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Update:
No need to echo out your HTML in PHP, you can literally just do this:
header.php
<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> Water Polo!</h2>
</div>
If the other include files are similar, then it appears your rendered file will all be HTML. Therefore, the next step is: where is your style sheet? Try this. In the address bar of your browser, type:
localhost/styles.css
And see if your stylesheet appears. If not, try this:
localhost/css/styles.css
If the second one works, then change this:
<link rel="stylesheet" href="styles.css" type="text/css" />
to this:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Note: I might not have your path structure correct. Amend as required.
Short answer = no.
You may want to look into using SASS. Besides minifying the css files, you can also set it up so the main (in your case styles.css) pull from several SASS files. For example you could have the following SASS files: main.scss, header.scss, navbar.scss, & footer.scss. If your IDE supports SASS, when you save any one of these files it can automatically compile all four into your styles.css file. Then all you need is to reference that one file and you are set.
http://thesassway.com/beginner/how-to-structure-a-sass-project
I am using the slim framework to create a website and have views and twig in my project. In my pages, I use php to help facilitate what html is rendered in my webpage. An example is below
<html>
<head>
<title>I ain't afraid of no bugs!</title>
<link rel="shortcut icon" type="image/x-icon" href="../_images/_logos/bug-hunter-icon.ico" />
<link rel="stylesheet" type="text/css" href="../_css/home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript" src="_javascript/login.js"></script>
<script type="text/javascript" src="_javascript/sign_up.js"></script>
</head>
<body>
<?php require 'header_login.php' ?> //problem
<!--div banner, content-area, footer -->
</body>
</html>
and then I render this page by
$app->render('home.php');
However, the html in header_login.php is not loaded onto the page. Instead when I inspect the element, the page looks like
What I do not understand is why the code I am linking to is not being displayed there. The code being imported is a simple navigation bar. But even if I put echo "lala" on the pages, nothing php is displayed.
Read Twig documentation:
http://twig.sensiolabs.org/doc/tags/include.html
{% include 'header_login.php' %}
Or see SlimPHP - PHP view
https://github.com/slimphp/PHP-View
You can see the difference with the Twig View
https://github.com/slimphp/Twig-View
If the header_login.php file is in the same directory as home.php, you should be able to change it to
<?php require __DIR__ . '/header_login.php' ?>
This tells PHP to load it from the same directory as the current file, rather than the directory of the script being executed.
I've created an CSS external style sheet for a webpage of my website. I have uploaded it to the server and have used the following code in my PHP file to load the webpage. However, the webpage just loads as if it ignores the style sheet. Here's the code in the PHP file that I have used so I just uploaded the HTML tags here. Any help would be a great help. Thanks.
<html>
<head>
<link rel="styleshhet" type="text/css" href="/webspace/httpdocs/new_select3_style_sheet.css">
<script>function goBack() {window.history.back()}
</script>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<link rel="styleshhet" type="text/css" href="/webspace/httpdocs/new_select3_style_sheet.css">
goes to:
<link rel="stylesheet" type="text/css" href="new_select3_style_sheet.css">
First you had a typo -> stylesheet not stylshhet second all paths run from above httpdocs in public facing HTML (where your site will be) so you need to remove everything above that! e.g.
/webspace/httpdocs/new_select3_style_sheet.css
If your domain was example.com then /webspace/httpdocs/ = example.com/ when building URLs
I have top section and footage section common on all pages of my website. I have css classes defined for these sections. What I want to do is to create common file of classes of these two sections and use it on every page, so that if I want to edit something in this section, I have to do it at one place only.
I have different css for middle section of each web page. So if I want create one common css file for top and bottom section, I have to have two css files for one web page. So my real question is can I have two css files for one web page? If yes, how to include and manage them? If no, is there any way to achieve my purpose?
And the best solution will be if I don't need to change html of each page also. If I can create an html page which has top and bottom section. And use this html page on every web page. It will be very useful, as it will save many edits, if I want to change something.
It is not a problem to link two different style sheets:
<link rel="stylesheet" type="text/css" href="commonStyles.css" />
<link rel="stylesheet" type="text/css" href="specificAboutUsPageStyle.css" />
You can have multiple CSS files for a web page, like so:
<link rel="stylesheet" type="text/css" href="header_footer.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
Within the header_footer.css, define your styles, for header and footer.
Since your using php (according to your tags) as your scripting language you can use php includes to create your header, main content and footer.
Page: MainContent.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="headerStyles.css" />
<link rel="stylesheet" type="text/css" href="mainStyles.css" />
<link rel="stylesheet" type="text/css" href="footerStyles.css" />
</head>
<body>
<?php include("header.php"); ?>
<p>Main Content</p>
<?php include("footer.php"); ?>
</body>
</html>
Your header.php and footer.php then contain your code for those respective pages.
Personally I wouldn't recommend separate style sheets as it will increase your page load time because the client needs to make separate calls to retrieve these files. I'm sure you have common styles and creating one stylesheet will be more efficient to maintain.
I have googled a lot but it seems that I am doing something wrong.
I want to do this:
<?php
include 'header.php';
include'CSS/main.css';
...
?>
However, my page prints the CSS code.
Note: I want to use PHP to include the CSS file, and not use
I also do you want to rename my CSS file to a PHP file as some website mentioned.
Any clues?
Many thanks.
You have to surround the CSS with a <style> tag:
<?php include 'header.php'; ?>
<style>
<?php include 'CSS/main.css'; ?>
</style>
...
PHP include works fine with .css ending too. In this way you can even use PHP in your CSS file. That can be really helpful to organize e.g. colors as variables.
You are including the CSS code as text in your PHP page. Why not just link it in the traditional fashion?
<link rel="stylesheet" href="CSS/main.css" type="text/css">
you can use:
<?php
$css = file_get_contents('CSS/main.css');
echo $css;
?>
and assuming that css file doesn't have it already, wrap the above in:
<style type="text/css">
...
</style>
To use "include" to include CSS, you have to tell PHP you're using CSS code. Add this to your header of your CSS file and make it main.php (or styles.css, or whatever):
header("Content-type: text/css; charset: UTF-8");
This might help with some user's connections, but it theoretically (read: I haven't tested it) adds processor overhead to your server and according to Steve Souder, because your computer can download multiple files at once, using include could be slower. If you have your CSS split into a dozen files, maybe it would be faster?
Steve's blog post: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Source: http://css-tricks.com/css-variables-with-php/
<?php
define('CSSPATH', 'template/css/'); //define css path
$cssItem = 'style.css'; //css item to display
?>
<html>
<head>
<title>Including css</title>
<link rel="stylesheet" href="<?php echo (CSSPATH . "$cssItem"); ?>" type="text/css">
</head>
<body>
...
...
</body>
</html>
YOUR CSS ITEM IS INCLUDED
This is an older post, however as the info is still relevant today an additional option may help others.
Define a constant for the file path per Stefan's answer. The
definition can be placed at the top of the PHP page itself, or within
an included/required external file such as config.php.
(http://php.net/manual/en/function.include.php)
Echo the constant in PHP tags, then add the filename directly after.
That's it!
Works for other linked files such as JavaScript as well.
<?php
define('CSS_PATH', 'template/css/'); //define CSS path
define('JS_PATH', 'template/js/'); //define JavaScript path
?>
<!-- Doctype should be declared, even in PHP file -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>main.css">
<script type="text/javascript" src="<?php echo JS_PATH; ?>main.js"></script>
</head>
<body>
</body>
</html>
If you want to import a CSS file like that, just give the file itself a .php extension and import it anyway. It will work just fine :)
You can also do the following:
Create a php file in includes folder, name it bootstrap_css.php for example
paste the css code files to file created above
<?php
$minCss=' <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">';
$business = '<link href="bootstrap/css/modern-business.css" rel="stylesheet">';
echo $minCss;
echo $business;
?>
in the html header, include the css files as follows
<?php include_once 'includes/bootstrap_css.php'; ?>
You could do this
<?php include("Includes/styles.inc"); ?>
And then in this include file, have a link to the your css file(s).
I don't know why you would need this but to do this, you could edit your css file:-
<style type="text/css">
body{
...;
...;
}
</style>
You have just added here and saved it as main.php. You can continue with main.css but it is better as .php since it does not remain a css file after you do that edit
Then edit your HTML file like this. NOTE: Make the include statement inside the tag
<html>
<head>
<title>Sample</title>
<?php inculde('css/main.css');>
</head>
<body>
...
...
</body>
</html>
I solved a similar problem by enveloping all css instructions in a php echo and then saving it as a php file (ofcourse starting and ending the file with the php tags), and then included the php file.
This was a necessity as a redirect followed (header ("somefilename.php")) and no html code is allowed before a redirect.
Just put
echo "<link rel='stylesheet' type='text/css' href='CSS/main.css'>";
inside the php code, then your style is incuded. Worked for me, I tried.
This is the format of what I have which works:
<head>
<title>Site Title</title>
<?php include 'header.php'; ?>
</head>
Inside my header.php I have:
<!doctype html>
<html class="no-js" lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/images/icon/favicon.ico">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
The file name must be something other than a .CSS index. Write the following:
<link rel="stylesheet" href="style.css" type="text/css" />
The best way to do it is:
Step 1:
Rename your main.css to main.php
Step 2: in your main.php add
<style> ... </style>
Step 3: include it as usual
<?php include 'main.php'; ?>
That is how i did it, and it works smoothly..
_trace its directory, I guess
echo css('lib/datatables_rqs/jquery.dataTables.css');