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.
Related
******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.
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.
I don't know what wrong with my code but it wont display the position i want.
Here's the output:
Output of my code
And here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Escapade Travel & Tours</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<!--Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Duru+Sans|Actor' rel='stylesheet' type='text/css'>
<link href="css/bootshape.css" rel="stylesheet">
</head>
<body>
<!-- Navigation bar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Home.html"><span class="green">Escapade</span> Travel & Tours</a>
</div>
<nav role="navigation" class="collapse navbar-collapse navbar-right">
<ul class="navbar-nav nav">
<li class="active">Home
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">Destination <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Boracay
</li>
<li class="active">Palawan
</li>
<li>Cebu
</li>
<li class="divider"></li>
<li>All Destinations
</li>
</ul>
</li>
<li>Special Offers
</li>
<li>Book Now!
</li>
<li>Contact Us
</li>
</ul>
</nav>
</div>
</div>
<!-- End Navigation bar -->
<!-- Content -->
<div class="container">
<div style="clear: both; height:40px;"></div>
<div style="clear: both; height:15px;"></div>
<div style="clear: both; height:15px;"></div>
<div id="cont_razd">
<div id="right">
<h1>Meet Us</h1>
<div style="height:15px;"></div>
<div class="box_us">
<div class="box_us_r">
<img src="img/fish_us1.gif"> Quezon City, Philippines</div>
<div style="clear: both; height:15px;"></div>
<p>
<img src="img/fish_us2.gif"> Telephone: 02-1234567</p>
<div style="clear: both; height:15px;">
<p> Cellphone: 0912-345-6789</p>
<div style="clear: both; height:15px;"></div>
</div>
</div>
<div class="box_us">
<div class="box_us_l"></div>
<div class="box_us_r">
<div class="box_us_r">
<div style="clear: both; height:15px;"></div>
<img src="img/fish_us3.gif" alt="" /> Email Add: escapadetravelandtours#yahoo.com</div>
</div>
</div>
<div class="box_us">
</div>
<div style="height:25px;"></div>
<b> <i> Book us now and get very good rates! :) </b>
</i>
<br/>
</div>
<div id="left">
<h1>Contact Us</h1>
<div style="clear: both; height:15px;"></div>
<?php echo "<form action=" " method="post ">
<b> Name: </b> <br>
<input type=text size=40 name="ContactName ">
<br> <br> <b> E-mail Address: </b> <br>
<input type=text size=40 name="ContactEmail ">
<br> <br> <b> Subject: </b> <br>
<input type=text size=40 name="ContactSubject ">
<br> <br> <b> Message: </b> <br>
<textarea cols=40 rows=5 input type=text size=150 name="ContactMessage "> </textarea>
<br> <br>
<input type="Submit " name="Send " value="Send ">
<input type="Reset " name="Reset " value="Reset ">" ?>
<div style="clear: both"></div>
</div>
</div>
</div>
<!-- End Content -->
<!-- Footer -->
<div class="footer text-center">
<p>© 2016. All Rights Reserved. Created by</p>
</div>
<!-- End Footer -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootshape.js"></script>
</body>
</html>
I want the meet us to be place in the right while the contact us is in the left but it wont place to where i indicate them.
I have put <div id="right"> in meets us and <div id="left"> in contact us.
I'm using notepad ++ here.
This is my expected output
Please help. Thanks!
Just add this css will make as per your expected result:
#left {
float: left;
}
#right {
float: right;
}
Working Fiddle
You can try below code:
<div class="clearfix">
<div class="col-lg-6 col-md-6 col-sm-6">
left
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
right
</div>
</div>
use bootstrap girds see example of bootstrap girds see here also
you could use
<div class="row">
<div class="col-lg-9">
Your Left content
</div>
<div class="col-lg-3">
Your right content
</div>
</div>
the easiest way, while you use Bootstrap..
You have included bootstrap anyway in your code.. So you can use the bootstrap class.
<div class="row>
<div class="col-lg-6 col-xs-12">
<!-- Put your contact Us div here -->
</div>
<div class="col-lg-6 col-xs-12">
<!-- Put your meet Us div here -->
</div>
</div>
div id = "right"
does not place your div to the right, it just gives it an id.
Enclose both the divs in a
div class = "row"
and then the child divs using column span.
Learn about the bootstrap grid system here:-
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Put the "Contact Us" div before the "Meet Us" div. Then Apply float:left; to both the element. Try to avoid float:right; as much as possible.
Otherwise you can use use display:inline-block to both the divs. Will work just like float and on top of that you can even align them vertically.
I have the following codes written:
<html>
<head>
<?php
if (isset($_POST['report']))
{
$name = $_POST['Name'] ;
$email = $_POST['Email'] ;
header('Location: subscriber.php?key='.$name.'?key1='.$email);
}
?>
<script type="text/javascript" src="assets/bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="inner.css" type="text/css" />
<style>
div#copyright {
float: left;
width: 100%;
background: #000;
color: #fff;
padding: 15px 15px;
}
.c_right {
float: left;
width: 50%;
text-align: left;
}
#copyright li {
float: left;
width: 30px;
margin-right: 10px;
list-style:none !important;
}
.c_left {
float: right;
}
</style>
</head>
<body>
<div id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-3">
<h3>Quick Links</h3>
<div id="footnav1">
<ul>
<li>About Us</li>
<li>FAQs</li>
<li>Sitemap</li>
<li>Contact Us</li>
<li>Term & Conditions</li>
</ul>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<h3>Quick Links</h3>
<div id="footnav2">
<ul>
<li>Privacy & Cookie Policy</li>
<li>Megahung Blog</li>
<li>Donate Cashback</li>
<li>How Megahung Works</li>
<li>Why Choose Megahunt?</li>
</ul>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<h3>Quick Links</h3>
<div id="footnav3">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Catalog</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<h3>Newsletter</h3>
<div id="footnav4" class="nl_subscribe">
<form method="post">
<input type="text" name="Name" size="20" class="email_css" placeholder="Enter your name...">
<input type="text" name="Email" size="20" class="email_css" placeholder="Enter your email...">
<input type="submit" name="report" value="Subscribe" class="btn btn-subscribe"/>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="copyright">
<div class="c_right"><h3 class="cp">Copyright © 2015 <span style="color:#ff6803">Megahunt</span>. All Rights Reserved.</h3></div>
<div class="c_left">
<ul class="social">
<li><img src="images/facebook.png"></li>
<li><img src="images/twitter.png"></li>
<li><img src="images/linkedin.png"></li>
<li><img src="images/google.png"></li>
<li><img src="images/instagram.png"></li>
<li><img src="images/pinterest.png"></li>
<ul>
</div>
</div>
</body>
</html>
Now when I click on the Submit button the page is loaded but its actually loaded in the same page not going to subscriber.php page.
I have placed the php block before the html also but still the same issue persists.
Can anyone help me with this issue please.
I reopened the question since the OP does not seem to understand what the duplicate question link's instructions are.
How to fix "Headers already sent" error in PHP
As I said in comments, you are outputting before header, and you're not seeing this warning because your system most likely does not have error reporting enabled. Consult my footnotes about this.
Modify your code to this (rest of code omitted) and exit added.
Sidenote: Make sure there are no spaces before your opening <?php tag and that your file does not contain a byte order mark. Absolutely NOTHING should be above your opening PHP, no includes etc.
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
if (isset($_POST['report']))
{
$name = $_POST['Name'] ;
$email = $_POST['Email'] ;
header('Location: subscriber.php?key='.$name.'?key1='.$email);
exit;
}
?>
<html>
<head>
<script type="text/javascript" src="assets/bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="inner.css" type="text/css" />
...followed by the rest of your code.
Also make sure that your subscriber.php does not also have anything that will cause an output before header.
Footnotes:
Add error reporting to the top of your file(s) which will help find errors.
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
// rest of your code
Sidenote: Error reporting should only be done in staging, and never production.
You should also use a conditional !empty() for your inputs.
I want to break my list items to second column within a particular width so that if its 100 list items then it will create 5 column and 20 raw.
something looks like http://www.huffingtonpost.com/ (LINKS)
My CSS is :
.footer-item {
float: left;
width: 31%;
padding-bottom: 10px;
padding-left: 20px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
.footer-item ul {
font-size: 12px;
text-transform: none;
font-weight: normal;
}
And My Wordpress PHP Code is
</div>
<!-- end content-wrap -->
</div>
<!-- end main-wrap -->
<div id="footer">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Footer") ) : ?>
<div class="footer-item">
<h3>Bookmarks</h3>
<ul>
<?php wp_list_bookmarks('title_li=&categorize=0&limit=10'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Monthy Archives</h3>
<ul>
<?php wp_get_archives('limit=10'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Daily Archives</h3>
<ul>
<?php wp_get_archives('type=daily&limit=10'); ?>
</ul>
</div>
<?php endif; ?>
<div class="clear"></div>
<div id="subscribe">
<h4><img src="<?php bloginfo('template_directory'); ?>/images/feed.png" alt="Subscribe to RSS" /> Subscribe</h4>
<p>Subscribe to RSS or enter you email to receive newsletter for news, articles, and updates about what's new.</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo get_option('feedmail'); ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" onblur="if (this.value == '') {this.value = 'enter your email...';}" onfocus="if (this.value == 'enter your email...') {this.value = '';}" value="enter your email..." name="semail" id="semail" />
<input type="hidden" value="<?php echo get_option('feedmail'); ?>" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" id="submit" value="Subscribe" />
</form>
</div>
<div id="footer_right">
<ul>
<li> Home</li>
<?php wp_list_pages('title_li='); ?>
</ul>
<small> Copyright © <a href="<?php echo get_option('home'); ?>/" class="on">
<?php bloginfo('name'); ?>
</a> <?php echo date("Y",time()+(7*24*60*60)); ?>. All Rights Reserved.</small><br />
<small>wordpress theme by wordpress</small> </div>
</div>
<!-- end footer -->
<?php } ?>
<?php wp_footer(); ?>
I think this is what you want:
http://jsfiddle.net/383uF/4/
#column {
border:1px solid #ccc;
-webkit-column-width:15px;
-moz-column-width:15px;
column-width:15px;
width:120px
}
li {
border:1px solid #ccc;
display:inline-block;
}
<div id="column">
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
<li>8
</li>
<li>9
</li>
<li>10
</li>
<li>11
</li>
<li>12
</li>
</ul>
</div>
Hope this helps but otherwise please elaborate.:)