<DOCTYPE! html>
<head>
<link rel="stylesheet" type="text/ccs" href="css/indexcss.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
include("utilbar.php");
include("navbar.php");
?>
</div>
<?php
if (isset($_GET["type"])) {
$page = $_GET["type"];
}
else {
$page = "home";
}
//echo "<body onload=\"changeContent('".$page."')\">";
?>
<!--script>
function contentOnload() {
window.location.href('content.php');
}
</script-->
<script>
function navClick(contentName)
{
window.location.href = "index.php?type=" + contentName;
}
</script>
<div class="container">
<?php include($page.".php"); ?>
</div>
<div class="footer">
<?php include("footer.html"); ?>
</div>
</div>
</body>
</html>
CSS here:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: auto;
margin-top: 0;
padding: 0;
}
.footer {
bottom: 0;
position: absolute;
}
So I'm trying to get a footer to stick under the content of all my includes, but sometimes it jumps above the content of the included file. I've looked up most possible sticky footer guides and tried to apply them, but none seem to work like they should. I've been trying to fix this for a while now.
Here's the footer HTML CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/footercss.css">
<title>Footer</title>
</head>
<body>
<div id="containerf">
<div id="logos"></div>
<div id="foottext">
<img src="images/youtube.png" height="25" width="25">
<img src="images/twitter.png" height="25" width="25">
<img src="images/fbtrp.png" height="25" width="25">
<b>| Schaafstraat 137 | © 2016 Kopala | All rights reserved.</b>
</div>
</div>
</body>
</html>
#containerf {
width: 100%;
height: 180px;
background-color: #006666;
position: absolute;
bottom: 0;
margin-bottom: 500px;
}
#foottext {
line-height: 180px;
text-align: center;
color: #d9d9d9;
}
#foottext img {
padding-right: 5px;
}
In which file did you set the .footer to bottom:0; ? It seems that you declared it in a regular style.css but in the fotter.htm you include footercss.css
You should paste the bottom:0; to the footercss.css
Related
I've tried everything I know to make the height of the black part change according to the "samples" in the picture above. Whenever I add new "sample" that will go down the black part does not follow. Is there something wrong in my code, if there is please let understand how to fix it cause Im new at this.
Here is my code:
body,
html,
.yourteachers,
.fullpage
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.fullpage
{
background-color: black;
}
.leftForm
{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers
{
text-align: center;
}
.announcementSlider
{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/teachers.css">
</head>
<body>
<header>
<nav>
<div class="nav-wrapper blue">
<div class="container">
Teachers
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li><a id="dashb">Home</a></li>
<li><a id="logout">Log Out</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="fullpage">
<div class="leftForm hide-on-med-and-down">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="leftForm sidenav blue center" id="slide_out">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="yourteachers">
<?php
while ($row = mysqli_fetch_array($query)) {
echo '<a class="announcementSlider" href="teacherinfo.php?id=' . $row['IDNum'] . '">
<img src="pictures/blank photo.png" class="teacherpic"><br>
<span>'.$row['LastName'].'</span><br>
<span>'.$row['Grade'].' - </span>
<span>'.$row['Section'].'</span>
</a>';
}
?>
</div>
</div>
<script type="text/javascript">
var a = document.getElementsByClassName("announcementSlider");
for (i = 0; i < a.length; i++) {
a[i].onclick = function() {
location.href = "teacherinfo.php";
};
}
</script>
<script src="js/teachers.js"></script>
<script src="sameFunctions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
<footer>
<div class="foot">
<div class="socialMed">
</div>
</div>
</footer>
</body>
</html>
It's because your .fullpage needs to follow .yourteachers 's height. And your .leftForm has float: left but it's parent (.fullpage) still doesn't know the exact height of it's children. To fix it, you need to add clear: both by using div with additional .clearboth class or css :before or :after pseudo-selector.
see my fiddle here
In my approach above, I'm using fixed sidebar and add margin-left on .yourteachers to fix sidebar height issue. For better implementation, I recommend you to use flex box so you keep your sidebar not using fixed position.
<!-- language-all: lang-css -->
body, html, .yourteachers, .fullpage {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
background: black;
}
.fullpage {
overflow: hidden
}
.leftForm{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers{
text-align: center;
}
.announcementSlider{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
Have u tried height: 100vh? Height is automatically adjusting, so just height: 100% means 100% height of parent.
I have an issue I have been trying to solve. I have created a "blog" you can call it, and I have the option to make a new post. When I make a new post, a div is added. However, when the div gets added, the previous post is shifted to the right. I have tried all sorts of suggestions, but I can't get it. Here is an image:
What I want is so that the divs are lined up properly. Here is my code:
body {
background-color: #558C89;
/*background-color: #1FDA9A;*/
color: #000305; /*remove if background is not working */
font-size: 87.5%; /*base font size is 14px */
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
margin-left: 21.5%;
}
a {
text-decoration: none;
}
a:link, a:visited {
}
a:hover, a:active {
}
.body {
}
form {
display: inline;
}
#logo {
position: absolute;
z-index: 1;
left: 0;
top: 5px;
height: 50px;
vertical-align: top;
}
.mainheader img {
width: 100%;
height: auto;
margin: 0% 0%;
}
.mainheader nav {
background-color: #424242;
/*background-color: #008BBA; /* Here for color of navigated buttons*/
height: 65px;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: right;
display: inline;
margin-top: 0px;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
font-weight: bold;
display: inline-block;
padding: 18px 25px;
height: 10px;
/* Come back here to continue to edit buttons */
}
.mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link,
.mainheader nav .active a:visited {
background-color: #638CA6;
opacity: 0.85;
height: 63px;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.newsClass{
position: absolute;
width: 1000px;
background-color: #404040;
border-style: solid;
border-color: black;
border-width: 1px;
text-align: center;
color: #FFF;
margin: -100px 0 0 -150px;
top: 25%;
left: 27%;
z-index: 2;
}
.topcontent {
background-color: #404040;
width: 850px;
position: absolute;
text-align: center;
color: #FFF;
margin-top: 120px;
border-style: solid;
border-color: black;
border-width: 1px;
line-height: 1;
display: inline-block;
left: 21.5%;
}
#box{
border: 1px solid rgb(200, 200, 200);
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
background: rgba(200, 200, 200, 0.1);
border-radius: 4px;
top:50px;
}
h2{
text-align:center;
color:#fff;
}
#footer {
color: #FFF;
}
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
include("blog.php");
$posts = (isset($_GET['id'])) ? get_posts($_GET['id']) : get_posts();
$username = $_SESSION['username'];
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<!-- CSS -->
<link href="accountCSS/myaccountStyle.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="indexCSS/bootstrap.min.css">
<link rel="stylesheet" href="indexCSS/font-awesome.min.css">
<link rel="stylesheet" href="indexCSS/form-elements.css">
<link rel="stylesheet" href="indexCSS/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="icon" href="images/favicon.gif">
</head>
<body>
<img src="images/logo.gif" id="logo"/>
<header class="mainheader">
<nav><ul>
<?php
if(isset($_SESSION['user_id'])){
echo '<li>Log out</li>';
}else{
echo '<li>Log in</li>';
}
?>
<li>My Account</li>
<li>Contact</li>
<li>Play</li>
<li>Home</li>
</ul></nav>
</header>
<h2 class="newsClass"> Recent News <?php if(getPermissions($username)) {echo 'New Post'; }?>
</h2>
<?php
foreach($posts as $post) {
?>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h2 class ="title"><?php echo $post['title'];?></h2>
<p> Posted on <?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
in <?php echo $post['name']; ?>
<br></br>
<?php
if(getPermissions($username)) {
?>
Edit Post |
Delete Post
<?php
}
?>
</p>
<div class="contents"> <?php echo nl2br($post['contents']); ?></div>
<?php
}
?>
</div>
<div class="form-top-right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-88077370-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
NOTE: I guess the "run snipped" doesn't seem to run php.
It sounds like you are not closing the divs in the correct places.
Make sure your indentation is correct and ensure that every <div> you open inside the foreach is also closed before the foreach is closed.
I like to use foreach(): endforeach; when you have a lot of markup inside a loop like this, as it makes reading the code a lot easier.
<?php foreach ($posts as $post):?>
<div>
<h2 class ="title">
<?php echo $post['title'];?>
</h2>
<p>
Posted on
<?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
in
<a href="category.php?id=<?php echo $post['category_id']; ?>", style="color:green">
<?php echo $post['name']; ?>
</a>
<br></br>
<?php if(getPermissions($username)): ?>
Edit Post |
Delete Post
<?php endif; ?>
</p>
<div class="contents">
<?php echo nl2br($post['contents']); ?></div>
<div>
</div>
<?php endforeach;?>
Adding a wrapping div to each post will provide a box around the markup inside. Divs have display:block be default. It is better practice than using <br /> or <p>&nsbp;</p> as it will give you more control when/if you need to style that element.
I have created a database named Magazine and it has a table social_media. The table has 5 columns namely ID, Headline, Author, Content Short, Content. The Content Short column contains the shorter version of the entire article(which will be displayed in the following code) and the Content column contains the entire article(which will be displayed on clicking the Read More button). I have created a homepage where all the articles from the social_media are displayed in the Content_Left div(NOTE: The Content Short column is displayed and not Content). At the end of each entry from the database there is a 'Read More' button. On clicking on that read more button I want the user to be redirected to a new page 'article.php' where the Headline, Author and Content of the corresponding article will be displayed(The Longer version of the content and not the Content Short). How do I do it? I have created the following webpage:
<?php require_once('connections/connection.php'); ?>
<?php
session_start();
$stmt = $con->query("SELECT * FROM social_media");
?>
<!doctype html>
<html>
<head>
<link href="CSS/Layout.css" rel="stylesheet" type="text/css" />
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<meta charset="utf-8">
<title>Home</title>
</head>
<body style="background-color:#E0DDDD">
<div id="Container">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
<li>Home</li>
<li>Social Media</li>
<li>Tech</li>
<li>Tips & Tricks</li>
</ul>
</nav>
</div>
<div id="Content">
<div id="Content_Left">
<h1><center>Social Media</center></h1>
<table>
<?php
while($records=$stmt->fetch_assoc()) {
$_SESSION["ID"] = $records['ID'];
echo "<tr>";
echo "<th><h3>".$records['Headline']."</h3></th>";
echo "</tr>";
echo "<tr>";
echo "<td>By <strong>".$records['Author']."</strong></td>";
echo "</tr>";
echo "<tr>";
echo "<td>".$records['Content_short']." Read More...</td>";
echo "</tr>";
}
?>
</table>
</div>
<div id="Content_Center">
<h1>Header Here </h1>
<p>Text Goes Here!</p>
</div>
<div id="Content_Right">
<h1>Header Here </h1>
<p>Text Goes Here!</p>
</div>
</div>
<div id="Footer">
<center>Your Copyright Message</center>
</div>
</div>
</body>
</html>
And here is the CSS file(Layout.css):
body{
margin:0;
padding: 0;
}
#Container {
width: 980px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:21px;
}
#Header {
height:120px;
background-image:url(../Assets/Untitled-1.png);
background-repeat:no-repeat;
margin-bottom:21px;
}
#NavBar {
height:60px;
background-color:#000000;
}
#Content {
background-color:#FFFFFF;
margin-top: 20px;
padding: 5px;
overflow:hidden;
}
#Content_Left {
height: auto;
width: 210px;
padding:5px;
float:left;
background-color: lightblue
}
#Content_Center {
height: auto;
padding:5px;
width: 500px;
float:left;
margin-left: 10px;
margin-right: 10px;
background-color: lightblue
}
#Content_Right {
height: auto;
padding:5px;
width: 210px;
float: right;
background-color: lightblue
}
#Container #Content h1 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: bolder;
text-shadow: 0px 0px;
}
#Footer {
padding-top: 10px;
height: 100px;
}
And here is the CSS file(menu.css):
nav ul {
margin:0;
padding:0;
}
nav ul li {
list-style-type:none;
display:block;
width:150px;
height:60px;
float:left;
text-align:center;
line-height:55px;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:17px;
}
nav ul li a {
text-decoration:none;
color:#FFF;
}
nav ul li:hover {
background-color:#BBB5B5;
}
nav ul li:hover a {
display:block;
color:Black;
}
I want to display that article in the new page but with the same background theme. Or is there any other way to display the entire article? I hope this much detail is enough. In case any more information is needed please ask.
EDIT: As per the suggestions of the fellow members I have edited the code. My article.php file now looks like this:
<?php require_once('connections/connection.php');?>
<?php
$articleId = $_GET['articleId'];
// you need to fetch only one record this time for showing only the article that wanted to be read. so use `where` condition
$stmt = $con->query("SELECT * FROM social_media WHERE id = $articleId ");
?>
<!doctype html>
<html>
<head>
<link href="CSS/Layout.css" rel="stylesheet" type="text/css" />
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<meta charset="utf-8">
<title>Home</title>
</head>
<body style="background-color:#E0DDDD">
<div id="Container">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
<li>Home</li>
<li>Social Media</li>
<li>Tech</li>
<li>Tips & Tricks</li>
</ul>
</nav>
</div>
<div id="Content">
<div id="Content_Full">
<table>
<?php
while($records=$stmt->fetch_assoc()) {
echo "<tr>";
echo "<th><h1>".$records['Headline']."</h1></th>";
echo "</tr>";
echo "<tr>";
echo "<td>By <strong>".$records['Author']."</strong></td>";
echo "</tr>";
echo "<tr>";
echo "<td>".$records['Content']."</td>";
echo "</tr>";
}
?>
</table>
</div>
</div>
<div id="Footer">
<center>Your Copyright Message</center>
</div>
</div>
</body>
</html>
However, I am getting the following error:
Fatal error: Call to a member function fetch_assoc() on a non-object
How do I resolve this problem?
Change few thing
in php file
echo "<td>".$records['Content_short']." <a href='article.php'>Read More...</a></td>";
to
echo "<td>".$records['Content_short']." <a href='article.php?articleId= " . $records['ID']. "'>Read More...</a></td>";
then in your article.php
<?php
if(isset($_GET['articleId'])){
$articleId = $_GET['articleId'];
}else{
echo "Invalid access"; die;
}
// you need to fetch only one record this time for showing only the article that wanted to be read. so use `where` condition
$stmt = $con->query("SELECT * FROM social_media WHERE id = $articleId ");
Follow same html code of your article listing page on article.php
Change your below line
echo "<td>".$records['Content_short']." <a href='article.php'>Read More...</a></td>";
To:
echo "<td>".$records['Content_short']." Read More...</td>";
Now you've to get details by ID and display data accordingly.
Hello everyone i am a student that this year got into programmng in the university and i am trying to do something in php.
Want i wan to do here is simply remove the margin from all the right divs. I thought since i have 3 of them i can do tha with just if($i%3==0) but that didnt help me.
I will share the code with you and i would really me gratefull to any answers.
Thank a ton in advantage!
--The code----
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper { width: 960px; margin: 0 auto; background-color:black; padding:20px;}
.box{width:300px; height:30px; background-color: #ff0000; color:#fff; font-size: 20px; float: left; padding: 10px;text-align:center; margin-right: 10px; margin-bottom: 10px;}
.clear {clear:both;}
.box1{margin-right:0px;}
</style>
</head>
<body>
<div class="wrapper">
<?php
for ($i=1; $i<=100; $i++)
echo '<div class="box">'.$i.'</div>';
if($i%3==0){
echo '<div class="box box1">'.$i.'</div>';
}else {
echo '<div class="box">'.$i.'</div>';
}
?>
<div class="clear"> </div>
</div>
</body>
</html>
You can use the nth-child pseudo-selector in CSS so you don't have to do all the work in PHP. For example:
.box {
margin-right: 10px;
/* ... */
}
.box:nth-child(3n+3) {
margin-right: 0;
}
Thanks everyone for you helping me. I finally solved my problem and you guys helped me a lot with your ideas. Here is what i finally have done
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper { width: 920px; margin: 0 auto; background-color:black; padding:20px;}
.box{width:300px; height:30px; background-color: #ff0000; color:#fff; font-size: 20px; float: left;text-align:center; margin-right: 10px; margin-bottom: 10px;}
.clear {clear:both;}
.box1{float:right;margin-right: 0px;}
</style>
</head>
<body>
<div class="wrapper">
<?php
for ($i=1; $i<=100; $i++)
if($i % 3 == 0){
echo '<div class="box box1">'.$i.'</div>';
}else{
echo '<div class="box">'.$i.'</div>';
}
?>
<div class="clear"> </div>
</div>
</body>
</html>
I'm trying to view the contents of a database into a webpage. I'm using this code:
<?php
error_reporting(0);
$host="localhost";
$username="root";
$password="";
$database="pncollege";
mysql_connect($host,$username,$password);
#mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM data";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
echo "";
$i=0;
while ($i < $num) {
$email=mysql_result($result,$i,"email");
$name=mysql_result($result,$i,"name");
echo "";
$i++;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Free Guidance Website Template | Programs :: w3layouts</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates' rel='stylesheet' type='text/css'>
<!------ Light Box ------>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/swipebox.css">
<script src="js/ios-orientationchange-fix.js"></script>
<script src="js/jquery.swipebox.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
<style>
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.4 Georgia, Serif;
}
#page-wrap {
margin: 50px;
}
p {
margin: 20px 0;
}
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
</style>
<!------ Eng Light Box ------>
</head>
<body>
<div class="header-bg">
<div class="wrap">
<div class="total-box">
<div class="total">
<div class="header_top">
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Faculties</li>
<li>Picture Gallery</li>
<li class="active">Principal's Desk</li>
<li>Contact</li>
<div class="clear"></div>
</ul>
</div>
<ul class="follow_icon">
<li><img src="images/fb.png" alt=""></li>
<li><img src="images/tw.png" alt=""></li>
<li><img src="images/rss.png" alt=""></li>
</ul>
<div class="clear"></div>
</div>
<div class="header-bottom">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="logo">
<h1>P.N. College, Parsa</h1>
<h2> ( A constituent unit of Jaiprakash University )</h2>
</div>
<div class="search">
<form>
<input type="text" value="">
<input type="submit" value="">
</form>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="banner-box">
<div class="wrap">
<div class="main-top">
<div class="main">
<div class="heading3">
<h3 style="text-align:center">Admin Panel</h3>
<hr><br>
</div>
<div class="section group">
<center>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo "$userName"; ?></td>
<td><?php echo "$userEmail"; ?></td>
<td><?php echo "$userMsg"; ?></td>
</tr>
</tbody>
</table>
</center>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="copy-right">
<p style="letter-spacing:4px;border-radius:15px 0 15px 0;background-color:#000;padding-top:15px;padding-bottom:15px;width:100%">© P.N. COLLEGE | DESIGNED BY INCREDIBLE SAURAV</p>
</div>
</body>
</html>
Can anyone help me and guide me where I've made a mistake? I know the code is a little messy and I'm sorry for that. I just can't figure out where I've made a mistake.
Change your loop to fetch an array for each row -
while ($row = mysql_fetch_array($result)) {
$email = $row['email']; // assign this array part to a variable
$name = $row['name'];
echo $name ." " .$email . "<br />"; // echo the variables
}
// now you can close the connection, after you have used the results
mysql_close();
Please, stop using mysql_* functions. They are no longer maintained and are officially deprecated. Learn about prepared statements instead, and consider using PDO, it's not as hard as you think.