I want to separate my code to make it clearer. To do so, instead of having one big php file I spare them and keep one "main" file where I include the others when I need. The problem is that CSS only apply to the "main" file, but not to included files.
I'm pretty sure this is not a path issue, for I'm working with every files in the same folder (I know it's not the best way to work, but so far I only have few files so it's not a big deal). I have double checked eventual writing mistakes.
Here is my "main" php file :
<!DOCTYPE html>
<html>
<head>
<title>A very nice title</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="utf-8" />
</head>
<body>
<?php include("file2.php"); ?>
</body>
and here is my "file2.php" file :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="utf-8" />
</head>
<div class="beer">
<img src="simple_beer.png" alt="beer picture"/>
<div class="description>
<p> a simple text </p>
<form id="add" action="[nothing interesting]">
<input type="number>
<input type="submit" value="add to card">
</form>
</div>
</div>
So i'm using the same CSS files for both php files. But it's not working on the file2.php when I have a look at it (I'm working on a local host). I've tried to delete cache from my browser (firefox). If you're wondering why I'm working on php files instead of HTML, it's simply because I intend to add php code later.
I have been looking for a solution for almost two hours, nothing seems to work. Thanks in advance !
Include everything header-related inside main.php file, remove head section from file2.php and then include file2.php in the body section of main.php. When you include that file, it will get everything that is above. That means whatever you have in main.php before include() function, will be accessible in called file (thanks to that you can link everything once and have it available in all called files).
Include() brings full code structure from the called file which you do not need (talking about head tag) if main file will hold everything that you need inside tag.
Related
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 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
I have a very basic question I just can't seem to figure out or find the answer too. My php won't work on my local host (wamp) or when i upload it to my website/server.
I simply want to "include" two files on my index.php file to display additional html. For whatever reason, the php won't work and won't display anything outside of what is currently in my index.php file.
Here is my index.php
<php? include 'inc/header.php';?>
<div class="container">
<p>main content.what is going on</p>
</div>
<php? include 'inc/footer.php';?>
here is an example of my header.php file..
<!doctype html>
<html>
<head>
<title>stuff</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Is stuff here?</h1>
</header>
I just can't seem to figure it out and any thoughts would be VERY helpful.
You have PHP start tag wrong. It should be
<?php
I am creating my portfolio site and I am wanting to include the head section as a php include on my page. Reason being is because the site will have a fair few pages and I will want to make changes later on to things later on like tidying up the css files.
For example;
<head>
<?php include('head.php'); ?>
</head>
as opposed to all this below being shown on each and every page:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/1140.css">
<link rel="stylesheet" href="css/ie.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>
I just didn't know if this was good practice to do, as with this being my portfolio site, I need the code to be correct from the start also as they will probably look into the standard of it also.
What are your opinions and advice people? Thanks.
Yep, it's quite standard. But instead of writing:
<head>
<?php include('head.php'); ?>
</head>
you should put the tags inside head.php. I say it's better because what's inside head.php has no sense without the head tags, so they are kinda linked together. It's good practice to join things so linked into a single file without having to repeat open and close head tags for each page.
Actually, it's even good practice (and commonly used) to have header.php, body.php and footer.php files that has respectively:
header.php
<html>
<head>
...
</head>
<body>
body.php
...
footer.php
</body>
</html>
I'm doing that in my application but I've found that it's not a good idea, because you have many of your stylesheets, javascripts, etc in a php file including the head section and you'll have problems with including it in php files in nested folders. this problem is because of relative paths.
If you can use absolute paths then it's ok otherwise it's not a good idea ...
PHP Includes are used like this all the time. Any time that you have content that will be the exact same on every page, it is very helpful to use an include
This is an old topic but I use
<?php include_once("phpinclude/head.txt"); ?>
phpinclude is it's own folder and I keep the footer, header, and common place info in that folder. .js, and .css has it's own as well.
Edit: I use require now. I would rather have a code fail and die rather than give some random string. They are the same except one dies and the other will print out an error or random code. This is for people learning PHP, not old heads.
I intent to create a template PHP file, this template will only serve the design, not the content. The purpose is to decrease the development time in a sense that when creating a new PHP file or new module, I can only need to concentrate on the main function of that PHP file not the design. Once I created the new file using the template, it should be able to display the consistent design and serve its specific function.
The issue is that I am not sure on how to make the design of the template works and applied to all of the new files created regardless of the location (as long as it is within the root directory).
As an example:
root directory (www.example.com): /
homepage (www.example.com/index.php): /index.php
css file: /style/style.css
template file: /template.php
newly created file (www.example.com/subone/find/css/file.php): /subone/find/css/file.php
another newly created file (www.example.com/subtwo/locate/css.php): /subtwo/locate/css.php
Content of the homepage (which is created base on the template.php, but the CSS file location is hard coded):
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here;</div>
</div>
<div id="main">main content goes here;</div>
<div id="footer">footer goes here; </div>
</body>
</html>
but, when I created a new file, /subone/find/css/file.php
the location of the css must be changed and specified manually, like this:
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="../../../style/style.css" />
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here</div>
</div>
<div id="main">main content goes here;</div>
<div id="footer">footer goes here;</div>
</body>
</html>
So, what I want to achieve is that, when creating a new file (/subone/find/css/file.php), I don't need to do anything, I can straight away concentrate on the main section:
<html>
<head>
<title>Testing</title>
...style.css is handled automatically
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here</div>
</div>
<div id="main">main content goes here;
<?php
//I can continue to edit the file from this line onward
echo "I am concentrating on the main function of file.php right now!!";
?>
</div>
<div id="footer">footer goes here;</div>
</body>
</html>
example page can be seen at (only the desired design): neoborn.kodingen.com
I accept any answers as long as it can achieve my intention (template).
Thank you :)
Why don't you use absolute paths when referring to CSS files and other resources in your template file?
For example:
<link rel="stylesheet" type="text/css" href="/style/style.css" />
There are 2 options,
Use absolute paths for your css files <link rel=stylesheet href="/style/style.css">
Use HTML's <base> element to cause all relative paths on the page relate to it.
I would use a easy to install template engine. That will help speed up development and still give you the freedom to do whatever PHP you like.
Try http://www.raintpl.com/ that should be quick and easy for you to install and get back to coding the pages. If you include it in your PHP inc folder, it will be available for every PHP file you create. So you won't need to add an include line at the top of each PHP file.
Index.php
<?php define('BASE_URL', 'http://localhost'); ?>
Template.php
<link rel="stylsheet" type="text/css" href="<?php echo BASE_URL; ?>/style/style.css ?>" />