I need some help regarding my little css code. I want all my elements to be still in the stage of zooming in and zooming out in the browser.
I would appreciated a little tweak in my code.
The CSS Code:
form{
position:absolute;
top:270px;
right:490px;
}
input{
}
ul{
margin-top: 330px;
padding-left: 410px;
}
li{
padding:10px;
list-style-type: none;
display:inline;
font-size: 13px;
font-family: "Lucida Console";
}
h4{
position: fixed;
margin-left: 1115px;
margin-top: -220px;
letter-spacing: 2px;
}
Index code:
<html>
<head>
<title>Pogo++</title>
<link rel="stylesheet" type="text/css" href="search.css">
<link rel="stylesheet" type="text/css" href="http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff">
</head>
<body>
<center>
<img src="pogo++.jpg" width="510px" height="auto">
</center>
<form action = "search.php" method="get">
Pogo: <input type="text" name="value" placeholder="Search Anything" style="height:40px; width:240px;" >
<input type="submit" name="search" value="Pogo It" style="height:40px">
</form>
<?php
$con=oci_connect('system','system','localhost/XE');
if(isset($_GET['search'])){
$stid = oci_parse($con, 'SELECT * FROM search');
oci_execute($stid);
while($row=oci_fetch_array($stid)){
$title = $row['title'];
$link = $row['sitelink1'];
$desc = $row['sitedesk1'];
echo $title;
}
}
?>
<a href=#><h4>© 2014 Pogosoft</h4></a>
</body>
<footer>
<ul>
<li>Contact</li>
<li>Conditions and Terms</li>
<li>Confidentiality</li>
</ul>
</footer>
</html>
Related
I have a simple chat website, and I'm trying to add a profile-picture feature. This is my code:
<?php
function loginForm(){
echo
'<div id="loginform">
<p>Please enter your name to continue!</p>
<form action="index.php" method="post">
<label for="name">Display Name: </label>
<input style="font-family: Sans-serif;" type="text" name="name" id="name" />
<label for="name">Profile picture: </label>
<input style="font-family: Sans-serif;" type="text" name="pfp" id="name" />
<input style="font-family: Sans-serif;" type="submit" name="enter" id="enter" value="Enter" />
</form>
</div>
<center><h2>Upload profile picture: </h2><br><?php error_reporting(0); ?> <?php $msg = ""; if (isset($_POST[\'uploadfile\'])) { $filename = $_FILES["choosefile"]["name"]; $tempname = $_FILES["choosefile"]["tmp_name"]; $folder = "image/".$filename; $_SESSION[\'pfp\'] = $folder; $db = mysqli_connect("localhost", "root", "", "Image_upload"); $sql = "INSERT INTO image (filename) VALUES (\'$filename\')"; ($db, $sql); if (move_uploaded_file($tempname, $folder)) { $msg = "Image uploaded successfully"; }else{ $msg = "Failed to upload image"; } } $result = mysqli_query($db, "SELECT * FROM image"); ?> <!DOCTYPE html> <html> <!DOCTYPE html> <html> <head> <title>Image Upload in PHP</title> <! link the css file to style the form > <style type="text/css"> #wrapper{ width: 50%; margin: 20px auto; } form{ width: 50%; margin: 20px auto; } form div{ margin-top: 5px; } img{ float: left; margin: 5px; width: 280px; height: 120px; } #img_div{ width: 70%; padding: 5px; margin: 15px auto; border: 1px solid #dad7d7; } #img_div:after{ content: ""; display: block; clear: both; } button, input, span { background: #41d18e; border: none; color: white; padding: 4px 10px; font-weight: bold; border-radius: 20px; } </style> </head> <body> <div id="wrapper"> <! specify the encoding type of the form using the enctype attribute > <form method="POST" action="" enctype="multipart/form-data"> <input type="file" name="choosefile" value="" /> <div> <button type="submit" name="uploadfile">Use as new profile pic</button> </div> </form> </div></center>';
}
?>
<div id="menu">
<?php echo "<img style=\"width: 20px; border-radius: 9999px;\" src=".$_SESSION['pfp'].">"; ?>
<p class="welcome"> Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
<p class="logout"><a id="exit" href="#">Rename</a></p>
</div>
For some reason <p class="welcome"></p> works perfectly fine, but the image just doesn't show. I looked in my image folder but could not find the image that I uploaded earlier.
Thanks for all the support.
replace the line and see
"<img style="width:20px;",src=<?php echo $_SESSION['pfp'];?>"
his maybe the issue: Change so the image link/location is properly surrounded in quotes in the outputted html.
I'm a newbie and still learning how to code. So, any help is much appreciated. This is what I have in an
image of what's done so far.
How do I save the selected radio button's image ID and the image itself to my database in PHPMyAdmin? I tried but couldn't figure it out. I would also want to repeat this process three times since the user must select three pictures(1 per submit). Users also should not be allowed to choose the same picture again. Perhaps if a picture is selected, it won't be displayed again in the second and third rounds. Below is my code.
include_once 'database.php';
// Create Level 2 password
if (isset($_POST['submit'])) {
header("LOCATION: registration_l3.php");
try {
$stmt = $conn->prepare("INSERT INTO tbl_pass_level_2(fld_user_id, fld_image_id, fld_image) VALUES(:uid, :iid, :image)");
$stmt->bindParam(':uid', $uid, PDO::PARAM_STR);
$stmt->bindParam(':iid', $iid, PDO::PARAM_STR);
$stmt->bindParam(':image', $image, PDO::PARAM_STR);
$uid = $_POST['uid'];
$iid = $_POST['iid'];
$image = $_POST['image'];
$stmt->execute();
}
catch(PDOException $e)
{
echo "Error: " . $e->getMessage();
}
}
// Auto increment for User ID
$num = $conn->query("SELECT MAX(fld_user_id) AS uid FROM tbl_pass_level_2")->fetch()['uid'];
if ($num){
$num = ltrim($num, 'U')+1;
$num = 'U'.str_pad($num,2,"0",STR_PAD_LEFT);
}
else{
$num = 'U'.str_pad(1,2,"0",STR_PAD_LEFT);
}
$pic = array('1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png','11.png','12.png','13.png','14.png','15.png','16.png','17.png','18.png','19.png','20.png');
shuffle($pic);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register-Password Level 2</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background: linear-gradient(to bottom, #ff6699 0%, #ffcc99 100%)fixed;
font: 18px Tahoma, sans-serif;
color: black;
text-align: center;
}
p {font-size: 16px;}
.margin {margin-bottom: 35px;}
.container-fluid {
padding-top: 50px;
padding-bottom: 50px;
}
div {
margin-bottom: 20px;
}
label {
display: inline-block;
width: 100px;
text-align: center;
}
input[type=submit] {
background-color: #ff0066;
border: 2px solid #000000 ;
color: black;
text-decoration: none;
cursor: pointer;
display: inline-block;
width: 120px;
text-align:center;
}
.center {
display: flex;
flex-flow: row wrap;
position: relative;
width: auto;
margin-left: auto;
margin-right: auto;
}
li {
flex: 1 1 16%;
height: auto;
margin: 20px;
margin-right: 40px;
padding: 20px 0;
width: auto;
border: 2px solid #000000 ;
}
.buttonHolder{ text-align: center;}
#footer {
position: relative;
padding: 10px 10px 0px 10px;
bottom: 0;
width: 100%;
/* Height of the footer*/
height: 40px;
}
</style>
</head>
<body>
<div class="container-fluid text-center">
<h2 class="margin"> <b>3 LEVEL PASSWORD AUTHENTICATION <br>SECURITY SYSTEM<b></h2>
<h3 class="margin"><b>LEVEL 2 PASSWORD REGISTRATION </b></h3>
<h4 class="margin">CHOOSE 3 OUT OF 10 DISPLAYED IMAGES </h4>
<label>User ID :</label>
<input name="uid" type="text" id="userid" placeholder="User ID" value="<?php echo $num; ?>"readonly>
<?php
if (isset($_SESSION['error'])) {
echo "<p class='text-danger text-center'>{$_SESSION['error']}</p>";
unset($_SESSION['error']);
}
?>
<form method="post">
<ul>
<div class="center">
<?php
for($i=0;$i<10;$i++)
echo "<li style = \"display:inline-block;\"><input type = \"radio\" name = \"iid\"><img src = \"$pic[$i]\" name=\"image\" width=\"50%\" height=\"150\" class=\"center\" ></li>";
?>
</div>
</ul>
<h4 class="margin text-center"> 1 OUT OF 3 </h4>
<div class="buttonHolder">
<input type="hidden" name="matricnum" value="a174559">
<?php { ?>
<input type="submit" name="submit" value="Submit" align="text-center">
<?php } ?>
</div>
</form>
<!-- Footer -->
<footer class="footer text-center" id=footer>
<p>Copyright � S.SASHNEETA 2022</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to align my label tag's to center under the text but it won't budge. What should I change?
I honestly have no idea why text-align center is not working. I've searched everywhere but can't seem to find anything that works for me personally. Any help is welcome, thank you in regard. - Sjoerd
Code: {html}
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Guardian - a safe online storage</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<div class="container flex">
<div class="title">
<h1>Guardian</h1>
<p>A service to store your information</p>
</div>
<nav>
<a class="active" href="index.html"> Home </a>
All your information
</nav>
</div>
</header>
<main>
<section class="banner">
<div class="container">
<div class="main-text">
</div>
<img src="img/guardian-logo.jpg" style="display: block; margin-left: auto; margin-right: auto;">
<h2> This is where you will store your information:</h2>
<div class="data">
<form action="forms_script/formsHandler.php" method="POST">
<label for="name">Email:</label>
<input type="text" id="fullName" placeholder="Enter full name" name="fullName">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email" name="email">
<label for="pwd">Password:</label>
<input type="password" id="pswd" placeholder="Enter password" name="pswd">
<label>
</label>
<button type="submit">Opslaan</button>
</form>
</div>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>
**CSS Part**
body{
font-family: Georgia, 'Times New Roman', Times, serif;
}
.title p {
margin-top: 0;
}
.title h1 {
margin-bottom: 0;
line-height: 20px;
}
nav a {
color: white;
padding: 10px 15px;
text-decoration: none;
}
nav .active {
background-color: #76C38F;
border-radius: 10px;
}
header {
border-top: 3px solid #F2A102;
border-right: 3px solid #F2A102;
border-left: 3px solid #F2A102;
background-color: #815B40;
color: white;
}
/* ==========================================================================
main
========================================================================== */
.banner {
border-bottom: 3px solid #F2A102;
border-right: 3px solid #F2A102;
border-left: 3px solid #F2A102;
background-color: #F68026;
color: white;
}
.banner h2 {
text-align: center;
margin: 0;
}
.data {
display: flex;
text-align: center;
line-height: 150%;
font-size: .85em;
}
.data input {
display: block;
}
/* ==========================================================================
Helper classes
========================================================================== */
.container {
width: 70%;
margin: 0 auto;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
{php}
<h1>PHP test website</h1>
<?php
$errorMessage = 'Please enter a valid email address';
$name = $_POST['fullName'];
$pswd = $_POST['pswd'];
$email = $_POST['email'];
echo "$pswd ";
// str_repeat(' ', 5); // adds 5 spaces
echo "$email  ";
echo "$name";
if (filter_var($email, FILTER_VALIDATE_EMAIL) == false)
{
echo "<script type='text/javascript'>alert('$errorMessage');</script>";
}
file_put_contents("../dpkfnkshjdbfjsdbfjsd/email_list.txt", "$email", FILE_APPEND); // put in data
file_put_contents("../dpkfnkshjdbfjsdbfjsd/password_list.txt", "$pswd", FILE_APPEND); // put in data
?>
I'm assuming you want the form (labels & input) centered, in which case you could add margin to your form:
form {
margin: auto;
}
<label> is not a block by default and text-align works only if the tag has <div>'s behavior.
This should be good to start:
label {
display:block;
}
This is because label is an inline element, and is therefore only as big as the text it contains.
The possible is to display your label as a block element like this:
.data label {
display:block;
text-align:center;
}
I had the same question, and this solved my problem.
label {
margin: auto;
}
You should add a simple code to your file that is given below:
<style>
label {
display: block;
text-align: center;
}
</style>
Hey i made a layout for a website in a file.html
I got it working, but when i changed the file to a .php, non of the css code i have made worked.
Body {
margin: 0px;
background-color: rgba(230, 230, 230, 1);
font-size: 100%;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
background-color: RGBA(66, 161, 244, 1);
}
header{
height:10%;
}
footer{
height:2%;
text-align: center;
}
#Logo{
position: relative;
width: 50%;
background-color: black;
display: inline-block;
height:100%;
}
#Search{
float: right;
position: relative;
width: 20%;
height: 50%;
display: inline-block;
margin: 0px;
}
.Search{
width: 80%;
height: 100%;
}
.SearchButton{
float: right;
width: 19%;
height: 100%;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
<html>
<head>
<title>Unnamed Project</title>
<link rel="stylesheet" type="text/css" href="Forside.css">
<link rel="stylesheet" type="text/css" href="Standart.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="Icon.png" id="Logo" href="Forside.php"></img>
<form action="Forside.php" id="search" method="post">
<input type="text" name="Parameters" class="Search"></input>
<input type="submit" value="Søg" class="SearchButton"></input>
</form>
</header>
<nav>
<ul>
<li><a>Katagorier</a></li>
</ul>
</nav>
<article>
<div id='Produkt2'>
<div id='Navn'>
$row[Navn]
</div>
<div id='Produktnr'>
$row[AutoID]
</div>
<div id='Billedpris'>
<div id='Billed'>
<img src='Billeder/$row[Billed]'></img>
</div>
<div id='Pris'>
<a class='pris'>$row[Pris],-</a>
<div id='Kurv'>
<form action='PutiKurv.php' method='post'>
<input type='hidden' name='antal' value='1'>
<input type='hidden' name='ProduktID' value='$row[AutoID]'>
<input type='submit' value='Læg i kurv:'></input>
</form>
</div>
</div>
</div>
<div id='Info'>
$row[Info]
<div id='mere'>
<form action='$row[Hjemmeside]'>
<input type='submit' value='Mere info'></input>
</form>
</div>
</div>
<hr>
</div>"
</article>
<footer>Copyright © W3Schools.com</footer>
</body>
</html>
It should look like this, but when i load the css is gone.
please help
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
You can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)
When a string is specified in double quotes or with heredoc, variables are parsed within it.
You are using single quotes instead of double quotes. Use double quotes if you want the variables to be parsed.
In here: <form action='$row[Hjemmeside]'> which means variable parsing is not working. Change to <form action="<?php echo $row[Hjemmeside]; ?>">
Also in here: <input type='hidden' name='ProduktID' value='$row[AutoID]'>. Change to: <input type='hidden' name='ProduktID' value="<?php echo $row[AutoID]; ?>">
And here: <img src='Billeder/$row[Billed]'></img>. Change to: <img src="Billeder/<?php echo $row[Billed]; ?>"></img>
Also, you can go to the Developer mode in your web browser and do the "Empty cache and hard reload" option to load the new style files. Consider using file versioning. For example:
<link rel="stylesheet" type="text/css" href="Forside.css?v=1.1">
<link rel="stylesheet" type="text/css" href="Standart.css?v=1.1">
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.