Header extension issue HTML & CSS? - php

I have a header file which has the navigation menu in it which I include on every page using function (<?php include_once 'header.php'; ?> ). But weirdly some things like my "search" button on pages other then home (index) look differently (I mean header.css dosent work with some elements)!
I will attach screenshots of the home and signup page below so you can see what I mean.
Another "header" releated issue happens when I add tag on the index page (to create side menu) it looks like the css of the "header" although "header" has its own css and index has another one.
Can someone tell me why this is happening! Apparently I cant add images here yet but if you click on teh files below it will open up and you will see what I mean. Thanks
Index page
<?php
include_once 'header.php';
?>
<head>
<title>{{ title }}</title>
<link rel="stylesheet" href="static/index.css">
</head>
<body>
<div class="category-tree">
<h4 class="cat-title">Categories</h4>
<nav>
<ul class="left-menu-categories">
<li class="cat-1">Title</li>
<li class="cat-1">Title</li>
<li class="cat-1">Title</li>
</ul>
</nav>
</div>
</body>
Header file
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>PHP Project</title>
<link rel="stylesheet" type="text/css" href="static/header.css">
</head>
<body>
<nav>
<img src="static/img/logo.png" href="index.php" style="width: 100px">
<div class="wrapper">
<ul>
<div class="search-bar">
<form>
<input class="search-box" type="text" name="" placeholder="Search...">
<button type="submit" class="button">Search</button>
</form>
</div>
<?php
if (isset($_SESSION["userid"])) {
echo "<li><button class='sell' href=''>Button</button></li>";
echo "<li><a href='profile.php'>My Profile</a></li>";
echo "<li><a href='includes/logout.inc.php'>Log out</a></li>";
}
else {
echo "<li><a href='signup.php'>Sign Up</a></li>";
echo "<li><a href='login.php'>Login</a></li>";
}
?>
</ul>
</div>
</nav>
</body>
<div class="wrapper">
Home page
Home page
Login page
Login page


PHP is a serversided language. Include parses a file server sided into another file befor it is sended to users browser for rendering.
So your document would look like:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>PHP Project</title>
<link rel="stylesheet" type="text/css" href="static/header.css">
</head>
<body>
<nav>
<img src="static/img/logo.png" href="index.php" style="width: 100px">
<div class="wrapper">
<ul>
<div class="search-bar">
<form>
<input class="search-box" type="text" name="" placeholder="Search...">
<button type="submit" class="button">Search</button>
</form>
</div>
<?php
if (isset($_SESSION["userid"])) {
echo "<li><button class='sell' href=''>Button</button></li>";
echo "<li><a href='profile.php'>My Profile</a></li>";
echo "<li><a href='includes/logout.inc.php'>Log out</a></li>";
}
else {
echo "<li><a href='signup.php'>Sign Up</a></li>";
echo "<li><a href='login.php'>Login</a></li>";
}
?>
</ul>
</div>
</nav>
</body>
<div class="wrapper">
<head>
<title>{{ title }}</title>
<link rel="stylesheet" href="static/index.css">
</head>
<body>
<div class="category-tree">
<h4 class="cat-title">Categories</h4>
<nav>
<ul class="left-menu-categories">
<li class="cat-1">Title</li>
<li class="cat-1">Title</li>
<li class="cat-1">Title</li>
</ul>
</nav>
</div>
</body>
to which you surely agree would be an invalid HTML markup. You have multipel <head> and <body> sections.
Your actual files should look like this:
Index.php:
<?php
include_once 'header.php';
?>
<div class="category-tree">
<h4 class="cat-title">Categories</h4>
<nav>
<ul class="left-menu-categories">
<li class="cat-1">Title</li>
<li class="cat-1">Title</li>
<li class="cat-1">Title</li>
</ul>
</nav>
</div>
</body>
</html>
header.php:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>PHP Project</title>
<link rel="stylesheet" type="text/css" href="static/header.css">
</head>
<body>
<nav>
<img src="static/img/logo.png" href="index.php" style="width: 100px">
<div class="wrapper">
<ul>
<div class="search-bar">
<form>
<input class="search-box" type="text" name="" placeholder="Search...">
<button type="submit" class="button">Search</button>
</form>
</div>
<?php
if (isset($_SESSION["userid"])) {
echo "<li><button class='sell' href=''>Button</button></li>";
echo "<li><a href='profile.php'>My Profile</a></li>";
echo "<li><a href='includes/logout.inc.php'>Log out</a></li>";
}
else {
echo "<li><a href='signup.php'>Sign Up</a></li>";
echo "<li><a href='login.php'>Login</a></li>";
}
?>
</ul>
</div>
</nav>

Related

im including php file but after that my css and bootstrap is not working

im including db.php on the top of index.php file..but after including it my css and bootstrap is not working
this is my php file which im including. includes inside include is a folder and db.php file is inside it
<?php
include("includes/db.php");
?>
2.this is html code
<!DOCTYPE html>
<html>
<head>
<title>E-COMMERCE</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="top">
<div class="container">
<div class="col-md-6 offer">
welcome guest
shopping card total price:inr 100,total item 2
</div>
<div class="col-md-6">
<ul class="menu">
<li>register</li>
<li>my account</li>
<li>go to cart</li>
<li>login</li>
</ul>
</div>
</div>
</div>
3.this is the php code for dynamic slider
<?php
$get_table="select * from slider LIMIT 0,1";
$run_slider=mysqli_query($con,$get_table);
while($row=mysqli_fetch_array($run_slider)){
$slider_name=$row['slider_name'];
$slider_image=$row['slider-image'];
echo "<div class='item active'>
<img src='admin_area/slider/$slider_image' alt='$slider_name'>
</div>";
}
?>
<?php
$get_table="select * from slider LIMIT 1,3";
$run_slider=mysqli_query($con,$get_table);
while($row=mysqli_fetch_array($run_slider)) {
$slider_name=$row['slider_name'];
$slider_image=$row['slider-image'];
echo "<div class='item'>
<img src='admin_area/slider/$slider_image' alt='$slider_name' >
</div>";
}
?>

Part of html file inside php file doesnt appear when executing the code in localhost

I'm creating a regitration page which includes php,html and css in bootstrap.Here is my php file.
<?php include "header.php"; ?>
<html>
<head></head>
<body>
<!--content-->
<div class=" container">
<div class=" register">
<h1>Register</h1>
<?php if(isset($_GET[ 'error'])) { echo '<font color="red">'.$_GET[ 'error']. '</font>'; echo '<br><br>'; } if(isset($_GET[ 'ok'])) { echo '<font color="blue">You are successfully Registered..</font>'; echo '<br><br>'; } ?>
<form action="process_register1.php" method="POST">
</div>
<div class="col-md-6 register-bottom-grid">
<h3>Personal infomation</h3>
<div>
<span>Full Name</span>
<input type="text" size="30" maxlength="30" name='fnm'>
</div>
<div>
<span>Username</span>
<input type="text" size="30" maxlength="30" name='unm'>
</div>
<div>
<span>Password</span>
<input type='password' name='pwd' size="30">
</div>
<div>
<span> Confirm password</span>
<input type='password' name='cpwd' size="30">
</div>
<div>
<span> Gender</span>
<input type="radio" value="Female" name="gender" id='f'>Female
<input type="radio" value="Male" name="gender" id='m'>Male
</div>
<div>
<span>E-mail address</span>
<input type='mail' name='mail' size="30">
</div>
<div>
<span> No contact</span>
<input type="text" name='contact' size="30">
</div>
<div>
<span> City</span>
<select style="width: 195px;" name="city">
<option>Tirana</option>
<option>Korca</option>
<option>Vlora</option>
<option>Kavaja</option>
</select>
</div>
<input type="submit" value="submit">
</div>
<div class="clearfix"></div>
</form>
</div>
</div>
</body>
</html>
Here is my header.php file:
<?php session_start(); require( 'config.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Online Shopping</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<!--//fonts-->
<!-- start menu -->
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>
$(document).ready(function() {
$(".memenu").memenu();
});
</script>
<script src="js/simpleCart.min.js">
</script>
</head>
<body>
<!--header-->
<div class="header">
<div class="header-top">
<div class="container">
<div class="search">
<form>
<input type="text" value="Search " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}">
<input type="submit" value="Go">
</form>
</div>
<div class="header-left">
<?php if(isset($_SESSION[ 'status'])) { echo '<ul><li>Logout</li></ul>'; } else { echo '<ul>
<li ><a href="login1.php" >Login</a></li>
<li><a href="register.php" >Register</a></li>
</ul>'; } ?>
<div class="cart box_1">
<a href="checkout.html">
<h3> <div class="total">
<span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)</div>
<img src="images/cart.png" alt=""/></h3>
</a>
<p>Empty Cart
</p>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="head-top">
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt="">
</a>
</div>
<div>
<h1 class="title">Welcome
<?php
if(isset($_SESSION['status']))
{
echo $_SESSION['unm'];
}
else
{
echo 'Book Store';
}
?>
</div>
<div class=" h_menu4">
<ul class="memenu skyblue">
<li class="active grid"><a class="color8" href="index1.php">Home</a></li>
<li><a class="color1" href="#">Categories</a>
<div class="mepanel">
<div class="row">
<?php
$query="select * from category ";
$res=mysqli_query($conn,$query);
while($row=mysqli_fetch_assoc($res))
{
echo' <div class="col1">
<div class="h_nav">
<ul>';
echo '<li>
<a href="subcat.php?cat='.$row['cat_id'].'&catnm='.$row["cat_nm"].'">'.$row["cat_nm"].'
</a>
</li>';
}
echo' </ul>
</div>
</div>';
mysqli_close($conn);
?>
<li><a class="color6" href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
The problem is when I try to open the files from localhost only the header of the page appears so this is the result:
How is it possible that the form doesnt appear?

I assume, that your header.php begins a proper html page with doctype, <html> etc... but after
<?php include "header.php"; ?>
you start your html file again:
<html>
<head></head>
<body>
Make sure your markup is valid!

So it looks like your header file isn't a header, it's a complete HTML document. It opens the document (<html>) and then closes it (</html>). So it makes sense that any HTML you put after including the header won't get rendered - the browser will render the header and assume the document is complete.
Instead you header file should end where the markup for the header ends. Usually this is the opening tag for the container of your content.
Then when you include the header file, it will contain all the markup up to where your content begins, and in your form's file you can put the code for the form and it'll get rendered next.
In your case, try removing the </body> and </html> tags from the header file. That will likely work, though your markup will likely need to be updated to make the design coherent. Also, since those are being created by your header, remove the <html>, <head></head>, and <body> tags from your form's file.
You can also create a footer file that you can include after your form content, and it will close the container and the body and html tags.
Edit
May have scrolled to the end of the first code block when I saw the </body></html>, so you can probably disregard the advice to remove them from the header file - they appear to be there only in my imagination. Removing the opening <html>, <body>, and <head> tags from the from file should do the trick however.

PHP and HTML: How to put an element between two includes and link it in another page?

I'm working with HTML and PHP, but I have a problem. I would like to put different content for each of my pages, but I don't know how. I would like to put a content for my index.php page and a different content for my other pages:
http://prntscr.com/8359bu
and my sign-up.php page: http://prntscr.com/8359l4
I have my container with two breadcrumbs (top and bottom). I want to put my content between the two breadcrumbs and for that, I need to put the content here: http://prntscr.com/835a50
Problem: I want to work on a sign-up.php page and I want to code the register form in the sign-up.php page. But I can't, because I need to have an element that allows me to import the code of my sign-up.php: http://prntscr.com/835bq4 to this location: http://prntscr.com/835a50
Index.php:
<?php $title = "Home"; ?>
<?php require "includes/header.php"; ?>
<?php include "includes/footer.php"; ?>
Header.php:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title><?php echo $title; ?></title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="body-container">
<div id="body-pusher">
<?php require "includes/navigation.php"; ?>
<div id="header">
<div class="wrapper">
<span id="logo">
Logo
</span>
<div id="visitor-links">
<ul>
<li class="sign-in">
Sign In
</li>
<li>
<a class="button sign-up" href="sign-up.php">Sign Up</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div id="container">
<div id="breadcrumb-top" class="breadcrumb">
<?php include "includes/breadcrumbs.php"; ?>
</div>
<div id="breadcrumb-bottom" class="breadcrumb">
<?php include "includes/breadcrumbs.php"; ?>
</div>
</div>
</div>
Sign-up.php:
<?php $title = "Sign Up"; ?>
<?php require "includes/header.php"; ?>
<?php include "includes/footer.php"; ?>
Footer.php:
<div id="footer">
<div class="wrapper">
<ul>
<li>
Help
</li>
<li>
Help
</li>
</ul>
<div id="copyright">
Coded by Dylan - ©2015-2016
</div>
</div>
</div>
</div>
</div>
Navigation.php:
<div id="navigation">
<div class="wrapper">
<ul>
<li>
Test
</li>
</ul>
</div>
</div>
I really need help please.

There is no way to solve your issue in the way you want to do. The best solution is to move your #breadcrumb-bottom into footer.php.
In your case :
header.php :
<!DOCTYPE html>
<html lang="en-US">
<head>
<title><?php echo $title; ?></title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="body-container">
<div id="body-pusher">
<?php require "includes/navigation.php"; ?>
<div id="header">
<div class="wrapper">
<span id="logo">
Logo
</span>
<div id="visitor-links">
<ul>
<li class="sign-in">
Sign In
</li>
<li>
<a class="button sign-up" href="sign-up.php">Sign Up</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div id="container">
<div id="breadcrumb-top" class="breadcrumb">
<?php include "includes/breadcrumbs.php"; ?>
</div>
footer.php :
<div id="breadcrumb-bottom" class="breadcrumb">
<?php include "includes/breadcrumbs.php"; ?>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<ul>
<li>
Help
</li>
<li>
Help
</li>
</ul>
<div id="copyright">
Coded by Dylan - ©2015-2016
</div>
</div>
</div>
</div>
</div>
Sign-up.php :
<?php $title = "Sign Up"; ?>
<?php require "includes/header.php"; ?>
<!-- Code here -->
<?php include "includes/footer.php"; ?>
It's also possible to use JS but I'm not convinced it is a good solution in your case.

Twitter Bootstrap navigation tab with <?php include?> does not work

I have a problem with tab navigation. I am not able to display the second and third tab.
Here's the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Dynamic Tabs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Add Employee</li>
<li>Employee List</li>
<li>Employee Schedule</li>
</ul>
<div class="tab-content">
<div id="add" class="tab-pane active">
<?php include('addempform.php');?>
</div>
<div id="sch" class="tab-pane">
<?php include('addschform.php');?>
</div>
<div id="list" class="tab-pane">
<?php include('emplist.php');?>
</div>
</div>
</div>
</body>
</html>
I noticed the error is with the ?php include('xxx.php')?>. How can i fix this problem?
Thanks.

Hello to put some php code in tab panel you must insert it between Iframe
like :
<iframesrc="xxx.php"></iframe>

Ive just corrected your code, jQuery has to be loaded BEFORE bootstrap!
Greetings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Dynamic Tabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Add Employee</li>
<li>Employee List</li>
<li>Employee Schedule</li>
</ul>
<div class="tab-content">
<div id="add" class="tab-pane active">
<?php include('addempform.php');?>
</div>
<div id="sch" class="tab-pane">
<?php include('addschform.php');?>
</div>
<div id="list" class="tab-pane">
<?php include('emplist.php');?>
</div>
</div>
</div>
</body>
</html>

foundation menu is not working in CodeIgniter

I'am new to foundation framework and i trying to integrate foundation with CodeIgniter. Everything working but menu portion is not working. it seems the style is not effecting the menu. its been 2-3 days i'am working on this, please help me to solve this.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="<?php echo base_url().'public/lib/found/'; ? >
css/foundation.css" />
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
modernizr.js"> </script>
<style>
.columns
{
border:1px solid red;
}
</style>
</head>
<body>
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="large-4 columns"><br/><br/></div>
<div class="large-8 columns"><br/><br/></div>
</div>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
jquery.js"> </script>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/
foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

I find the problem. I only added the file which i included in the html page like modernizr.js, foundation.min.js, foundation.css ..etc. But when i added entire foundation folder to my new application its works.

Categories