This is my index.php file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<?php
include('includes/header.php');
include('includes/sidebar.php');
include('includes/content.php');
include('includes/footer.php');
?>
</body>
</html>
This is code for my sidebar.php
<div id="sidebar">
<ul id="list">
<li>Home</li>
<li>flower</li>
<li>Study</li>
<li>Calendar</li>
<li>Diary</li>
</ul>
if I click flower, it will go to flower.php. I didn't include header, sidebar, and footer, and found that it shows only contents of flower.php, not showing header, sidebar, and footer. Is there any way to make it showing? Or should I just write down all the code below again?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<?php
include('includes/header.php');
include('includes/sidebar.php');
include('includes/content.php');
include('includes/footer.php');
You should use your header, footer and sidebar on each of your page, because it won't create any problem because if you need to make change you would only change in required file and the change will occur in all other files as well. While content.php you should have your specific code for each page separately.
Hope this help
Related
This is my directory:
miuse/application
miuse/application/views/templates/header.php
miuse/bootstrap/css
miuse/bootstrap/js
miuse/bootstrap/fonts
This is my controller code:
<?php
class page extends CI_controller{
public function view($page= 'home')
{
if(!file_exists(APPPATH.'views/pages/'.$page.'.php'))
{
show_404();
}
$data['title']='Moodlist home';
$this->load->view('templates/header', $data);
}
}
?>
This is my view code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
<?php echo $title; ?>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="header.css" type="text/css">
</head>
<body>
<header class="container">
<div class="row">
<h1 class="col-sm-4">List</h1>
<nav class="col-sm-8 text-right">
<p>Home</p>
<p>Category</p>
<p>About us</p>
</nav>
</div>
</header>
</body>
</html>
when i run my view normally in a browser it shows proper output but when i load it with codeigniter view then it shows different output which i dont want.
I guess your header.css file is not being loaded.
Put the header.css file in miuse/bootstrap/css directory.
And change your code from,
<link rel="stylesheet" href="header.css" type="text/css">
to
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/header.css" type="text/css">
When loading css and other stuff I would recommend using base_url() in your head area
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('bootstrap/css/bootstrap.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/header.css');?>">
</head>
Make sure you have set the base url in config.php and autoload the url helper.
I'm learning PHP / HTML / CSS. Today I want use Bootsrap.
I use a basic HTML5 template called index.php In this file I want include a footer like this:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="ressources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="ressources/css/style.css">
<script type='text/javascript' src="ressources/script/jquery.js"></script>
<script type='text/javascript' src="ressources/bootstrap/js/bootstrap.js"></script>
<title>Index</title>
</head>
<body>
<div id="wrap">
<p>test</p>
</div>
<?php include('includes/footer.php'); ?>
</body>
</html>
But I dont see my footer in my page. I just put an "Hello World" in my footer.php
I have a basic webpage made up of a few PHP pages and a few CSS stylesheets. One of these stylesheets is style_common.css which is used by all pages on the website to provide a constant theme. I am having a bit of trouble with this file. I currently have only 2 PHP pages which reference this common CSS file.
The home page (index.php) references the CSS file fine, and the stylesheet styles it as you would expect. I copied the entire contents of index.php and pasted it into a second PHP file, then changed a few minor details such as the heading caption. This new page however, doesn't link to the CSS stylesheet.
My code is below:
style_common.css:
body {
background-color: #32BEED;
}
.header {
text-align: center;
padding: 0px;
}
index.php:
<!DOCTYPE HTML>
<html>
<head>
<title>324 SQN Canteen Manager</title>
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_common.css"/>
</head>
<body>
<div class="header">
<img src="images/logo.png" class="aafclogo">
<h3> Canteen Manager</h3>
<h6>Designed by Me</h6>
</div>
<div class="buttonContainer">
<a href="addstock.php"><div class="button">
<p>Add Stock</p>
</div></a>
<a href="sellitems.php"><div class="button">
<p>Sell Items</p>
</div></a>
<a href="recordstocktake.php"><div class="button">
<p>Record Stocktake</p>
</div></a>
</div>
The second page which I copied from index.php and changed a few minor fields:
<!DOCTYPE HTML>
<html>
<head>
<title>324 SQN Canteen Manager</title>
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_addstock.css"/>
</head>
<body>
<div class="header">
<img src="images/aafclogo.png" class="aafclogo">
<h3>Add Stock</h3>
</div>
<div class="buttonContainer">
<a href="index.php"><div class="button">
<p>Home</p>
</div></a>
</div>
Just to give you an example, the background colour of the second page is white, not the colour specified in the CSS file.
Where am I going wrong? Thanks.
You are having the problem because you never linked
style_common.css
to the second page. Instead you have
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_addstock.css"/>
FIX:
add
<link type="text/css" rel="stylesheet" href="style_common.css"/>
to the second page.
The file location of the image is correct and it displays on localhost however doesn't online, how would i be able to get this to work?
I have tried changing the images from png to jpg and using different images and changing the file locations and then updating that on the code however it still does not display the image
<!DOCTYPE HTML>
<html>
<head>
<title>KMS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
</head>
<body id="wrapper">
<div id="header">
<!--Logo-->
<div id="Logo">
</div>
<!--Logo-->
<!--Menu Buttons-->
<?php include 'menu.php';?>
<!--Menu Buttons-->
</div>
<div id="hContent">
<!--Frames--====================================================================-->
<div id="hFrames">
<!--Information go below-->
<div id="infoCon1">
<img id="kms_img" src="Images/Kmsproductsinformation.jpg" style="width:850px;"/>
<b />
<b />
</div>
<!--Information end-->
</div>
</div>
</div>
<!--
footer
-->
</body>
</html>
Try <img id="kms_img" src="images/kmsproductsinformation.jpg" style="width:850px;"/> and ensure that your images directory and kmsproductsinformation.jpg file are in lowercase.
You've got something funny going on with your DIVS. You have what looks like two additional close DIV tags () towards the end of your file - I'd start by fixing those up.
Having said that it also shouldn't really matter if it's localhost or not, or whether it's jpg or png but PNG would be better if you're setting it to a non-100% width.
Try something basic without all the DIVS or your menu.php file and see if that works.
<!DOCTYPE HTML>
<html>
<head>
<title>KMS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
</head>
<body id="wrapper">
<img id="kms_img" src="Images/Kmsproductsinformation.jpg" />
</body>
</html>
I am trying to create a very simple web application, basically to understand the best practices of coding in HTML5, CSS and JavaScript.
My application has 3-4 pages and each one is using same menu header. So I want to make it reusable by writing it in a separate file (either PHP or HTML).
head.php (it is to be made reusable):
<!DOCTYPE html>
<html>
<head>
<link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="menu">
<li>Home<span></span></li>
</ul>
<p>
</p>
</body>
</html>
front.php:
<?php
include ("$_SERVER[DOCUMENT_ROOT]/page/common/head.php");
?>
HTML markup (dirty code):
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="menu">
<li>Home<span></span></li>
</ul>
<p>
</p>
</body>
</html></head>
<body>
<div>
</div>
<p>
</p>
</body>
</html>
I have following questions:
head.php has both <body> and <head> tag. So where should I write these PHP lines to include it? (in <head> or <body>) (I don't want to have multiple <head>s and <body>s in the final page)
What are the other best practice I should follow? (any link to references welcome)
I have already read w3schools.
In my opinion it would be a good idea to read about templating systems or have a look how frameworks/CMS handle this.
Doing it your way, you can't completly avoid repeating e.g. the closing head tag </head> in every content.php.
So this is just an idea:
head.php
<?php
// Some other includes / requires,
// code snippets...
?>
<!DOCTYPE html>
<html>
<head>
<!-- site-wide stylesheets -->
<!-- & js-files -->
<link href="css/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="my/global/scripts.js"></script>
content.php
<?php
include ($_SERVER['DOCUMENT_ROOT'] . '/page/common/head.php');
?>
<!-- put page specific scripts &
<!-- styles here -->
<link href="my/pages/css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="my/pages/js/scripts.js"></script>
</head>
<body>
<div id="container">
<!-- content start -->
<div id="content">
<h1>title</h1>
<p>Your content</p>
</div>
<!-- end of content div -->
<?php
include ($_SERVER['DOCUMENT_ROOT'] . '/page/common/foot.php');
foot.php
<div id="foot">
copyright etc
</div>
</div> <!-- end of container div -->
</body>
</html>
php is rendering html and if you have in both files header of course it will be printed twice
you should separate in includes but don't write in both files tag
example
<header>
<?php
// this file should not include <head> taf
include ($_SERVER[DOCUMENT_ROOT] . '/page/common/header.php);
?>
</header>
BODY
<header>
<?php
include ($_SERVER[DOCUMENT_ROOT] . '/page/common/foot.php);
?>
</header>
include will bring content from head.php and foot.php and will put in index.php file
Another possible solution to avoid multiple head tags which also makes it possible to add additional css files:
<?php
// head.php
$html = <<< EOF
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>{$title}</title>
{$meta}
<link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
{$additional_style}
</head>
<body>
<ul id="menu">
<li>Home<span></span></li>
</ul>
{$mainbody}
{$footer}
{$javascript}
</body>
</html>
EOF;
?>
<?php
// page1.php
$title = 'some title';
$meta = '';
$additional_style = '';
$mainbody = 'your body';
$footer = '';
$javascript = '';
include_once("head.php");
echo $html;
?>
<?php
// page2.php
$title = 'some other title';
$meta = '';
$additional_style = '<link href="../../css/page2.css" rel="stylesheet" type="text/css"/>';
$mainbody = 'your body';
$footer = '';
$javascript = '';
include_once("head.php");
echo $html;
?>
It also allows for multiple levels of inheritance (for example, you could define the same footer for a couple of pages). This principle can also be used without EOF, but I think that it looks nicer this way.
The main downside is that you will get a warning if you do not set all the variables of head.php in the pages including it.