Issue with part of CSS not loading HTML - php

******UPDATE********
Thank you for your help. This has been very frustrating.
In order to try and show you where I am having issues, I just created 2 pages to show what is going on.
http://www.kolosse.org/stack/border
http://www.kolosse.org/stack/fail
border is partially what I am going for. Not complete, but a start. And oddly enough, using CSS. but just inline on the table tag.
Fail is what I am seeing. Most of the code below is taken (in part) from the files that have made up "fail".
I hope this helps show what the issue is and you are able to see live something I am not.
******END UPDATE********
I am working on a website, and I am having an issue with my CSS not loading in certain sections. Most of the site works great. I am using bootstrap for responsiveness. But there is one spot that is giving me trouble. I have about 10 different pages that all work, that all pull from the CSS, and the page that this is from pulls from the CSS, except just this part. Here is the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="The Krewe of Kolosse based in Dothan, AL" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<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="Mardi gras, mardi, gras, dothan, alabama, parade, gra" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<title>******* | Member Directory</title>
</head>
<body id="directoryP">
<!-- header -->
<div class="header">
<div class="container">
<div class="logo">
<img src="../images/logo.png" class="img-responsive" alt="" />
</div>
<div class="header-right">
<div class="header-top">
<ul>
<li><i class="fb"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="head-nav">
<span class="menu"> </span>
<ul class="cl-effect-15">
<li id="home">HOME</li>
<li id="calendar">CALENDAR
</li>
<li id="ball">BALL</li>
<li id="directory">MEMBER DIRECTORY</li>
<li id="members">LOGOUT</li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<div class="clearfix"> </div>
<!-- script-for-nav -->
<script>
$( "span.menu" ).click(function() {
$( ".head-nav ul" ).slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- script-for-nav -->
</div>
</div>
<!-- header -->
<!-- content -->
<div class="content-top">
<div class="contact">
<div class="container">
<div class="contact-main">
<h3>MEMBER DIRECTORY</h3>
<div class="member-top">
<table class="member-top">
<tbody>
<tr>
<td class="member-top" width="75px"><h5>Member Number</h5></td>
<td class="member-top" width="110px"><h5>First Name</h5></td>
<td class="member-top" width="110px"><h5>Last Name</h5></td>
<td class="member-top" width="250px"><h5>Business</h5></td>
<td class="member-top" width="110px"><h5>Phone</h5></td>
<td class="member-top" width="220px"><h5>Email</h5></td>
<td class="member-top" width="75px"><h5>Year<br>Joined</h5></td>
<td class="member-top"><h5>Notes</h5></td>
<td class="member-top" width="75px"><h5>Status</h5></td>
</tr>
<tr class="member-data">
<td class="member-data">1</td>
<td class="member-data">******</td>
<td class="member-data">******</td>
<td class="member-data">******</td>
<td class="member-data">(***) ***-****</td>
<td class="member-data">****#*****.com</td>
<td class="member-data">****</td>
<td class="member-data">*******</td>
<td class="member-data">*****</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- content -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="soc">
<div class="social">
<ul>
<li><i class="facbk"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="foot-bottom">
<div class="col-md-4 flick">
<h4>SNAPSHOTS</h4>
<ul>
<li><img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img4.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img6.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img9.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img10.jpg" class="img-responsive" alt=""></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-4 flick1">
<h4>POPULAR POSTS</h4>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>Smile King!</p>
</div>
<div class="clearfix"></div>
</div>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>The Lovely Ladies!</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-4 flick">
<h4>EMAIL US</h4>
<div class="flick-form_grid">
<form method="post" action="{domain}/html_float_send">
<input type="text" name="name" maxlength="50" class="textbox" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" name="email" maxlength="80" class="textbox" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
<input type="text" name="phone" maxlength="80" class="textbox" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}">
<input type="text" name="comments" maxlength="1000" class="textbox" value="Comments" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">
<div class="smt">
<input type="submit" value="email">
</div>
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="foot-left">
<div class="foot-nav">
<ul>
<li>HOME</li>
<li>CALENDAR</li>
<li>LEAVE</li>
</ul>
</div>
</div>
<div class="foot-right">
<p>Copyrights © 2017 ******** All rights reserved | Website by ***** | Privacy Policy | Terms & Conditions </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- footer -->
</body></html>
The code functions to create the table. The data from mysql displays. The issue is the table formatting. The CSS formatting is not coming over. I have the various classes created in my CSS (see below), but when I view the site, none of the formatting takes effect. In Chrome, I use more tools -> developer tools and look to see what code is there, and the site is pulling from bootstrap css, but is not pulling from my css.
.member-top table {
color: #f0f0f0;
align: left;
border-spacing: .8em;
border-collapse: collapse;
padding: 10em;
width: 100%;
border: 1em;
}
.member-top tr {
text-align: center;
padding: 10em;
}
.member-top td {
text-align: center;
padding: 10em;
}
.member-data tr {
text-align: center;
padding: 10em;
}
.member-data td {
text-align: left;
padding: 10em;
}
I am aware that a value of 10em is rather large. But at this point I was using a value of that size to see if any changes were being made.
Above is the code for the rendered page. It does not create my borders or space as I want.
Below is the code that works.
.member-top table {
color: #f0f0f0;
align: left;
border-spacing: .8em;
border-collapse: collapse;
padding: 10em;
width: 100%;
border: 1em;
}
.member-top tr {
text-align: center;
padding: 10em;
}
.member-top td {
text-align: center;
padding: 10em;
}
.member-data tr {
text-align: center;
padding: 10em;
}
.member-data td {
text-align: left;
padding: 10em;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="The Krewe of Kolosse based in Dothan, AL" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<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="Mardi gras, mardi, gras, dothan, alabama, parade, gra" />
<script type="application/x-javascript">
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>******* | Member Directory</title>
</head>
<body id="directoryP">
<!-- header -->
<div class="header">
<div class="container">
<div class="logo">
<img src="../images/logo.png" class="img-responsive" alt="" />
</div>
<div class="header-right">
<div class="header-top">
<ul>
<li><i class="fb"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="head-nav">
<span class="menu"> </span>
<ul class="cl-effect-15">
<li id="home">HOME</li>
<li id="calendar">CALENDAR</li>
<li id="ball">BALL</li>
<li id="directory">MEMBER DIRECTORY</li>
<li id="members">LOGOUT</li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<div class="clearfix"> </div>
<!-- script-for-nav -->
<script>
$("span.menu").click(function() {
$(".head-nav ul").slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- script-for-nav -->
</div>
</div>
<!-- header -->
<!-- content -->
<div class="content-top">
<div class="contact">
<div class="container">
<div class="contact-main">
<h3>MEMBER DIRECTORY</h3>
<div class="member-top">
<table align="left" cellspacing="5" cellpadding="8" width="100%" border="2" bordercolor="#777777">
<tbody>
<tr>
<td width="75px">
<h5>Member Number</h5>
</td>
<td width="110px">
<h5>First Name</h5>
</td>
<td width="110px">
<h5>Last Name</h5>
</td>
<td width="250px">
<h5>Business</h5>
</td>
<td width="110px">
<h5>Phone</h5>
</td>
<td width="220px">
<h5>Email</h5>
</td>
<td width="75px">
<h5>Year<br>Joined</h5>
</td>
<td class="member-top">
<h5>Notes</h5>
</td>
<td width="75px">
<h5>Status</h5>
</td>
</tr>
<tr>
<td>1</td>
<td>******</td>
<td>******</td>
<td>******</td>
<td>(***) ***-****</td>
<td>****#*****.com</td>
<td>****</td>
<td>*******</td>
<td>*****</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- content -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="soc">
<div class="social">
<ul>
<li><i class="facbk"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="foot-bottom">
<div class="col-md-4 flick">
<h4>SNAPSHOTS</h4>
<ul>
<li><img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img4.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img6.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img9.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img10.jpg" class="img-responsive" alt=""></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-4 flick1">
<h4>POPULAR POSTS</h4>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>Smile King!</p>
</div>
<div class="clearfix"></div>
</div>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>The Lovely Ladies!</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-4 flick">
<h4>EMAIL US</h4>
<div class="flick-form_grid">
<form method="post" action="{domain}/html_float_send">
<input type="text" name="name" maxlength="50" class="textbox" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" name="email" maxlength="80" class="textbox" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
<input type="text" name="phone" maxlength="80" class="textbox" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}">
<input type="text" name="comments" maxlength="1000" class="textbox" value="Comments" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">
<div class="smt">
<input type="submit" value="email">
</div>
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="foot-left">
<div class="foot-nav">
<ul>
<li>HOME</li>
<li>CALENDAR</li>
<li>LEAVE</li>
</ul>
</div>
</div>
<div class="foot-right">
<p>Copyrights © 2017 ******** All rights reserved | Website by ***** | Privacy Policy | Terms & Conditions </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- footer -->
</body>
</html>
When I hard code the table settings, it works.


After the update in your question, it became clear to me what is wrong.
There is an error in your stylesheet, causing the browser to parse only part of it.
Please review the errors listed by the W3C validator, fix them and all should be fine.

Related

How to insert dynamically created textboxes with the same name into database?

This is my html code. It dynamically creates these textboxes but they all have the same name.
<?php
include 'db.php';
$office = $_GET['office'];
$application_name = $_GET['application_name'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Add Requirements for New Application</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/sidebar.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap css library -->
</head>
<style>
.header--banner {
background-image: url(cb.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
.header--banner {
height: 45.5rem;
}
.jumbotron{
padding: 0.5em 0.6em;
}
.header--banner {
background-image: url(magic.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
.header--banner {
height: 45.5rem;
}
.jumbotron{
padding: 0.5em 0.6em;
position: relative;
text-align: center;
color: black;
}
.green{
text-decoration: none;
font-family: Modern;
font-size: 18px;
border-radius: 5px;
padding: 5px 8px;
background-color: #27ae60;
color: #ffffff;
}
a.green:hover{
text-decoration: none;
background-color: #145a32;
color: #ffffff;
transition: 0.7s;
}
.bs-example2{
border: 3px solid black;
background: #f5f5f5;
text-align: center;
padding:20px;
margin:5px;
height:200px;
}
</style>
<body>
<header class="header--banner">
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="kiosk-HOMEPAGE.php">
HOME
</a>
</li>
<li>
Offices
</li>
<li>
Employees
</li>
<li>
Change Username & Password
</li>
<li>
Reports
</li>
<li>
Log Out
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="jumbotron">
<div class="container-fluid">
<img src="urdBanner.jpg" id="urdBanner" alt="Banner" style="width:100%; height:250px;">
<center><h2 style="position:relative;">Requirements</h2></center>
<p></p>
<img src="menu.jpg" class="rounded-circle" style="width:30px; height:30px;">
<br>
<br>
Previous
<br>
<br>
<form method="get" action="kiosk-NEW_CHARTER_REQUIREMENTS_insert.php">
<input type="hidden" name="office" value="<?php echo $office ?>">
<input type="hidden" name="application_name" value="<?php echo $application_name ?>">
<br>
<div class="row form-group">
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Step By Step Procedure</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Personnel in charge</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Time needed to complete procedure</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Amount of fees if any</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Required Documents</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Procedure for the filing of complaints</b></label>
</div>
</div>
</div>
<div class="form-group fieldGroup">
<div class="input-group">
<div class="col-md-2">
<textarea name="steps[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Steps"></textarea>
</div>
<div class="col-md-2">
<textarea name="personnel[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Personnel"></textarea>
</div>
<div class="col-md-2">
<textarea name="time[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Time"></textarea>
</div>
<div class="col-md-2">
<textarea name="fees[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Fees"></textarea>
</div>
<div class="col-md-2">
<textarea name="documents[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Documents"></textarea>
</div>
<div class="col-md-2">
<textarea name="complaints[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Complaints"></textarea>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<div class="col-md-2">
<textarea name="steps[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Steps"></textarea>
</div>
<div class="col-md-2">
<textarea name="personnel[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Personnel"></textarea>
</div>
<div class="col-md-2">
<textarea name="time[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Time"></textarea>
</div>
<div class="col-md-2">
<textarea name="fees[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Fees"></textarea>
</div>
<div class="col-md-2">
<textarea name="documents[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Documents"></textarea>
</div>
<div class="col-md-2">
<textarea name="complaints[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Complaints"></textarea>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
</div>
</div>
</div>
</div>
</header>
<script type="text/javascript">
$(document).ready(function(){
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
<script type="text/javascript">
// Auto-Grow-TextArea script.
// Script copyright (C) 2011 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
function AutoGrowTextArea(textField)
{
if (textField.clientHeight < textField.scrollHeight)
{
textField.style.height = textField.scrollHeight + "px";
if (textField.clientHeight < textField.scrollHeight)
{
textField.style.height =
(textField.scrollHeight * 2 - textField.clientHeight) + "px";
}
}
}
</script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
this is my insert.php
<?php
if(isset($_GET['submit'])){
$con = mysqli_connect('localhost','root','','information_kiosk');
$office = $_GET['office'];
$application_name = $_GET['application_name'];
$steps = $_GET['steps'];
$personnel = $_GET['personnel'];
$time = $_GET['time'];
$fees = $_GET['fees'];
$documents = $_GET['documents'];
$complaints = $_GET['complaints'];
$totalSize = sizeof($steps);
for($i=0;$i <=$totalSize;$i++) {
$InsertSteps = (!empty($steps[$i])) ? $steps[$i] : '';
$InsertPersonnel = (!empty($personnel[$i])) ? $personnel[$i] : '';
$InsertTime = (!empty($time[$i])) ? $time[$i] : '';
$InsertFees = (!empty($fees[$i])) ? $fees[$i] : '';
$InsertDocuments = (!empty($documents[$i])) ? $documents[$i] : '';
$InsertComplaints = (!empty($complaints[$i])) ? $complaints[$i] : '';;
echo $InsertSteps;
echo "<br>";
echo $InsertPersonnel;
echo $InsertSteps;
echo "<br>";
}
}
?>
*update. with my insert code now it only shows the first row of data but not the 2nd or 3rd
only the first row gets inserted into database but the following dynamically created rows dont. My question is how could i change my syntax so that each row would insert into the database for example.
stepsColumn PersonnelColumn timeColumn feesColumn documentsColumn
array[0] array[0] array [0] array[0] array[0]
array[1] array[1] array [1] array[1] array[1]

HTML - CSS not being applied to id

I'm newbie and trying to make a E-commerce website using Xampp. I'm unable to get the items in content area in a ordered way (see images). What I want but I am getting .
The code for content area in index.php is:
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<?php getPro(); ?>
</div>
</div>
getPro() function in functions.php is:
$con = mysqli_connect("localhost","root","","ecommerce");
//get the products
function getPro () {
global $con;
$get_pro = "select * from products order by RAND() LIMIT 0,6";
$run_pro = mysqli_query($con, $get_pro);
while($row_pro=mysqli_fetch_array($run_pro)){
$pro_id = $row_pro['product_id'];
$pro_cat = $row_pro['product_cat'];
$pro_brand = $row_pro['product_brand'];
$pro_title = $row_pro['product_title'];
$pro_price = $row_pro['product_price'];
$pro_image = $row_pro['product_image'];
echo "
<div id='single_product'>
<h3>$pro_title</h3>
<img src='admin_area/product_images/$pro_image' width='180' height='180' />
<p><b>₹ $pro_price</b></p>
</div>
";
}
}
CSS code in style.css is:
#products_box {
width:780px;
text-align:center;
margin-left:30px;
margin-bottom:10px;
}
#single_product{
float:left;
margin-left:20px;
padding:10px;
}
generated HTML is:
<!DOCTYPE>
<html>
<head>
<title>My online shop</title>
<link rel="stylesheet" href="styles/style.css" media="all" />
</head>
<body>
<!--Main Container starts here-->
<div class="main_wrapper">
<!--header starts here-->
<div class="header_wrapper">
<img id="logo" src="images/logo.gif" />
<img id="banner" src="images/ad_banner.gif" />
</div>
<!--header ends here-->
<!--Navigation bar starts here-->
<div class="menubar">
<ul id="menu">
<li>Home</li>
<li>All Products</li>
<li>My Account</li>
<li>Sign Up</li>
<li>Shopping Cart</li>
<li>Contact Us</li>
</ul>
<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">
<input type="text" name="user_query" placeholder="search a product" />
<input type="submit" name="search" value="search" />
</form>
</div>
</div>
<!--Navigation bar ends here-->
<!--Content wrapper starts here-->
<div class="content_wrapper">
<div id="sidebar">
<!--categories-->
<div id="sidebar_title">Categories</div>
<ul id="cats">
<li><a href='#'>Laptops</a></li><li><a href='#'>Cameras</a></li><li><a href='#'>Mobiles</a></li><li><a href='#'>Tablets</a></li><li><a href='#'>media players</a></li><li><a href='#'>Ebook readers</a></li><li><a href='#'>Graphic tablets</a></li>
</ul>
<!--Brands-->
<div id="sidebar_title">Brands</div>
<ul id="cats">
<li><a href='#'>HP</a></li><li><a href='#'>DELL</a></li><li><a href='#'>LG</a></li><li><a href='#'>Samsung</a></li><li><a href='#'>Apple</a></li><li><a href='#'>Motorola</a></li><li><a href='#'>Xiamoi</a></li><li><a href='#'>Huawei</a></li><li><a href='#'>Blackberry</a></li><li><a href='#'>HTC</a></li> </ul>
</div>
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<div class='single_product'>
<h3>Moto G5 Plus (Lunar Grey, 32 GB)</h3>
<img src='admin_area/product_images/motorola-moto-g5-plus-1.jpg' width='180' height='180' />
<p><b>₹ 15999</b></p>
</div>
<div class='single_product'>
<h3>xiamoi redmi note 3</h3>
<img src='admin_area/product_images/Redmi-Note3-32GB-SDL881680011-2-1b99d.jpg' width='180' height='180' />
<p><b>₹ 9999</b></p>
</div>
<div class='single_product'>
<h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
<img src='admin_area/product_images/Dell Vostro 15 3558 15.6-inch Laptop.jpg' width='180' height='180' />
<p><b>₹ 28000</b></p>
</div>
<div class='single_product'>
<h3>Iphone 6 (32 GB)</h3>
<img src='admin_area/product_images/SP705-iphone_6-mul.png' width='180' height='180' />
<p><b>₹ 30000</b></p>
</div>
</div>
</div>
</div>
<!--Content wrapper ends here-->
<div id="footer">
<h2 style="text-align:center; padding-top:30px;">© 2017 by Technohub
</div>
</div>
<!--Main Container ends here-->
</body>
</html>
Please explain in detail as I'm a newbie

you are using the same ID multiple times,
IDs must be unique,
So use a class instead
instead of <div id='single_product'> use something like <div class='single_product'>
then in CSS
.single_product{
float:left;
margin-left:20px;
padding:10px;
}
Answer after question edited
Here is your code improved using flexbox
#products_box {
display: flex;
flex-wrap: wrap;
max-width: 780px;
justify-content: center;
text-align:center;
/*demo*/
background: pink
}
.single_product {
padding: 10px;
}
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<div class='single_product'>
<h3>Moto G5 Pluspl (Lunar Grey, 32 GB)</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 15999</strong></p>
</div>
<div class='single_product'>
<h3>xiamoi redmi note 3</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 9999</strong></p>
</div>
<div class='single_product'>
<h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 28000</strong></p>
</div>
<div class='single_product'>
<h3>Iphone 6 (32 GB)</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 30000</strong></p>
</div>
</div>
</div>

For future reference:
As #dippas stated, IDs must be unique.
Now you just need to clear cache and cookies and it will work.

Google captcha's size is weird

I put google's recaptcha in my site and it looks really weird when I open it, here's a picture:
my form works and all i just need the recaptcha to prevent bots from spamming or idk what. Thanks!
EDIT: better picture:
Here's my html and php code:
<?php
if (isset($_POST['g-recaptcha-response'])){
var_dump($_POST)
$ip = $_SERVER['REMOTE_ADDR'];
$captcha= $_POST['g-recaptcha-response'];
$secret = 'XXXXXXXXXX';
$respo = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$captcha&remoteip=$ip");
if (isset($data->success) AND $data->success==true) {
} else {
}
}
?>
<html>
<head>
<title>Register</title>
<link rel="stylesheet" type="text/css" href="faggot.css">
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body style="background: url('../t2.png');height: 1700px;"> <!-- body -->
<h1 id="h1">Register</h1>
<form action="register.php" method="post" name="form1" style="background: url('../t1.png');">
<div>
<ul class="ull" id="nameull">
<br>
<br>
<br>
<br>
<div class="div">
<li class="margtop"><h2 class="tooltip" >First name<span class="red">*</span></h2></li>
<li class="margtop"><input id="fnamee" class="bax" type="text" name="fname" required="yes" pattern="^[a-z1-9]+"></li>
</div>
</ul>
<ul class="ull" style="display: inline-block;" id="lname">
<div>
<li class="margtop"><h2 class="tooltip" id="lnaam">Last name<span class="red">* </span></h2></li>
<li class="margtop"><input class="bax" type="text" name="lname" required="yes"></li>
</div>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<ul>
</ul>
<ul class="ull" id="pwull">
<li class="margtop"><h2 class="tooltip" style="margin-right: 30px;">Password<span class="red">*</span></h2><input id="pwinput" class="bax" type="password" name="pw" required="yes"><span class="tp" id="pwinc">Password is encrypted!</span></li>
</ul>
<ul class="ull" id="usrull">
<div class="div" id="div1">
<li>
<h2 class="tooltip">Username<span class="red">*</span></h2>
<input style="margin-left: 40px;margin-top: 100px;width: 200px;" class="bax" type="text" name="uname" required="yes"><span class="tp" id="op">Only use lowercase letters!</span>
</li>
</div>
</ul>
<ul class="ull" id="emailull">
<div class="div">
<li class="margtop"> <h2 class="tooltip" id="emel">Email<span class="red">*</span></h2><input style="margin-left: 40px;margin-top: 100px;width: 300px;" class="bax" type="email" name="email" required="yes"><span class="tp" id="oep">Only one email per account!</span></li>
</div>
</ul>
<ul class="ull" style="margin-left: 500px;margin-top: 100px;display: inline-block;width: 130%;">
<li><div style="" class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXX"></div></li>
</ul>
<ul>
<div class="div">
<li>
<input class="bax" id="sabmitbat" type="submit" value="submit" name="submit1">
</li>
</div>
</ul>
</table>
</form>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="buttonbg.js"></script>
</body>
</html>

Website repeating in a loop after PHP is applied for data retrieval

well I probably ran into a problem this morning and trying to figure out where I'm going wrong. The page was working fine without the PHP but as soon as I stuffed this page with statements from PHP (For displaying data in my website) I observed that my website was repeating with the number of records. Say, 5 records are to be displayed in the website then the website repeats 5 times. I'm using MySQL, PHPmyAdmin and HTML. Any help would be greatly appreciated and I hope I'm not missing out on something very usual. Before looking at the code I would recommend you to just go through the PHP part because before adding PHP, the site was functioning very normally!
Here's all you will need: My HTML code for the particular page:
<?php
error_reporting(E_ALL ^ E_DEPRECATED);
session_start();
if (!(isset($_SESSION['state']) && $_SESSION['state'] != '')) {
header ("Location: ../login.php");
}
else
{
include_once ('E:/Softwares/wamp/www/connection.php');
$username = $_SESSION['username'];
$result = mysql_query("SELECT *from `movie_schedule`");
if(mysql_num_rows($result))
{while($row = mysql_fetch_array($result, MYSQL_BOTH))
{
?>
<!DOCTYPE html>
<html>
<head>
<title>The CineShed Cinemas</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap1.css" rel="stylesheet" type="text/css" media="all">
<!-- web-font -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,700,800,400,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700italic,400italic,300,900,700,900italic,300italic' rel='stylesheet' type='text/css'>
<!-- web-font -->
<!-- js -->
<script src="js/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- js -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
</head>
<body>
<!-- header -->
<div id="home" class="header">
<!-- container -->
<div class="container">
<div class="header-logo">
<h1>The CineShed<span> Cinemas<br>-------------------------------<br>You've logged in as ADMIN</span></h1>
</div>
<div class="top-nav">
<p><a class="Signup play-icon popup-with-zoom-anim" href="#small-dialog3"></a><span> Log Out</P>
</div>
<div class="clearfix"> </div>
<!-- banner Slider starts Here -->
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--//End-slider-script -->
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<div class="header-info">
<p>BY<span> ZARYAB</span><span class="sub-text"> Ali</span></p>
<p>Experience the</p>
<p> third dimension!</p>
<div class="red">DOLBY DIGITAL 3-D</div>
<!--
<div class="button">View Here</div>
-->
</div>
</li>
<li>
<div class="header-info">
<p>BY<span> ZARYAB</span><span class="sub-text"> Ali</span></p>
<p>Premium Seating?</p>
<p> We've got this covered!</p>
<div class="red">TITAN XC</div>
</div>
</li>
<li>
<div class="header-info">
<p>BY<span> ZARYAB</span><span class="sub-text"> Ali</span></p>
<p>Enjoy the awesomeness</p>
<p> of explosive sound!</p>
<div class="red">WITH 7.1 AUDIO CHANNELS!</div>
</div>
</li>
<li>
<div class="header-info">
<p>BY<span> ZARYAB</span><span class="sub-text"> Ali</span></p>
<p>Activities to keep</p>
<p> your wee ones busy!</p>
<div class="red">KID'S CORNER</div>
</div>
</li>
<li>
<div class="header-info">
<p>BY<span> ZARYAB</span><span class="sub-text"> Ali</span></p>
<p>A mouth-watering</p>
<p> menu awaits you!</p>
<div class="red"># Arizona Grill</div>
</div>
</li>
</ul>
<div class="clearfix"> </div>
<!-- banner Slider Ends Here -->
</div>
</div>
<!-- container -->
</div>
<!-- header -->
<!-- sticky -->
<div class="sticky">
<!-- container -->
<div class="container">
<div class="top-header">
<div class="fixed-header">
<div class="sticky-logo">
<h1><a class="scroll" href="#home">The CineShed <span>Cinemas</a> </span></h1>
</div>
<div class="sticky-nav">
<ul>
<li><a class="scroll active" href="#banner">View Trailers</a></li>
<li><a class="scroll" href="#manage">Manage Show Times</a></li>
<li><a class="scroll" href="#offpur">View Purchases</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- container -->
</div>
<!-- sticky -->
<!-- script-for sticky-nav -->
<script>
$(document).ready(function() {
var navoffeset=$(".top-header").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".top-header").addClass("fixed");
}else{
$(".top-header").removeClass("fixed");
}
});
});
</script>
<!-- /script-for sticky-nav -->
<!-- banner -->
<div id="banner" class="banner">
<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><span> </span></a>
<!-- pop-up-box -->
<script type="text/javascript" src="js/modernizr.custom.min.js"></script>
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<!--//pop-up-box-->
<div id="small-dialog" class="mfp-hide">
<iframe src="https://www.ytpak.com/?component=video&task=embed&id=R-XsppzuH-k&branding=no" scrolling="NO" frameborder="0" width="100%" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="https://www.ytpak.com/?component=video&task=embed&id=K-H35Mpj4uk&branding=no" scrolling="NO" frameborder="0" width="100%" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="https://www.ytpak.com/?component=video&task=embed&id=K-H35Mpj4uk&branding=no" scrolling="NO" frameborder="0" width="100%" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div id="small-dialog3" class="mfp-hide">
<div class="login">
<h3>Login</h3>
<p>Enter your account details to login</p>
<input type="text" maxlength="20" value="EMAIL" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'EMAIL';}">
<input type="text" maxlength="10" value="PASSWORD" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'PASSWORD';}">
<input type="submit" value="Submit"/>
</div>
</div>
<div id="small-dialog2" class="mfp-hide">
<div class="signup">
<h3>Register</h3>
<h4>Please Enter Your Details</h4>
<input type="text" value="First Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'First Name';}" />
<input type="text" value="Second Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Second Name';}" />
<input type="text" class="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" />
<input type="text" class="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"/>
<input type="text" class="email" value="Confirm password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Confirm password';}" />
<input type="submit" value="Submit"/>
</div>
</div>
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
</div>
<!-- banner -->
<!-- container -->
<div id="manage" class="container">
<h3><br>Manage Show Times<br></h3>
<div class="col-md-7">
<div class="col-md-6">
<form method="post" action="savemovie.php">
<input type="text" class="text" value="Movie ID" name="field1" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Movie ID';}">
<input type="text" class="text" value="Movie Date" name="field2" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Movie Date';}">
<input type="text" class="text" value="Show Time" name="field3" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Show Time';}">
<input type="text" class="text" value="Movie Cost" name="field4" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Movie Cost';}">
<input type="text" class="text" value="Movie Name" name="field5" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Movie Name';}">
<input type="text" class="text" value="Tickets Availability" name="field6" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Tickets Availability';}">
<div class="clearfix"> </div>
<div class="submit-button">
<input type="submit" value="ADD MOVIE">
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- container -->
<?php
$result1 = mysql_query("SELECT *from `movie_schedule`");
if(mysql_num_rows($result1))
{while($row2 = mysql_fetch_array($result1, MYSQL_BOTH))
{
?>
<!-- content-events -->
<div id="event" class="content-event">
<!-- container -->
<div class="container">
<h3>Show Times</h3>
<div class="event-grids">
<div class="col-md-3 event-grid">
<div class="pic"> </div>
<ul>
<li class="hedding"><?php print($row2['Movie_ID']); ?> <?php print($row2['Movie_Name']); ?></li>
<li class="date"><?php print($row2['Movie_Date']); ?></li>
</ul>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 event-grid small-text">
<p><br><?php print($row2['Show_Time']); ?></p>
</div>
<div class="col-md-2 event-grid large-text">
<p class="text"><?php print($row2['Movie_Cost']); ?></p>
</div>
<div class="col-md-3 event-grid text-button">
<ul>
<li class="num"><?php print($row2['Movie_ID']); ?></li>
<li class="button yellow">Remove</li>
</ul>
<?php
}}
?>
</div>
</div>
<!-- container -->
</div>
<!-- contact-events -->
<!-- content-events -->
<div id="offpur" class="content-event">
<!-- container -->
<div class="container">
<h3>View Offline Purchases</h3>
<div class="event-grids">
<div class="col-md-3 event-grid">
<div> </div>
<ul>
<li class="hedding">Offline Purchase ID</li>
<li class="date">(Serial Number)</li>
</ul>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 event-grid small-text">
<p><br>Movie ID</p>
</div>
<div class="col-md-2 event-grid large-text">
<p class="text">Amount</p>
</div>
<div class="col-md-3 event-grid text-button">
<ul>
<li class="num">Quantity Of Tickets</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="event-grids">
<div class="col-md-3 event-grid">
<div> </div>
<ul>
<li class="hedding">111</li>
<li class="date"></li>
</ul>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 event-grid small-text">
<p>01</p>
</div>
<div class="col-md-2 event-grid large-text">
<p class="text">2100 PKR</p>
</div>
<div class="col-md-3 event-grid text-button">
<ul>
<li class="num">3</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="event-grids">
<div class="col-md-3 event-grid">
<div> </div>
<ul>
<li class="hedding">112</li>
<li class="date"></li>
</ul>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 event-grid small-text">
<p><br>03</p>
</div>
<div class="col-md-2 event-grid large-text">
<p class="text">1400 PKR</p>
</div>
<div class="col-md-3 event-grid text-button">
<ul>
<li class="num">2</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="event-grids">
<div class="col-md-3 event-grid">
<div> </div>
<ul>
<li class="hedding">115</li>
<li class="date"></li>
</ul>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 event-grid small-text">
<p><br>02</p>
</div>
<div class="col-md-2 event-grid large-text">
<p class="text">3500 PKR</p>
</div>
<div class="col-md-3 event-grid text-button">
<ul>
<li class="num">5</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="event-grids">
<div class="col-md-3 event-grid">
<div> </div>
<ul>
<li class="hedding">124</li>
<li class="date"></li>
</ul>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 event-grid small-text">
<p><br>02</p>
</div>
<div class="col-md-2 event-grid large-text">
<p class="text">2800 PKR</p>
</div>
<div class="col-md-3 event-grid text-button">
<ul>
<li class="num">4</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- container -->
</div>
<!-- contact-events -->
<!-- portfolio -->
<div class="portfolio">
<!-- container -->
<div class="container">
<h3>Gallery</h3>
<div class="gallery-images">
<div class="gallery-image">
<img src="images/3.jpg" alt="" />
<div>
<span> </span>
</div>
</div>
<div class="gallery-image">
<img src="images/4.jpg" alt="" />
<div>
<span> </span>
</div>
</div>
<div class="gallery-image right">
<img src="images/5.jpg" alt="" />
<div>
<span> </span>
</div>
</div>
<div class="gallery-image">
<img src="images/7.jpg" alt="" />
<div>
<span> </span>
</div>
</div>
<div class="gallery-image">
<img src="images/6.jpg" alt="" />
<div>
<span> </span>
</div>
</div>
<div class="gallery-image right">
<img src="images/8.jpg" alt="" />
<div>
<span> </span>
</div>
</div>
<div class="clearfix"> </div>
<div class="gallery-text">
</div>
</div>
</div>
<!-- container -->
</div>
<!-- portfolio -->
<!-- contact -->
<div id="contact" class="contact">
<!-- container -->
<div class="container">
<h3>Contact Us</h3>
<div class="col-md-7">
<div class="col-md-6">
<form>
<input type="text" class="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" class="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
</form>
</div>
<div class="col-md-6">
<form>
<textarea value="Message:" onfocus="if(this.value == 'Message') this.value='';" onblur="if(this.value == '') this.value='Message';">Message</textarea>
</form>
</div>
<div class="clearfix"> </div>
<div class="submit-button">
<form>
<input type="submit" value="SEND">
</form>
</div>
</div>
<div class="col-md-5">
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<!-- container -->
</div>
<!-- contact -->
<div class="border-bottom"> </div>
<!-- footer -->
<div class="footer">
<div class="copyright">
<p>
Designed By : Zaryab Ali (07410)
</p>
</div>
</div>
<!-- footer -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<span id="toTopHover" style="opacity: 1;"> </span>
<!-- content-Get-in-touch -->
<?php
}}}
?>
</body>
</html>

You are creating the HEAD and BODY of you page in the loop that returns results from your database.This loop should be further in your page, where you are displaying the actual results, and should show only those results.

Codeigniter PDF is not working

In The below codeigniter code i want to create a pdf file but it displays the webpage.And i down load the tutorial From this site http://blog.luutaa.com/php/generating-a-pdf-using-codeigniter/ and i create helper and i create mpdf folder and put all the extracted files in to it and place the contoller code for pdf.But the issue is not solved .
Controller:
<?php
class Help extends ci_controller
{
function index()
{
$this->load->view('help_view');
}
//to create the data and insetin to the coursesubject table
public function pdf_report(){
$this->load->helper(array('My_Pdf')); // Load helper
$data = file_get_contents(site_url('http://localhost/seatingreport4/index.php/help')); // Pass the url of html report
create_pdf($data); //Create pdf
}
}
?>
View:
<!DOCTYPE html>
<html>
<head>
<?php include_once('header2.php'); ?>
<div id="showhide">
<?php include_once('menu.php'); ?>
</div>
<a id="toggle" onClick="showorhide('showhide')"><img src="<?php echo base_url('img/m.jpg'); ?>" HEIGHT="40" WIDTH="40" BORDER="0" alt="logo"style="margin-bottom:7px; margin-top:7px;" /></a></a>
<br>
<div class="gray_bg">
<div class="container">
<div class="row welcome_inner">
<div class="span13">
<h1 class="p"><span class="k">///</span> Help</h1>
</div>
</div>
</div>
</div>
<style>
.k{
color:#339900;
font-size: xx-large;
}
.p{
font-size: xx-large;
font-weight:900;
}
</style>
<script src="//cdn2.editmysite.com/js/vendor/modernizr.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700" />
<link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/public.css?buildTime=1383786711" />
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/public-ie8.css?buildTime=1383786711" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="http://cdn2.editmysite.com/css/public-ie7.css?buildTime=1383786711" /><![endif]-->
<script> var loginData = {"use_ssl":true,"redirect":false}; var errorMsgs = {"wrongUserPass":"Wrong username or password","loginToAccess":"Please log-in to access that page","loginAgain":"Please log-in again to continue.","accountDeleted":"Your account was previously deleted","accountExists":"You already have an account. Please log-in.","loginInstead":"You already have an account. Please log-in."}; var DISABLE_SIGNUP_CAPTCHA = true; var facebook = {"app_id":"190291501407","domain":"www.weebly.com","user":false}; </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdn1.editmysite.com/libraries/prototype/1.7-custom/prototype.min.js?2"></script>
<script type="text/javascript" src="http://cdn2.editmysite.com/js/public/main.js?buildTime=1383786711"></script>
</head>
<body class="w-ui homepage">
<form id="weebly-signup">
<div class="caret"></div>
<div id="signup-inputs">
<div
id="weebly-email"
class="large block"
placeholder="Email"
/>
<div
id="weebly-new-password"
class="large block"
placeholder="Password"
/>
</div>
<div class="submit-btns">
</div>
<input type="hidden" name="response" id="weebly-login-signup-response" />
<input type="hidden" name="weebly-campaign" id="weebly-campaign" value="" />
</form>
</div> <!-- #sidebar-inner -->
</div> <!-- #sidebar -->
<div id="login-box" class="form-popover-box titled-box">
<form id="weebly-login" method="post" action="https://www.weebly.com/weebly/login.php">
<div class="caret"></div>
<input
type="text"
id="weebly-username"
class="large block"
name="user"
placeholder="Email or Username"
value=""
/><br>
<input
type="password"
id="weebly-password"
class="large block"
name="pass"
placeholder="Password"
/><br>
<p class="remember-me">
<label>
<input
type="checkbox"
id="weebly-remember"
name="rememberme"
checked
/>
</label>
</p>
</form>
</div>
<div id="how-it-works" class="section">
<div class="hgroup">
<h2> Tips to work on Seating Application</h2>
</div>
<div class="article">
<ol id="how-it-works-list">
<li class="tips top">
<div class="content"><span class="icon"></span></div>
</li>
<li>
<h4> Master</h4>
<div class="content">
<span class="talkbubble"><span class="icon grow"></span></span>
<span class="circle mask"><span class="icon grow" ></span></span>
<ul class="bubble">
<li> Exam name,month and year is created in exam master </li>
<li> Course code and name is created in course master</li>
<li> Subject code and name is created in subject master</li>
<li> Room details such room name,no of benches,maximum bench capacity,available status and invigilator is created in room master</li>
</ul>
</div>
<br><br><br><br> <br><br><br><br><br><br><br>
</li>
<li>
<h4> Details</h4>
<div class="content">
<span class="talkbubble"><span class="icon create"></span></span>
<span class="circle mask"><span class="icon create"></span></span>
<ul class="bubble">
<li> Course code and Subject code is created in course subject</li>
<li> Exam name and course code is created in exam course</li>
<li> Register no,name, course code and Subject code for a particular exam is created </li>
<li> Update the course code ,subject code,date and session for particular exam </li>
</ul>
</div>
<br><br><br><br> <br><br><br><br><br>
</li>
<li>
<h4> Seating Plan </h4>
<div class="content">
<span class="talkbubble"><span class="icon publish"></span></span>
<span class="circle mask"><span class="icon publish"></span></span>
<ul class="bubble">
<li> Exam name is selected </li>
<li> Date and session is selected </li>
<li> Course code,Subject code and number of student id displayed </li>
<li> Clicking on System generated it displays seat no ,register no and subject code</li>
</ul>
</div>
<br><br><br><br> <br><br><br>
</li>
<li>
<h4> Seating Report </h4>
<div class="content">
<span class="talkbubble"><span class="icon grow"></span></span>
<span class="circle mask"><span class="icon grow"></span></span>
<ul class="bubble">
<li> Exam name is selected </li>
<li> Date and session is selected </li>
<li> Course code,Subject code and number of student id displayed </li>
<li> Selecting on the Subject code it display Room no,seat no,register no and invigilator as report </li>
<li> Clicking on seating summary it displays exam name ,date,session,room no,subject code,register no ,no of students and invigilator</li>
</ul>
</div>
<br><br><br><br> <br><br><br><br><br>
</li>
<li>
<h4> Upload</h4>
<div class="content">
<span class="talkbubble"><span class="icon grow"></span></span>
<span class="circle mask"><span class="icon grow"></span></span>
<ul class="bubble">
<li> Exam name is selected </li>
<li> Course code for relevant exam is selected </li>
<li> Subject code for corresponding course code is selected </li>
<li> Choose the csv file which has register no and students name and upload it </li>
</ul>
</div>
<br><br><br><br> <br><br><br><br><br>
</li>
<li class="tips bottom">
<div class="content"><span class="icon"></span></div>
</li>
</ol>
</div>
</div>
<script>
function showorhide(id){
if(document.getElementById(id)){ //check the element exists and can be accessed
var ele = document.getElementById(id); //get hold of the element
if(ele.style.display=="none"){ //see if display property is set to none
ele.style.display="block";
}else{
ele.style.display="none";
}
}
}
</script>
<script>
$('#showhide').hide();
</script>
<style>
.talkbubble {
width: 120px;
height: 80px;
background:#339900;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.talkbubble:before {
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
span.picture1 {
width:100px; /*width of your image*/
height:100px; /*height of your image*/
background-image:url('C:\wamp\www\seatingreport1\img\refresh.jpg');
margin:0; /* If you want no margin */
padding:0; /*if your want to padding */
}
</style>

I do believe that site_url doesn't work this way. The function will guess your domain and prepend it to the argument you give. You should try :
site_url("seatingreport4/index.php/help");
It will generate the following
http://localhost/seatingreport4/index.php/help
Or just write without the site_url function
file_get_contents("http://localhost/seatingreport4/index.php/help");

You can use mPDF for generating PDF in Codeigniter.
You can create a controller class and then create function in it. And then do something as bellow code -
public function mypdf() {
$this->load->library('pdf');
$pdf = $this->pdf->load();
$html=$this->load->view('welcome_message',null,true);
$pdf->WriteHTML($html);
// write the HTML into the PDF
$output = 'itemreport' . date('Y_m_d_H_i_s') . '_.pdf';
$pdf->Output("$output", 'I');
}
For more detail you can see the tutorial on mPDF codeigniter here.

Categories