I am currently creating my first website and i have some trouble, i want to include a page between a navbar and a vertical bar, and i want to change to page to include when a click on a button of my vertical bar. Here is a screen :
Screen of my Website
And here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Memeable | The 1# world meme generator</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap-social.css" rel="stylesheet">
</head>
<body>
<div >
<?php
include("head.php");
?>
</div>
</body>
Here is my head.php :
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Memeable</a>
</div>
</div>
</nav>
<div class="vertical-menu">
Premier
Deuxième
Troisième
Quatrième
</div>
I'm sure that the solution is easy but i don't see how to do.
Thank you for your help !
To show your content in your "content area" use include. You provide the file name you want to load as an argument. Use an array to specify all the valid files you want to use, then use a $_GET parameter to select the correct sub page to load.
<?php
$files = array();
$files['home'] = 'home.php';
$files['contact'] = 'contact.php';
$files['whatever'] = 'you_want.php';
?>
Then later at the location where you want the content to be displayed use the following code:
<?php
if (isset($_GET['nav'], $files[$_GET['nav']])) {
include $files[$_GET['nav']];
} else {
include $files['home']; // default page
}
?>
To "call" the right sub page add the ?nav=... query parameter to your URLs like
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
Related
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>
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
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.
I have a variable called $cat(which stands for 'category') in the URL.
Depending on whether it is "a" or "b" I swap the stylesheet using a link:
<?php
if($cat == "a") { ?>
<link rel="stylesheet" href="/css/styleA.css">
<?php }
elseif($cat == "b") { ?>
<link rel="stylesheet" href="/css/styleB.css">
<?php } ?>
styleA.css makes the background-color of the header blue, and styleB.css makes it red
<div id="header" data-role="header" data-position='fixed'>...</div>
if I click on a link that looks like this:
Click for red
Click for blue
the URL actually works (content is incuded depending on $cat) and I do get the value of $cat but the stylesheet does not seem to have swapped, since the color doesn't change. But if I reload the page (with the URL given by the link before) the stylesheets swap and everything works perfectly.
I used the same method for the desktop version of the website I'm working on and everything works perfectly fine.
This issue seems to only appear if I use jquery mobile.
Does anyone see why this isn't working as it should?
EDIT (adding html):
This is pretty much it, but here's the rest of it:
headpart:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="/css/codiqa.ext.css">
<link rel="stylesheet" href="/css/style.css">
<?php if($cat == "a") { ?> <link rel="stylesheet" href="/css/styleASS.css"> <?php }
if($cat == "b") { ?> <link rel="stylesheet" href="/css/styleBB.css"> <?php }
?>
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
</head>
<div data-role="page" id="page">
<div id="panel_menu" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li role="heading">Navigation</li>
<li>Home</li>
<li>Products</li>
<li>Service</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
<div id="header" data-role="header" data-position='fixed'>
<h1>Header</h1>
Menu
</div>
<div data-role="content">
<?php include "$menu_page_content";?>
a
b
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" class="ui-icon-nodisc">
<ul>
<li><a href="#" id='language' data-icon='custom'>Change Language</a></li>
<li><a href="#" id='category' data-icon="custom" >Change Category</a></li>
<li><a href="#" id='contact' data-icon="custom" >Contact</a></li>
</ul>
</div>
</div>
</div><!-- page -->
EDITIT:
Uploaded it to a free hoster: here
You may either click on one of the links in the content area, or on "category" in the footer area. Click & reload the page.
If most of your styles are the same with the exception of the color I would suggest putting them in a single style sheet and writing in a class to the body.
For Example
.header {
/* general header styles margins paddings and whatnot */
}
.cat-a .header {
background-color: red;
}
.cat-b .header {
background-color: blue;
}
Then variably write the class in on the body
<body class='cat-<?php echo $cat; ?>'>
It must depends on how data are cached on the browser you're using.
Several solutions are possible.
You could not swap CSS stylesheet, but add style properties using PhP or Javascript. That way you'll be 100% sure it will change. (As long as the user has javascript by the way, PhP would make it really 100% sure)
Or force the browser to reload CSS sheets everytime, but it's not a bandwidth friendly solution, I would not recommend that.
In case you want to use it to save user's choice and reload the correct background everytime, give a look at this :
http://www.dynamicdrive.com/forums/archive/index.php/t-44389.html
Didn't find any SO link though
I basically use php variables to store the value of the title and the body's ID.
This last one is a technique to have my button (pressed) in the navigation according to which section of the page the user is (in this case the user will know he is currently at "home").
Beginning of my index.php:
<?php
$title = "New Project";
$body = "home";
include("common/header.php");
?>
<div id="content">
<div class="container">
<div id="tagline">
Beginning of my header.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="styles/slimbox2.css" />
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
<link rel="stylesheet" type="text/css" href="styles/contact.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/slimbox2.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="<?php echo $body; ?>">
<div id="header">
<div class="container">
<div id="topbar">
<h1>wider design</h1>
<ul id="lang">
<li>English</li>
<li>Español</li>
<li>中文(繁體)</li>
<li>中文(简体)</li>
</ul>
<ul id="nav">
<li class="home">home</li>
<li class="products">products</li>
<li class="about">about</li>
<li class="contact">contact</li>
</ul>
To let the user know in which section he/she is:
#home li.home a, #products li.products a, #contact li.contact {
color: #999;
}
is there a simpler way of doing this?
Am I using unnecessary those PHP variables?
Yes, what you're doing is fine. I do something similar with a PageTemplate class. In addition to setting the title and navigation, it allows navigation links to appear based on user authentication, allows javascript and css to be added to the head section, etc.
What you're doing is very common. There are a million ways to do it, but they'll all require setting some variables.
janoChen,
I use the following method:
// get the url
$url= $_SERVER['PHP_SELF'];
// add a class on the menu item
<ul id="lang">
<li><a href="index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?>>English</a></li>
//with css I set a style for the class active
li a.active {
color: #990000;
}
But you method also works.
Or else use an MVC framework like CakePHP
This works, but you should consider using a template engine such as Smarty instead.