So I'm dividing my index.php page into three sections: top, middle, bottom. The middle section will have different html php inlude pages and therefore will require different style sheets. Do I link the specific stylesheets in the individual php include pages, or in the index page? Because in the index page, the different style sheets don't seem to take effect, why is that?
Say your about page has a custom css file it needs you could do something like this:
about.php
<?
$css = array('path_to_css_file', 'path_to_another_css_file');
require_once('header.php'); // aka the top
?>
[about page content goes here]
<?
require_once('footer.php'); // aka the bottom
?>
The in your header.php file you could do this:
header.php
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main_style_sheet.css" />
<?
if (isset($css) && is_array($css))
foreach ($css as $path)
printf('<link rel="stylesheet" type="text/css" href="%s" />', $path);
?>
</head>
<body>
This way you only load what you need for the given page.
Related
I'm working on a website and I want to change the page contents when a user selects which page they want to navigate to. What I'm trying to accomplish would be like ASP.NET where you have only 1 navigation component that is used across all pages and the content of the page changes when a user selects a different page. How would I be able to accomplish this if I'm building a website with HTML/CSS and PHP. Any information I'm getting is how to change page content dynamically from PHP. I want to change the page content from other files in my directory
easy, you'll create normal pages without navigations, with their normal links, then you'll create navigation to add it as a component.
nav.php
<nav>
<ul>
...
</ul>
</nav>
index.php
<?php include_once "nav.php"; ?>
<p>index</p>
contacts.php
<?php include_once "contacts.php"; ?>
<p>contacts</p>
EDIT
If you have too many included and you want a short include to them, you can do this by including all files you want to include then include thi file wherever you want, it's preferred to add them in a separated folder from the pages like components or includes, like
includes / css_files.php
<link rel="stylesheet" href="...">
<link rel="stylesheet" href="...">
<link rel="stylesheet" href="...">
<link rel="stylesheet" href="...">
<link rel="stylesheet" href="...">
<link rel="stylesheet" href="...">
includes / metas.php
<meta bla="" bla="" bla=""\>
<meta bla="" bla="" bla=""\>
<meta bla="" bla="" bla=""\>
<meta bla="" bla="" bla=""\>
include / seo.php
<meta keywords="StackOverflow, HTML">
<meta keywords="StackOverflow, HTML">
<meta keywords="StackOverflow, HTML">
for includes.php files you have to choices:
is to put the include file with the pages in the same directory, and it will be like
includes.php
<?php
include "includes/seo.php";
include "includes/metas.php";
include "includes/css_files.php";
you can but it with other includes in the same directory, but dont remove the includes/ before includes.
includes.php
include "includes/seo.php";
include "includes/metas.php";
include "includes/css_files.php";
then the pages will be like
<head><?php include "includes.php"; ?></head>
<p>...</p>
because including in PHP includes the code COPY&PASTE, so you'll treat it as you write it in pages. For example, index.php will be like if you didn't write includes/ before the filename:
<head>
<?php
include "seo.php";
include "metas.php";
include "css_files.php";
?>
</head>
index lorem ipsum
and it will not include it, so nor the include only takes the file and place it in the file as it is without changing anything
You can use PHP include function to control elements from only one file. Write this in your index.php in the place where you want to place header
<?php include('path\header.php'); ?>
and in header.php write the code like
<header>
...
</header>
and you could add css, javascript, jquery resource files into index.php
And advantage of include code is when visitor look at your page source or developer tools' source it will appear as your header.php file not php include line.
Very quick question. I am building a site and have the header and footer as PHP includes. Is there a way to have separate external stylesheets for the header, footer and index without one overriding the others.
In your case You can try the following method:
header.php
<?php
//..some code
$style = 'main.css';
?>
somefile.php
<?php
include 'header.php';
$style = 'xx.css';
?>
index.php
<link rel="stylesheet" type="text/css" media="print" href="<?=$style?>" />
You need to have three different css files, one for each of (Header, Body and footer) and the name of Ids and Classes must be unique.
So I've recently discovered how to use php includes to include a footer and header in each of my files to avoid copy pasting all the header/footer code to each file. But let's say I have a footer.php, header.php, home.php, and about.php
Do I have my title, opening html/body tag, etc. in the header.php or home.php and about.php.
//header.php
<html>
<head>
links to header.css
links to home.css
links to about.css
</head>
<body>
//home.php
<?php include("header.php"); ?> //PROBLEM: the header.php also includes other .css such as "about.css", etc. that could result in problems later.
</body>
</html>
What Should I do to fix this? One way I thought of is to remove the beginning part(html,head,title) of the header.php file and move it home.css and about.css so they each have their own css links.
You're on the right track. Break out the stylesheets as well as the javascripts into other php files and include them as well. So all pages have the following structure.
home.php
<?php $this_page = "home.php";
include "template.php";
For other pages, just replace the $this_page variable. The structure common to all pages is actually the template.
template.php
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- CSS-->
<?php include "stylesheets.php" ?>
</head>
<body>
<!-- common header -->
<?php include "header.php" ?>
<section>
<!-- PAGE CONTENT HERE determined by $this_page value -->
<!-- 'content_home.php', 'content_about.php'... have the content-->
<?php include "content_$this_page" ?>
</section>
<!-- common footer -->
<?php include "footer.php" ?>
<!-- link javascript files -->
<?php include "scripts.php" ?>
</body>
</html>
The only thing that changes from one page to the next is the value of $this_page. It's what determines which content gets loaded in the template above, and it also determines which CSS and JS files to include.
stylesheets.php
<?php
$cssDir = "path/to/styles/"; //folder where all CSS files live
//Link each page to its CSS file
$styles = [
'home.php' => 'home.css',
'about.php' => 'about.css',
'contact.php' => 'contact.css',
];
?>
<!-- CSS common to all pages -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/common.css"?>>
<!-- CSS, specific to the current page -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/$styles[$this_page]"?>>
The same approach can be used with the javascript you link to in scripts.php. Now that your HTML is into discrete modules, it is easy to edit a part of your site without worrying about another part breaking. In particular I recommend never to open a tag in one php file and close it in another because that would be a nightmare to debug, maintain and modify as your site gets bigger.
About paths:
Remember that when the browser sees the page, in place of include "stylesheets.php" and include "scripts.php", it will see the echoed contents of that file exactly as they are. So in those files you want your path to be either:
absolute paths from your domain root (simplest)
relative paths from the location of the top-level php file (eg home.php)
just the file name, if it is located in PHP's include PATH (places where PHP looks for content by default before throwing an error)
For header and nav you have to create a seperate file like nav.php which will contain only the nav and your site header not <head></head> and include it after your header.php. LIKE
//Home.php
<?php
include("header.php"); this will contain your head part mostly your .css and .js files
include("nav.php"); This will only contain header and nav
// home.php code goes here
?>
Also use below code will automatically get path to your root.
<?php
$PATH = "http://localhost/Folder/"; // change this when needed
$PAGE = basename($_SERVER['PHP_SELF']);
?>
Then Add your files like this
<link rel="stylesheet" href="<?php echo $PATH; ?>assets/plugins/font-awesome/css/font-awesome.css">
the bottom line is your code being accessible & easy to maintain, I would have a head.php, header.php & footer.php file. In the head.php you may want to include your config.php if you are connecting to a database & also have all the <html><head><title><link><script> tags you will include in every page then on your index.php or home.php
include('head.php');
include('header.php');
etc etc
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 have menu.php, and in the <head> section of menu.php, I have menu.css as a link rel tag of course, both of which work perfectly fine.
Since menu.php is a 'menu', I've required it on pages that need a 'menu' in order to navigate around the website. However, whenever I require menu.php on a page that has its own CSS stylesheet, menu.php inherits the <body> font-size of the other stylesheet.
Here is what I'm trying to say: So if I require menu.php on profile.php, menu.php elements will become the size of profile.css, instead of what they really ought to be(menu.css). How can I fix the following problem? Currently, I am requiring menu.php BEFORE the <html> tag.
Should I put this within <head>? Somewhere else?
Thank you.
Some of the code from menu.php:
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
</body>
</html>
I've put my PHP code before the <html> tag in the file above.
The below code comes from main.php:
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
If I understand you correctly, you include a complete html page generated by menu.php before the html in main.php. That would get you 2 <html> sections, 2 <body> sections, etc. in one document. That should lead to lots of trouble.
You should include your menu in for example a div inside the main page like (just an example):
main.php:
<body>
<div id="nav">
<?php require 'menu.php'; ?>
</div>
...
</body>
and put all menu styles in the main style-sheet, pre-fixed with #nav. Or as a separate style-sheet, but still pre-fixed with #nav (every style) so that they overwrite the main document's styles.
Could you paste the content of your menu.php? Because if there are and section there...you're doing it wrong, because in that way you're going to have two head and two body parts. Think for require in php as copy and paste.
Your options:
Migrate to some template system(as Smarty for example).
If there should be menu.php on each page, why not putting this css as static file in the header
Paste some code, so we could help you easier ;)