For my site I've been trying to get the background to WORK and to REPEAT, but there's something wrong I guess?
This is my code:
body
{
background-image:url('../images/backkground.png');
}
and then it's included in the index like this:
<?php include 'style.css'; ?>
Yeah I know, those php tags but that's placed before all the rest.
Does anyone have tips on what I'm doing wrong? (If I AM doing something wrong)
You don't use PHP to include a CSS file, you reference it in HTML:
<link rel="stylesheet" href="/path/to/style.css" type="text/css">
Ideally you place this in the <head></head> tags at the top of the HTML page.
You're using PHP's include wrong. What you're doing is including the contents of the file server side.
You want to include the stylesheet in the HTML output:
<link rel="stylesheet" type="text/css" href="style.css">
In PHP this would look like:
<?php
echo '<link rel="stylesheet" type="text/css" href="style.css">';
?>
It could also be a problem with where the file is. It should be in the same directory as the calling page so if you're on site.com/index.php you should be able the see the css file at site.com/style.css.
As the others already told you, you are using the include in the server side, you should use something like
<?php
echo '<link rel="stylesheet" type="text/css" href="style.css">';
?>
But if for any reason you need to use the server side include, you could try the following:
<style>
<?php include 'style.css'; ?>
</style>
Related
I wonder whether anyone could help me resolve some problems I'm having in creating a website using HTML, CSS...and PHP for the first time. (My previous attempts at web design were only in HTML and CSS).
The problem at present is that my home-page (index.php) somehow isn't 'seeing' my stylesheet.css.
The code for the index.php is basically as follows :
<?php
$page_title='Home';
[php-code here, to call in include1.php.....Please see below for details]
?>
<div class="copy">
[page content here, in html]
</div>
<?php
[php-code here, to call in include2.php.....Please see below for details]
?>
My folder structure is :
web
css
stylesheet.css
images
logo.png
includes
include1.php
include2.php
index.php
In attempting to call in include1.php (containing doc type declaration, and Head section including reference to stylesheet.css), I've tried the following (inserted between <?php and ?>, as shown above), all without success :
$pathtoinclude1 = $_SERVER]'DOCUMENT_ROOT'];
$pathtoinclude1 .= "/includes/include1.php";
include_once($pathtoinclude1);
and
include('/includes/include1.php')
In include1.php, my reference to the stylesheet.css is :
<link rel="stylesheet" href="../css/stylesheet.css" media="Screen" type="text/css"/>
When I preview the home-page, all I get is the text in default font (Times New Roman?). None of the styling via CSS is being applied.
Can anyone give me some pointers as to what I'm doing wrong?
If that first answer doesn't work, try replacing
<link rel="stylesheet" href="../css/stylesheet.css" media="Screen" type="text/css">
with <?php include 'style.php'?>
And then in the style.php file include the <style> tags and then add the css regularly.
Since you say you are using php for the first time, make sure you have the correct html declaration.
although you have already worked with html,css just a reminder:
<?php
$page_title='Home';
[php-code here, to call in include1.php.....Please see below for details]
?>
<!DOCTYPE html>
<html>
<head>
<!-- MAKE SURE YOU'RE INCLUDING THE
EXTERNAL CSS FILE HERE BUT NOT TO INCLUDE YOUR PHP INCLUDES!
WHICH ACCORDING TO YOUR FILE STRUCTURE SHOULD BE -->
<link rel="stylesheet"
href="../css/stylesheet.css"
media="Screen"
type="text/css"/>
</head>
<body>
<div class="copy">
[page content here, in html]
</div>
<?php
[php-code here, to call in include2.php.....Please see below for details]
?>
</body>
</html>
When you include() the file from index.php, the path looks like:
<link rel="stylesheet" href="../css/stylesheet.css" media="Screen" type="text/css"/>
This path is going one directory back from index.php which is not a valid path. Your path in include1.php should look like this when you include it in index.php:
<link rel="stylesheet" href="css/stylesheet.css" media="Screen" type="text/css">
Also, if CSS includes properly but styles still do not show up, try removing browser cache.
Try this. It worked for me
Let's assume that you CSS file is named 'css.css'
And it is located in the same directory with you home page.
Just add this at the head tag:
Head
Style
<?php include('css.css') ?>
style
head
Don't forget to add corresponding tags
I am new to this board and since I sadly couldn't find the answer while searching for it, I thought I should post it here :P
Enough from me, I've got the following problem:
I made a website (for practice) and tried to make a guestbook in it.
Worked out pretty well so far, yet I have one big problem. As soon as I try to get from one .php page to another .php page and include a HTML page on there, it wont load the CSS elements anymore.
When going from a .html page to a .php page and including a HTML page, it works perfectly fine.
I've also checked if the path are correct, and if this bug appears on more than just that one .php page, and yea, it made always problems in that scenario.
Here are the include and stylesheet I am using (I hope that's all you need as information)
include('gaestebuchAfterLogin.html');
<link rel="stylesheet" href="../../css/style.css" type="text/css">
Edit:
here is some more code:
<?php
session_start();
?>
<?php
if(isset($_SESSION["login"]))
{
include('gaestebuchAfterLogin.html');
}
else
{
include('gaestebuchFail.html');
}
?>
<?php
session_start();
?>
^ one PHP Element
<?php
if(!isset($_SESSION["username"]))
{
echo "Bitte erst einloggen";
exit;
}
?>
^ the second PHP Element (for example)
well, as said, the include works perfectly fine, when i haven't been on a .php page before. But if i have been on a php page before, it wont work anymore
Edit2:
sorry for posting in answers and thanks for the quick responses :P
Anyways, tried to use the absolute path now, did not work out, too
try and use absolute paths instead, change:
<link rel="stylesheet" href="../../css/style.css" type="text/css">
into:
<link rel="stylesheet" href="/css/style.css" type="text/css">
This:
<link rel="stylesheet" href="../css/style.css" type="text/css">
Or create a path variable from root using $_SERVER to get your url.
Define it and then include your php in the page.
$app_url = $_SERVER['REQUEST_SCHEME'].'://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/';
define("APP_URL",$app_url);
and then
<link rel="stylesheet" href="<?php echo APP_URL?>css/style.css" type="text/css">
For example, my site has 5 CSS files like this...
<link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_fleet.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_service.css" type="text/css" />
<link rel="stylesheet" href="/templates/purity_iii/css/custom_corporate.css" type="text/css" />
Every page of the site will be in one of those "categories" (i.e. marketing, gps, fleet, service or corporate). And this is indicated by a class on the HTML tag. So something like this at the top of every page...
<html class="gps">
I currently have EVERY page calling all 5 style sheets listed above, but it only NEEDS the corresponding style sheet, so I'd like to be efficient if possible.
Is there a way using PHP (or whatever makes sense) to essentially search the tag's class for "gps" or "fleet" (etc.) and if, for example, it found "gps", I could then echo only that style sheet, i.e...
echo "<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />";
This totally depends on how PHP generates your HTML. Another possibility is to do this with JavaScript. You can do it like this:
<script type="text/javascript">
var file = 'templates/purity_iii/css/custom_' + document.documentElement.className + '.css';
var link = document.createElement('link');
link.href = file;
link.type = 'text/css';
link.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
You can for example place the code above between <head> and </head>. Not really a valid answer to your question (PHP solution), but you could consider this as an alternative.
This seems like a poor strategy, albeit I don't know the size of your CSS files and other parameters.
How different are these pages as far as their style goes? From the file names above it looks like you might have a lot of redundant (duplicate) CSS selectors in each file. How much of the CSS in each of those files is actually unique? Is it 5k? 10k? 50k? If it's fairly small, go ahead an put it all in one file. By placing it in one file all the CSS for all the pages of your site will be cached in the user's browser and no additional requests would be needed for subsequent pages.
If combining all files and you have a 500k file and 250k is for a single page then splitting it would make more sense.
A PHP Solution
I'm guessing that your setting the CSS class on the <html> tag with PHP. If so, why not check the value of that variable in your PHP script and add the appropriate CSS file.
Something like this:
<html class="<?php echo $page_class; ?>">
<head>
<link href="custom_<?php echo $page_class; ?>.css">
</head>
This is advice is fairly general but hopefully it points you in the right direction.
try something like
<?php
if($page_type = 'gps')
{
?>
<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
<?php
}
elseif($page_type = 'marketing')
{
?>
<link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
<?php
}
?>
This is a bit hard to explain but I'll give it a go. Lets say I have this in the header of a HTML file called myFile.html:
<!doctype html>
<head>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/hovers.js"></script>
<link rel="stylesheet" href="css/highlight.css">
</head>
I now want to include this file in a php file, lets say index.php. However, all my assets (css, js, etc) are stored in a folder called assets/.
After including (or before?) this html file, is there a way to change all the asset paths to point to assets/*. For example, 'css/reset.css' would be changed to 'assets/css/reset.css' and so on. Note that this isn't just limited to these lines in the header, but also includes things like image elements, etc.
If that's confusing, let me know and I'll try explaining again!
Cheers :)
I usually define a constant for things like this, then it's easily changeable via a config file. It does mean going through your template files and adding this constant variable in, but after that it becomes really easy to change.
So your file would be something like this:
<?php
require_once('config.php');
include('header.php');
config.php would be something like this:
<?php
define('ASSETS_ROOT','/assets/');
and header.php would be like this:
<!doctype html>
<head>
<link rel="stylesheet" href="<?php echo ASSETS_ROOT; ?>css/reset.css" />
<link rel="stylesheet" href="<?php echo ASSETS_ROOT; ?>css/style.css" />
<script src="<?php echo ASSETS_ROOT; ?>js/hovers.js"></script>
<link rel="stylesheet" href="<?php echo ASSETS_ROOT; ?>css/highlight.css">
</head>
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');