Before anyone judges my coding, just know that I'm still learning the basics.
I'm facing an issue within my page which states as such:
Warning: Undefined array key "id" in C:\xampp\htdocs\Project\POLIMAS
Treatment Center\POLIMAS Treatment Center\ma\write-report.php on line
11
a screenshot of the error
I want to know how to solve this issue, now to make my question more understandable I will include the coding, I know it's most likely not secure, I need to finish my project by tomorrow, so I just want to solve this issue.
I have two pages, one which will direct towards this form, and another, that displays this form.
For the page that will direct the users towards the form, the coding is as follows:
<?php
require('database.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Appointments</title>
<link rel="stylesheet" href="../css/dashboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
<!--.btn{
background-color: red;
border: none;
color: white;
padding: 2px 2px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
margin: 4px 2px;
cursor: pointer;
border-radius: 20px;
}-->
#appointment {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#appointment td, #appointment th {
border: 1px solid #7e7f81;
padding: 8px;
}
#appointment tr:nth-child(even){background-color: #8399bb;}
#appointment tr:hover {background-color: #7e7f81;}
#appointment th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #69649b;
color: white;
}
</style>
<body>
<div class="wrapper">
<div class="header">
<img src="../images/POLIMAS Treatment Center.png" width="50%" height="100%" alt=""/></div>
<div class="sidebar">
<nav>
<ul>
<?php
$count=1;
$sel_query="Select * from ma";
$naem = mysqli_query($link,$sel_query);
while($row = mysqli_fetch_assoc($naem)){
?>
<li><a href="home-ma.php" class="logo">
<img src="../images/grid-img6.png" alt="logo">
<span class="nav-item"><?php echo $row["maName"]; ?></span>
</a></li>
<?php }?>
<li><a href="ma-appoiment.php">
<i class="fa fa-history"></i>
<span class="nav-iteam">View Appoiment</span>
</a></li>
<li><a href="ma-report.php">
<i class="fa fa-edit"></i>
<span class="nav-iteam">Report</span>
</a></li>
<li><a href="../index.html" class="logout">
<i class="fa fa-sign-out"></i>
<span class="nav-iteam">Logout</span>
</a></li>
</ul>
</nav>
</div>
<div class="content">
<center>
<!-- TABLE TOP ROW HEADINGS-->
<h1>Student Appointment</h1>
<table id="appointment" style="width:100%">
<tr>
<th>Appointment ID</th>
<th>Matrics Number</th>
<th>Appointment Status</th>
<th>Report</th>
<th>Delete</th>
</tr>
<?php
$count=1;
$sel_query="Select * from appointment";
$result = mysqli_query($link,$sel_query);
while($row = mysqli_fetch_assoc($result)){
?>
<tr>
<td align="center">
<?php echo $row["appID"]; ?></td>
<td align="center">
<?php echo $row["matricsNo"]; ?></td>
<td align="center"><?php if($row['appDecline']=="1")
echo "Approved";
else if($row['appDecline']=="2")
echo "Dissaproved";
else
echo "Pending"
?>
</td>
<td align="center"><i class="fa fa-book"></i>Write Report</td>
<td align="center"><a href="delete.php?id=<?php echo $row['appID']?>"
onclick="return confirm('Are you sure to delete this record?')"><i class="fa fa-trash"></i> Remove</a></td>
</tr><?php } ?>
</table>
</center>
</div>
<div class="footer">Content for class "footer" Goes Here</div>
</div>
</body>
</html>
The error states that my 'id' was not defined, however in line 130, I am pretty sure I already stated it </td>
For the page which display the form, the coding is as follows:
<?php
ini_set('display_errors', 1);
ini_set('log_errors',1);
error_reporting(E_ALL); mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
require ('../database.php');
if($link){
$sql = mysqli_query($link, "SELECT *
FROM appointment
WHERE appID = '" . $_REQUEST['id'] . "'");
$row = mysqli_fetch_array($sql);
}
else{
die("Error: Could not CONNECT." . mysqli_error($link));
}
if(isset($_POST['update'])){
$update = mysqli_query($link, "UPDATE appointment
SET studMeds = '" . $_REQUEST['studMeds'] ."',
maNotes = '" . $_REQUEST['maNotes'] . "'
WHERE appID = '" . $_REQUEST['id'] . "'");
header("Location: write-report.php");
}
mysqli_close($link);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Report</title>
<link rel="stylesheet" href="../css/dashboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<style type="text/css">
.form-style-5{
max-width: 500px;
padding: 10px 20px;
background: #f4f7f8;
margin: 10px auto;
padding: 20px;
background: #f4f7f8;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset{
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 10px;
}
.form-style-5 label {
display: block;
margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255,255,255,.1);
border: none;
border-radius: 4px;
font-size: 15px;
margin: 0;
outline: 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color:#8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
background: #d2d9dd;
}
.form-style-5 select{
-webkit-appearance: menulist-button;
height:35px;
}
.form-style-5 .number {
background: #353185;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 15px 15px 15px 0px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
position: relative;
display: block;
padding: 19px 39px 18px 39px;
color: #FFF;
margin: 0 auto;
background: #353185;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-bottom: 10px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover
{
background: #2a2769;
}
</style>
<div class="wrapper">
<div class="header">
<img src="../images/POLIMAS Treatment Center.png" width="50%" height="100%" alt=""/></div>
<div class="sidebar">
<nav>
<ul>
<li><a href="home-ma.php" class="logo">
<img src="../images/grid-img6.png" alt="logo">
<span class="nav-item">Medical Assistant</span>
</a></li>
<li><a href="ma-appoiment.php">
<i class="fa fa-history"></i>
<span class="nav-iteam">View Appoiment</span>
</a></li>
<li><a href="ma-report.php">
<i class="fa fa-edit"></i>
<span class="nav-iteam">Report</span>
</a></li>
<li><a href="../index.html" class="logout">
<i class="fa fa-sign-out"></i>
<span class="nav-iteam">Logout</span>
</a></li>
</ul>
</nav>
</div>
<div class="form-style-5">
<form action="" method="POST">
<fieldset>
<legend>Student Appointment Report</legend>
<input type="hidden" name="new" value="1" />
<input type="text" name="appID" size="6" value="<?php echo $row['appID'];?>" disabled>
<input type="text" name="matricsNo" size="6" value="<?php echo $row['matricsNo'];?>" disabled>
<input type="text" name="appTime" size="6" value="<?php echo $row['appTime'];?>" disabled>
<input type="text" name="appStatus" size="6" value="<?php echo $row['appStatus'];?>" disabled>
<input type="text" name="studMeds" size="6" placeholder="Medication Used">
</fieldset>
<input type="submit" name="update" value="Complete Report" />
</form>
</div>
<div class="footer">Content for class "footer" Goes Here</div>
</div>
</body>
</html>
The error which lies on the 11th line is this:
$sql = mysqli_query($link, "SELECT *
FROM appointment
WHERE appID = '" . $_REQUEST['id'] . "'");
Why is my 'id' key undefined? I thought that I declared it on the previous page with </td>. My other pages face no error such as this one, and they're identical as well. Please, help me solve this issue, I'm pretty sure I made the question very clear.
Related
I have a problem that, like I wrote at title, though its because wordpress.
Im working with a basic wordpress theme but I made my own header, my own footer and my own pages.
Heres my header:
<body>
<div class="wrapper">
<header>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/assets/js/scriptmain.js" type="text/javascript"></script>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ArvanJobs
</div>
<?php
wp_nav_menu( array(
'theme location' => 'top',
'container' => 'div',
'container_class' => 'menu',
));
?>
</nav>
</header>
And here's the footer:
<?php
/**
*
* #link arvanjobs.com
*
* #package Klmfsk
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Footer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
</head>
<footer class="container-fluid bg-grey py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6 ">
<div class="logo-part">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/logo.png" class="w-50 logo-footer" >
<p>7637 Laurel Dr. King Of Prussia, PA 19406</p>
<p>Use this tool as test data for an automated system or find your next pen</p>
</div>
</div>
<div class="col-md-6 px-4">
<h6> About Company</h6>
<p>But horizontal lines can only be a full pixel high.</p>
More Info <br>
Contact Us
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6 px-4">
<h6> Help us</h6>
<div class="row ">
<div class="col-md-6">
<ul>
<li> Home </li>
<li> About </li>
<li> Service </li>
<li> Team </li>
<li> Help </li>
<li> Contact </li>
</ul>
</div>
<div class="col-md-6 px-4">
<ul>
<li> Cab Faciliy </li>
<li> Fax </li>
<li> Terms </li>
<li> Policy </li>
<li> Refunds </li>
<li> Paypal </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 ">
<h6> Newsletter</h6>
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
<p>That's technology limitation of LCD monitors</p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
Then, my method is:
1- To make a new wp page. Named for example: Index.
2-Make a page-index.php and I code there calling the header and the footer.
U can se at arvanjobs.com. I made a page-index.php, and I code this: (and works fine.)
<?php get_header(); ?>
<div class="main-container">
<div class="item1 cnt">
<video id="vid" src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2 cnt">
<p style="font-size:50px; color:white;"> Join Us! </P>
<button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:transparent; border-radius: 3px; color:yellow; font-size:50px; border: 2px solid yellow;">Warning</button>
</div>
<div class="item3 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/logo.png" />
</div>
<div class="item4 cnt">
</div>
<div class="item5 cnt">
<h4>WHO WE ARE?</h4>
<p>
ArvanJobs is above all peace of mind. It is a new way
of working, of traveling, of training, of advancing in
your career. Whether you are a company looking for
workers or you are looking for a new job
opportunity, ArvanJobs will always be by your side,
selecting the best workers and the best companies
that will boost your career.
</p>
</div>
<div class="item6 cnt">
<h4>WHY WORK WITH US?</h4>
<p>
For our personal treatment, our advice, and above
all for our experience working in hotels in
numerous countries.
Because we know how difficult it is to take that step
of daring to work in a foreign country. Because we
know how hard it is to find the right staff.
</p>
</div>
<div class="item7 cnt">
</div>
<div class="item8 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan3.jpg">
</div>
<div class="item9 cnt">
<h4>HOW WE WORK?</h4>
<p>
All candidates are interviewed by staff who have
worked in hotels, not offices
The same happens with our clients who have to
satisfy a series of criteria and guarantees for the
worker to work with us.</p>
</div>
<div class="item10 cnt">10</div>
<div class="item11 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
</div>
<div class="item12 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan4.jpg" />
</div>
<div class="item13 cnt">
<!--<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan3.jpg" />-->
</div>
</div>
<?php get_footer(); ?>
As u can see at arvanjobs.com, the header is at top, the footer at bottom...well, nice. Then I do THE SAME EXACTLY THING, I make a wp page called "Candidates", then I make a .php called "page-candidates.php" with this:
<?php get_header(); ?>
<body>
<div class="bg">
<section class="form">
<div class="formwrap">
<form method="POST" id="Form" action="https://www.arvanjobs.com/wp-content/themes/astra/registered.php" enctype="multipart/form-data">
<h4>My short CV</h4>
<label for="lastname">Last name:</label>
<input class="controls" type="text" name="lname" id="lname" placeholder="Ex: Sorribes" required="">
<label for="name">Name:</label>
<input class="controls" type="text" name="name" id="name" placeholder="Ex: Pablo" required="">
<label for="bcountry">Country of birth:</label>
<select id="bcountry" name="bcountry" class="date" placeholder="Ex: Spain" required="">
</select>
<div>
<label for="email">Email:</label>
<input class="controls" type="email" name="email" id="email" placeholder="Ex: pablo#sorribes.com" required="">
</div>
<div>
<label for="phone">Phone number</label><br>
<input type="tel" id="phone" name="phone" maxlength="12" required="">
</div>
<!-- country codes (ISO 3166) and Dial codes. -->
<select name="countryCode" id="prefix">
<option data-countrycode="ES" value="34" selected="">ES (+34)</option>
<option data-countrycode="US" value="1">USA (+1)</option>
<optgroup label="Other countries">
</optgroup>
</select>
<div>
<label for="date">Birthday</label>
<input class="date" type="date" name="date" id="date" required="">
</div>
<label for="jcountries">Where do you wanna work?:</label>
<div class="jcountries" id="countrys">
<div class="left">
<div>
<input type="checkbox" id="ireland" name="jcountries[]" value="ireland">
<label for="ireland">Ireland</label>
</div>
<div>
<input type="checkbox" id="iceland" name="jcountries[]" value="iceland">
<label for="iceland">Iceland</label>
</div>
</div>
</div>
<label for="jobs">What kind of job do you want?:</label>
<div class="jcountries" id="job">
<div class="left">
<div>
<input type="checkbox" id="reception" name="jobs[]" value="reception">
<label for="reception">Reception</label>
</div>
<div>
<input type="checkbox" id="housekeeping" name="jobs[]" value="housekeeping">
<label for="housekeeping">Housekeeping</label>
</div>
</div>
<div class="right right1">
<div>
<input type="checkbox" id="chefs" name="jobs[]" value="chefs">
<label for="chefs">Chefs</label>
</div>
<div>
<input type="checkbox" id="waiters" name="jobs[]" value="waiters">
<label for="waiters">Waiters</label>
</div>
</div>
</div>
<label for="cv">Send your CV</label>
<div class="scv">
<input type="file" id="cv" name="cv" accept=".pdf, .doc, .docx, .docm, .odt, .odf, .odt, .ods, .odp" required="">
</div>
<input class="botons" type="submit" value="Send" onclick="location.href='http://www.google.com'">
</form>
<!--<div class="alert alert-info" style="display: none;"></div>-->
<script src="https://www.arvanjobs.com/wp-content/themes/astra/assets/js/script.js"></script>
<!--<script>
/**Make the plugin location-aware*/
function getIp(callback) {
fetch('https://ipinfo.io/json?token=<your token>', { headers: { 'Accept': 'application/json' }})
.then((resp) => resp.json())
.catch(() => {
return {
country: 'us',
};
})
.then((resp) => callback(resp.country));
}
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
/**this is the plugin code that converts the selected country code and user input into the international format.*/
const info = document.querySelector(".alert-info");
function process(event) {
event.preventDefault();
const phoneNumber = phoneInput.getNumber();
info.style.display = "";
info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
}
</script>-->
</div>
</section>
</div>
</body>
<?php get_footer(); ?>
U can see at arvanjobs.com/candidates what happen. The footer goes crazy. I cant understand why this happen. Its not because the display grid coz I tried to make a grid 1x1 to put in the form there, but the footer stay like it is absolute positioned :/
And this is my css
* {
font-family: "forum";
font-weight:bold;
}
/*GRID CSS*/
/*GRID header*/
.header-container {
display:grid;
background-color:red;
grid-template-columns: 50% 50%;
font-family: "forum";
font-weight: bold;
}
.header-container div{
text-align:center;
font-family: "forum";
font-weight: bold;
z-index:100000000000000;
}
/*GRID index*/
.main-container {
top:0;
display:grid;
background-image:url('http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/wal.png');
background-attachment:fixed;
grid-template-columns: 50% 50%;
box-sizing:border-box;
z-index:-1;
}
.main-container > * {
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}
.main-container div {
color:black;
border: px solid black;
}
.main-container video {
display:block;
width:100%;
height:100%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
z-index:10000;
}
.main-container h4 {
color:#edbd87;
}
.main-container p {
color:#1f1f1f;
}
.item1{
grid-column: 1 / 3;
background-color: green;
height:1080px;
}
.item2{
right:0;
left:0;
top:300px;
bottom:0;
position:absolute;
grid-column: 1 / 3;
display:inline-block;
z-index:1000000;
}
.item3{
background:#e0e0e0;
grid-column: 1 / 3;
height:40vh;
border-bottom:1px solid #967b5d;
z-index:100000;
}
.item4 {
background-color:#e0e0e0;
padding:30px;
z-index:9;
width:100%;
height:900px;
}
.item4 img{
padding:15px;
justify-self:center;
display:block;
width:90%;
height:80%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:10;
}
.item5{
height:900px;
background-color:#e0e0e0;
align-content:start;
align-items:start;
justify-self:start;
justify-content:right;
justify-items:right;
object-position: right;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
align-content:center;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item5 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item5 p{
margin-top:10px;
font-size: 120%;
}
.item5 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item6{
height:900px;
background-color:#e0e0e0;
align-content:end;
align-items:end;
justify-self:end;
justify-content:right;
justify-items:right;
object-position: right;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
align-content:center;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item6 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item6 p{
margin-top:10px;
font-size: 120%;
}
.item6 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item7 {
height:900px;
padding:30px;
z-index:10;
width:100%;
z-index:10000000;
}
.item7 img{
padding:15px;
justify-self:center;
display:block;
width:90%;
height:80%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:10;
}
.item8 {
top:110px;
right:309px;
z-index:1888;
width:100%;
height:900px;
background-color:#e0e0e0;
align-content:start;
align-items:start;
justify-self:start;
justify-content:right;
justify-items:right;
object-position: right;
}
.item8 img{
margin-left:140px;
display:block;
width:71%;
height:63%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
.item9{
height:900px;
background-color:#e0e0e0;
align-items:start;
align-content:start;
justify-self:start;
justify-content:start;
justify-items:start;
object-position: left top;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item9 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item9 p{
margin-top:10px;
font-size: 120%;
}
.item9 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item10{
z-index:100000000;
background-color: orange;
grid-column: 1 / 3;
}
.item11 {
top:110px;
right:309px;
position:fixed;
padding:30px;
z-index:11;
width:100%;
height:800px;
}
.item11 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
.item12 {
top:110px;
left:309px;
position:fixed;
padding:30px;
z-index:9;
width:100%;
height:800px;
z-index:100;
}
.item12 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
}
.item13 {
top:110px;
right:309px;
position:fixed;
padding:30px;
z-index:16;
width:100%;
height:800px;
}
.item13 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
/*CSS*/
html, body {
margin: 0;
padding: 0;
width: 100%;
height:100%;
font-family: "forum";
font-weight: bold;
}
header {
position:absolute;
width: 100%;
height:80px;
z-index:100000000000000;
}
}
.content {
width: 100%;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position:fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-family:"Forum";
font-weight: bold;
font-size: 25px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: transparent;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
login
.loginform {
position:relative;
}
/*footer*/
.w-50 {
width: 100%!important;
}
.bg-grey {
background: #edbd87;
}
.logo-footer {
margin-bottom: 40px;
}
footer {
z-index:1000000000;
position:relative;
color: #1f1f1f;
}
footer p, a {
font-weight:bold;
font-size: 12px;
font-family: 'Forum', sans-serif;
}
footer h6 {
font-family: 'Forum', serif;
margin-bottom: 40px;
position: relative;
font-weight:bold;
}
footer h6:after {
position: absolute;
content: "";
background: #1f1f1f;
width: 12%;
height: 1px;
left: 0;
bottom: -20px;
}
.btn-footer {
font-weight:bold;
color: #1f1f1f;
text-decoration: none;
border: 1px solid;
border-radius: 43px;
font-size: 13px;
padding: 7px 30px;
line-height: 47px;
}
.btn-footer:hover {
font-weight:bold;
text-decoration: none;
}
.form-footer input[type="text"] {
font-weight:bold;
border: none;
border-radius: 16px 0 0 16px;
outline: none;
padding-left: 10px;
}
::placeholder {
font-weight:bold;
font-size: 10px;
padding-left: 10px;
font-style: italic;
}
.form-footer input[type="button"] {
border: none;
background:#1f1f1f;
margin-left: -5px;
color: #fff;
outline: none;
border-radius: 0 16px 16px 0;
padding: 2px 12px;
}
.social .fa {
font-weight:bold;
color: #1f1f1f;
font-size: 22px;
padding: 10px 15px;
background: #967b5d;
}
footer ul li {
font-weight:bold;
list-style: none;
display: block;
}
footer ul {
padding-left: 0;
}
footer ul li a{
text-decoration: none;
color: #1f1f1f;
text-decoration:none;
}
a:hover {
text-decoration: none;
color: #967b5d !important;
}
.logo-part {
font-weight:bold;
border-right: 1px solid #1f1f1f;
height: 100%;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#media all and (max-width: 1400px) {
.main-container div {
grid-column: 1 / span 3;
}
}
/*form*/
/*fondo*/
.bg {
height:600px;
position:absolute;
width:100%
word-wrap: break-word;
background-image:url(' https://www.arvanjobs.com/wp-content/uploads/2022/02/manitas.jpg');
background-position:center;
background-attachment:fixed;
opacity:70%;
padding-top:20px;
padding-bottom:40px;
z-index:-1;
display:grid;
grid-template-columns: 100%;
box-sizing:border-box;
z-index:-1;
height:100vh;
}
.bg2 {
position:relative;
width:100%
word-wrap: break-word;
background-image:url(' https://www.arvanjobs.com/wp-content/uploads/2022/02/manitas.jpg');
background-attachment: fixed;
opacity:70%;
padding-top:20px;
padding-bottom:40px;
z-index:-1;
}
.formwrap {
height:600px;
border:1px solid #967b5d;
padding:30px;
border-radius: 4px;
background: #fff;
}
Ive tried too to make a template for solve this. I made this blank template:
<?php /* Template Name: Blank*/ ?>
<?php
get_header();
?>
<?php
get_template_part( 'template-parts/content/content-page' );
?>
</div>
<?php
get_footer();
?>
Well, if i choose this template when I make a new wp page, it will only show the header and the footer, no content. (for every pages) I have to choose "Default template" for things working. What happen here? Why at page-index.php the footer is working fine, but when i do the same with other page the footer stay at top? Any suggestion? Thanks!
I would like the background colour for 'top2' division to be light green. But it seems that css is not working! The cell padding for 'left' division is not working as I want the text 'online discussision portal' centered vertically.
Please help.
account.php
<?php
require 'connection.php';
session_start();
if(!isset($_SESSION['id'])) {
header("location:login.php");
} else {
?>
<!doctype html>
<html>
<head>
<title>welcome</title>
<link href="acc.css" type="text/css" rel="stylesheet" media="all" />
<style>
table {
table-layout:fixed;
width:1030px;
}
body {
background-image: url("border1.jpg");
background-size:cover;
}
</style>
</head>
<body>
<div id="top1">
<div id="left">
<h4> <center> <font color="green"> ONLINE DISCUSSION PORTAL </font> </center> </h4>
</div>
<div id="middle">
</h4>
<center> <i> Notifications </i> </center>
</h4>
</div>
<div id="right">
</h4>
<center> <i> Logout </i> </center>
</h4>
</div>
</div>
<div id="top2">
<table height="60px" width="1030px">
<tr>
<th> <u> Forum </u> </th>
<th> <u> My Questions </u> </th>
<th> <u> My Answers </u> </th>
</tr>
</table>
</div>
<div id="content">
<h3> You are Logged in. </h3>
</div>
</body>
</html>
<?php
}
CSS
acc.css A.class1 {
color: green;
}
A.class1:link {
text-decoration: none;
color: green;
}
A.class1:visited {
text-decoration: none;
color: green;
}
A.class1:hover {
text-decoration: underline;
color: red;
}
A.class1:active {
text-decoration: none;
color: green;
}
A.class2 {
color: white;
}
A.class2:link {
text-decoration: none;
color: white;
}
A.class2:visited {
text-decoration: none;
color: white;
}
A.class2:hover {
text-decoration: underline;
color: yellow;
}
A.class2:active {
text-decoration: none;
color: white;
}
#top1 {
height: 40px;
width: 1030px;
border: 1px solid #008000;
font-family: whimsy TT;
margin: auto;
margin-top: 50px;
}
#left {
border: 1px solid #008000;
height: 25px;
width: 624px;
float: left;
margin: auto;
color: 82b52f;
padding-bottom: 15px;
}
#middle {
border: 1px solid #008000;
height: 32px;
width: 200px;
float: left;
margin: auto;
color: white;
padding-top: 8px;
}
#right {
border: 1px solid #008000;
height: 32px;
width: 200px;
float: left;
margin: auto;
color: white;
padding-top: 8px;
}
#top2 {
background-color: 82b52f;
height: 60px;
width: 1030px;
border: 1px solid #008000;
font-family: whimsy TT;
margin: auto;
color: white;
}
#content {
border: 1px solid #008000;
height: 430px;
width: 1030px;
margin: auto;
}
You miss # for color-background property. So it should be background-color:#82b52f
For align to left you must remove <center> tag.
You are missing the hash symbol # before the color code:
acc.css
A.class1 {color:green;}
A.class1:link {text-decoration: none; color: green;}
A.class1:visited {text-decoration: none; color: green;}
A.class1:hover {text-decoration: underline; color: red;}
A.class1:active {text-decoration: none; color: green;}
A.class2 {color:white;}
A.class2:link {text-decoration: none; color: white;}
A.class2:visited {text-decoration: none; color: white;}
A.class2:hover {text-decoration: underline; color: yellow;}
A.class2:active {text-decoration: none; color: white;}
#top1
{
height:40px; width:1030px; border:1px solid #008000; font-family:whimsy TT; margin:auto; margin-top:50px;
}
#left
{
border:1px solid #008000; height:25px; width:624px; float:left; margin:auto; color:82b52f; padding-bottom:15px;
}
#middle
{
border:1px solid #008000; height:32px; width:200px; float:left; margin:auto; color:white; padding-top:8px;
}
#right
{
border:1px solid #008000; height:32px; width:200px; float:left; margin:auto; color:white; padding-top:8px;
}
#top2
{
background-color:#82b52f; height:60px; width:1030px; border:1px solid #008000; font-family:whimsy TT; margin:auto; color:white;
}
#content
{
border:1px solid #008000; height:430px; width:1030px; margin:auto;
}
account.php
<?php
require 'connection.php';
?>
<?php
session_start();
if(!isset($_SESSION['id']))
{
header("location:login.php");
}
else
{
?>
<!doctype html>
<html>
<head>
<title>welcome</title>
<link href="acc.css" type="text/css" rel="stylesheet" media="all" />
<style>
table {
table-layout:fixed;
width:1030px;
}
body {
background-image: url("border1.jpg");
background-size:cover;
}
</style>
</head>
<body>
<div id="top1">
<div id="left">
<h4> <center> <font color="green"> ONLINE DISCUSSION PORTAL </font> </center> </h4>
</div>
<div id="middle">
</h4> <center> <i> Notifications </i> </center> </h4>
</div>
<div id="right">
</h4> <center> <i> Logout </i> </center> </h4>
</div>
</div>
<div id="top2">
<table height="60px" width="1030px">
<tr>
<th> <u> Forum </u> </th>
<th> <u> My Questions </u> </th>
<th> <u> My Answers </u> </th>
</tr>
</table>
</div>
<div id="content">
<h3> You are Logged in. </h3>
</div>
</body>
</html>
<?php
}
?>
visit link1
search for "check" using CTRL + F, than you can see :
I wanted to display like this as link2
we are using following code :
css
font: 12px/1.35 Arial, Helvetica, sans-serif;
padding: 2px 8px !important;
border: 1px solid FFFFFF;
color: FFFFFF;
height: 29px;
line-height: 29px;
border-radius: 0;
}
.catalog-product-view button.button span span {
color: #fff;
float: left;
font-size: 16px;
font-weight: normal !important;
text-align: center;
Phtml
<?php if ($this->isFieldVisible('postcode')): ?>
<li class="item">
<label for="estimate_postcode"<?php if ($this->isFieldRequired('postcode')):?> class="required" <?php endif;?>><?php if ($this->isFieldRequired('postcode')):?><em>*</em><?php endif;?><?php echo Mage::helper('webdevlopers_productpageshipping')->__('') ?></label>
<div class="input-box">
<img src ="http://totaltoys.com/media/font-100.png" height= '35' width= '70'>
<input placeholder="Enter your PIN Code" class="input-text validate-postcode<?php if ($this->isFieldRequired('postcode')):?> required-entry<?php endif;?>" type="text" id="estimate_postcode" name="estimate[postcode]" value="<?php echo $this->htmlEscape($this->getFieldValue('postcode')) ?>" />
</div>
</li>
<?php endif; ?>
Edit your HTML like this:
li.item {
align-items: center;
display: flex;
}
li.item img {
opacity: .3;
height: 20px;
width: 40px;
}
li.item label {
color: #aaa;
font-family: 'ubuntu';
}
li.item .search {
margin-left: 6px;
}
li.item .search input {
border: 1px solid #ddd;
border-radius: 3px;
padding: .5rem;
}
li.item .search button {
background-color: #00bfff;
border: none;
border-radius: 3px;
color: #fefefe;
padding: .5rem .5rem;
}
<li class="item">
<img src="http://totaltoys.com/media/font-100.png" alt="" />
<label for="search">Check availability</label>
<div class="search">
<input type="text" id="search" placeholder="Enter your PIN code"/>
<button>Check</button>
</div>
</li>
Add this classes to your CSS file:
.actions {
float: left;
margin-top: 9%;
}
ul#shipping-estimation-form {
float: left;
}
This menu is made in html and php. I have a menu in css. Whenever I mouse over on menu item it doesn't make a link on mouseover, and whenever I click on text it make a link.
<div class="panel panel-default">
<div class="panel-heading">
<?php if($menurow['hassubmenu'] != NULL)
{?>
<a data-toggle="collapse" data-parent="#accordian" href="#<?php echo $menurow['mainmenuid']; ?>" title="<?php echo $menurow['title']; ?>"><span class="badge pull-right"><i class="fa fa-plus"></i></span><?php echo $menurow['title']; ?></a>
<?php }else{?>
<h4 class="panel-title"><?php echo $menurow['title']; ?></h4>
<?php } ?>
</div>
<?php if($menurow['hassubmenu'] != NULL){?>
<div id="<?php echo $menurow['mainmenuid']; ?>" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<?php
$menuquery2 = mysql_query("select title,itemid,catid from submenu where mainmenuid=".$menurow['mainmenuid']." order by sort asc");
while($menurow2 = mysql_fetch_assoc($menuquery2))
{
if($menurow2['itemid'] != NULL)
$menulink2 = "showitem.php?id=".$menurow2['itemid'];
elseif($menurow2['catid'] != NULL)
$menulink2 = "category.php?id=".$menurow2['catid'];
else
$menulink2 = "#";
?>
<li><?php echo $menurow2['title']; ?></li>
<?php }?>
</ul>
</div>
</div>
<?php }?>
</div>
CSS Code
/* New menu */
.category-products .panel {
background-color: #FFFFFF;
border: 0px;
border-radius: 0px;
box-shadow:none;
margin-bottom: 0px;
}
.category-products .panel-default .panel-heading {
background-color: #CCCCCC;
border: 1px solid;
color: #FFFFFF;
padding: 5px 20px;
cursor:pointer;
height:40px;
}
.category-products .panel-default .panel-heading a { color: #D00233;
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
}
.category-products .panel-default .panel-heading a:hover {background:#D00233; color:#fff;}
.category-products .panel-default .panel-heading:hover {background:#D00233; color:#fff !important;}
.category-products .panel-default .panel-heading .panel-title {
color: #D00233;
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
}
.category-products .panel-default .panel-heading .panel-title:hover {color:#fff;background:#D00233;}
Please help me.
add this to the links and to the panel-title:
display: block;
width: 100%;
height: 100%;
in your case that would be:
.panel-title{
display: block;
width: 100%;
height: 100%;
}
.panel-title>a{
display: block;
width: 100%;
height: 100%;
}
In the below code i have placed the controller.the actual result is ligin is in center position but it is in the bottom.My expected result is login should come in center of the page.pls help me to do this.
Controller:
<html>
<head>
</head>
<title>login_form</title>
<BODY onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload=""><div class="container">
<div class="row">
<div class="span4 logo">
<img src="<?php echo base_url('img/logosl.png'); ?>" style="margin-bottom:7px; margin-top:7px;"/>
</div>
<center ><div id="login_form" >
<h1>Login!</h1>
<form action="<?php echo base_url(); ?>index.php/login/validate_credentials" method="post" >
<input type="text" name="username" required placeholder="username" style="height: 25px;" value="" />
<input type="text" name="password" required placeholder="password" style="height: 25px;" value="" />
<input type="text" name="college_name" required placeholder="college_name" style="height: 25px;" value="" />
<input type="submit" name="submit" value="Login" class="btn-success btn" />
Create Account
</form>
</div></center><!-- end login_form-->
<?php $this->load->view('includes/header'); ?>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style1.css" />
<?php $this->load->view('includes/footer'); ?>
</body>
</html>
css
body {
background:#FFFFFF;
margin: 0;
padding: 0;
font-family: arial;
}
#login_form {
width: 300px;
background: #f0f0f0 url(../img/login_bg.jpg) repeat-x 0 0;
border: 1px solid white;
margin: 250px auto 0;
padding: 1em;
-moz-border-radius: 3px;
}
h1,h2,h3,h4,h5 {
margin-top: 0;
font-family: arial black, arial;
text-align: center;
}
input[type=text], input[type=password] {
display: block;
margin: 0 0 1em 0;
width: 280px;
border: 5px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
padding: 1em;
}
input[type=submit], form a {
border: none;
margin-right: 1em;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
background: #348075;
color: white;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #287368;
cursor: pointer;
}
/* Validation error messages */
.error {
color: #393939;
font-size: 15px;
}
fieldset {
width: 300px;
margin: auto;
margin-bottom: 2em;
display: block;
}
/* FOR FUN */
h1 {
text-shadow: 0 1px 0 white;
}
/* Not necessary. Just the "tutorial created by" stuff at the bottom */
#tutInfo {
background: #e3e3e3;
border-top: 1px solid white;
position: absolute;
bottom: 0;
width: 100%;
padding: .7em .7em .7em 2em;
}
You are missing < / div>
<div class="row">
<div class="span4 logo">
<img src="<?php echo base_url('img/logosl.png'); ?>" style="margin-bottom:7px; margin-top:7px;"/>
</div>
**</div>**