I have an existing div and I want to add some new data (5 spans) to this existing div. The method I was using makes the following GUI
I want it to display the search results in existing div (in black translucent region). My HTML Code is
<title>Search your Friends</title>
<body>
<div class="title">
GTBIT's Almuni Diary
</div>
<div class="main">
<form id="myForm" method="POST">
<input placeholder="Enter some text to search"type="text" class="name" name="query">
<br>
<span class="searchby">Search Criteria</span>
<select name="criteria">
<option value="name" selected="selected">Search by Name</option>
<option value="enrno">Search by Enrollment No.</option>
<option value="email">Search by Email ID</option>
<option value="phno">Search by Phone No.</option>
</select>
<br>
<input type="button" class="search" value="Search">
</form>
<div class="sr">
Search Results
</div>
<div class="dynamicData">
<div class="header">
<span class="heading">Name</span>
<span class="heading">Email ID</span>
<span class="heading">Enrollment No.</span>
<span class="heading">Nickname</span>
<span class="heading">Batch</span>
</div>
<div class='dataDiv'>
</div>
</div>
</div>
CSS :
body
{
font-family: "source sans pro";
font-size: 20px;
background-image: url("../images/searchbg.jpg");
background-size: 100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
.title
{
display: none;
color: #03C9A9;
background-color: rgba(0,0,0,0.8);
padding: 5px;
font-weight: 500;
font-size: 54px;
height: 90px;
text-align: center;
}
.main
{
display: none;
width: 90%;
margin: 0 auto;
margin-top: 20px;
background-color: rgba(0,0,0,0.5);
padding: 20px;
}
.searchby, input, select
{
color: white;
font-family: inherit;
font-size: 28px;
display: inline-block;
}
.name
{
color: black;
width: 80%;
}
.searchby
{
margin-top: 40px;
}
select
{
border: 0px solid white;
margin-left: 30px;
margin-right: 30px;
color: black;
font-size: 22px;
}
.search
{
background-color: rgba(0,0,0,0.8);
color: #03C9A9;
margin: 0 auto;
margin-top: 30px;
padding: 5px;
display: block;
border: 0px solid white;
cursor: pointer;
font-size: 32px;
}
.name
{
margin-left: 10px;
border: 0px solid white;
}
.sr
{
margin-top: 75px;
font-family: inherit;
font-size: 32px;
width: 100%;
text-align: center;
background-color: rgba(0,0,0,0.8);
color: #03C9A9;
margin-bottom: 50px;
}
.dynamicData
{
width: 98%;
margin-left: 10px;
padding: 2px;
background-color: rgba(0,0,0,0.3);
}
.header
{
padding: 5px;
width: 90%;
text-align: center;
padding: 5px 0px 5px 0px;
margin: 0 auto;
}
.heading
{
background-color: #03C9A9;
color: white;
font-family: inherit;
font-size: 24px;
height: 30px;
width: 202px;
display: inline-block;
margin-bottom: 10px;
}
.dataDiv
{
padding: 2px;
width: 90%;
text-align: center;
margin: 0 auto;
}
.data
{
font-family: inherit;
font-size: 24px;
height: 30px;
width: 202px;
display: inline-block;
margin-bottom: 5px;
color: black;
background-color: rgba(255,255,255,0.75);
}
PHP Script responsible for adding (after getting data form database)
while($stmt->fetch())
{
echo "<br>
<span class='data ndata'>$nm</span>
<span class='data emaildata'>$em</span>
<span class='data enrnodata'>$eno</span>
<span class='data nicknamedata'>$nn</span>
<span class='data batchdata'>$bt</span>";
}
Related
Here is the problem -> Problem
I'm trying to put that piece of text under the table but it is overlapping on the table.
And i cannot get it to the bottom. I think its because on condition it is making the <tr> and because of that the text part gets rendered before the loop has been finished.
And here is my code ->
<!DOCTYPE html>
<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.0">
<title>Student Records</title>
</head>
<body>
<style>
.pdfContainer {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
table {
width: 100%;
text-align: center;
margin-right: auto;
margin-left: auto;
float: bottom;
border: none;
}
td {
text-align: center;
font-size: 0.95em;
color: #252a34;
font-weight: 500;
background-color: #fff;
white-space: nowrap;
}
th,
td {
padding: 15px;
border: 1px solid #252a34 !important;
border-collapse: collapse;
border-spacing: 0;
}
th {
text-align: center;
font-size: 0.95em;
font-weight: 800;
border: none;
white-space: nowrap;
}
.attdStatusTdpresent {
color: #18a14f;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95em;
font-family: "Merriweather Sans", sans-serif;
}
.attdStatusTdabsent {
color: #b82348;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95em;
font-family: "Merriweather Sans", sans-serif;
}
.attdStatusTdlate {
color: #ff2e63;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourExcellent {
color: #289672;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourGood {
color: #00bfa6;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourAverage {
color: #ffc947;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourBad {
color: #ff2e63;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressExcellent {
color: #289672;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressGood {
color: #00bfa6;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressNeed {
color: #ffc947;
padding: 8px;
width: 140px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
white-space: nowrap;
}
.attProgressprogressive {
color: #185adb;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.pdfContainer {
width: 100%;
display: flex;
align-items: flex-start;
box-sizing: border-box;
}
.logo>img {
width: 100%;
min-height: 30px;
}
.nameContainer {
width: 100%;
text-align: center;
}
</style>
<div class="logo">
<img src="<?php echo Illuminate\Support\Facades\URL::to('/') . '/' ?>images/l.jpg" alt="">
</div>
<div class="nameContainer">
<h2> {{$studentName}} </h2>
</div>
<div class="pdfContainer">
<table>
<tr>
<th> PRÉSENCE </th>
<th> COMPORTEMENT </th>
<th> PROGRES </th>
<th> DATE DE L’ATELIER </th>
</tr>
#foreach($records as $record)
<tr>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
<p> {{$record['customDate']}} </p>
</td>
</tr>
#endforeach
</table>
</div>
<div class="termContainer">
<strong> Term Report: </strong>
<p>{{ !empty($termReport->text) ? $termReport->text: '' }} </p>
</div>
<div class="footerImage">
<img src="<?php echo Illuminate\Support\Facades\URL::to('/') . '/' ?>images/fol.jpg" alt="">
</div>
</body>
</html>
Any solution?
style='margin:auto; Do not use this CSS property. You give the margin size in px, rem etc. If you give percentage (%) EX: 50%, 25%, auto in dompdf it will not be captured
dompdf is mostly CSS 2.1 compliant, which means things like flexbox are not supported.
enter link description here
I have a table called admin tickets. I have this situation were one of these mails, which are on the left of the screen is clicked. Then I want to fetch subject/text, to this mail.
For example I'm clicking qweqweqwe#wp.pl, and it gives me 123123123123123.
The table looks like this:
For now the page looks like this, because I'm iterating over the whole table to the end. This looks good. The only change I want to make is as I said, I want to click the mail on the left, and get subject/text of this mail.
How can I achieve it?
Html+php:
<?php
require_once '../../services/LoggedInUserService.php';
require_once '../../services/LoggedInAdminService.php';
require_once '../../db/connect.php';
$connect = new mysqli($host, $db_user, $db_password, $db_name);
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="../../css-images/style-admintickets.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"><img src="../../css-images/dingdog-logo.png"></ul>
<ul class="main-nav">
<li style="padding-left:10px">TICKETS</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
$subject = $row['subject']; ?>
<label> <input readonly id="fi" style="margin-top: 50px;" type="text" placeholder="Example"
name="custom" value="<?php echo $emailLogin; ?>"></label><br>
<div class="container" style='position:absolute;left:0px; top:0px;'>
<h1 id="avatar">Title:</h1>
<div class="title" style='position:absolute;left:0px; top:0px;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'><?php echo $subject; ?></h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style='margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;' rows="5" cols="10"><?php echo $row['text']; ?></textarea>
</div>
<?php }
} ?>
</article>
</section>
</header>
<footer>
<img src="../../social/instagram.png"/>
<img src="../../social/twitter-white-logo.png"/>
<img src="../../social/facebook.png"/>
</footer>
</body>
</html>
Css:
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign
{
margin-top: 200px;
margin-left: 80px;
font: Bold 57px/46px Georgia;
font-weight: bold;
color: black;
}
article input
{
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 120;
border-style: none;
padding: 5px;
width: 240px;
height: 39px;
background-color: black;
}
#fi
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 161px;
}
.container {
margin-top: 300px;
height: 447px;
width: 1028px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 480px;
}
.title {
margin-top: 35px;
width: 686px;
height: 37px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 145px;
}
#avatar
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
#tytul
{
font: Bold 20px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 8px;
margin-left: 25px;
}
#subject
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
.subjectContainer
{
margin-top: 100px;
height: 264px;
width: 683px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 170px;
border-radius: 20px;
margin-top: 300px;
}
#subjectTitle
{
text-align: left;
font: Regular 20px/24px Arial;
letter-spacing: 0;
color: #000000;
padding-left: 5px;
}
#textare{
height: 600px;
width: 683px;
}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 70%);
background-size:100% 3000px;
width: auto;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 20px;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 31px/15px Arial;
padding: 5px;
}
#logo img
{
margin-left: 350px;
text-align: center;
width: 500px;
}
#profilesign
{
margin-top: 350px;
font-size: 90px;
margin-left: 360px;
width: 900px;
}
#tytul
{
font: Bold 40px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 20px;
margin-left: 25px;
}
#subjectText
{
font-size: 40px;
}
#fi
{
width: 500px;
margin-top: 500px;
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 401px;
}
.container {
margin-top: 1000px;
height: 847px;
width: 1228px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 20px;
}
.subjectContainer
{
margin-top: 150px;
height: 564px;
width: 883px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
border-radius: 20px;
}
#avatar
{
font: Bold 55px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 40px;
}
#subject
{
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 5px;
}
.title {
margin-top: 55px;
width: 686px;
height: 67px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
}
}
Hope This will help you
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
echo '<form>
<label> <input id="fi" style="margin-top: 50px;" type="submit" placeholder="Example"
name="custom" value="'.$emailLogin.'"></label><br>
</form>';
}
}?>
<?php
if(isset($_GET['custom']))
{
$text = $_GET['custom'];
$result2 = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin = '".$text."' ");
if ($result2->num_rows > 0) {
while ($row = $result2->fetch_assoc()) {
echo ' <div class="container" style="position:absolute;left:0px; top:0px;">
<h1 id="avatar">Title:</h1>
<div class="title" style="position:absolute;left:0px; top:0px;">
<h1 id="tytul" style="position:absolute;left:0px; top:0px;">'.$subject.'</h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style="margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;" rows="5" cols="10">'.$row['text'].'</textarea>
</div>';
}
}
}
?>
</article>
</section>
I would probably use Ajax for this, and then get the information that way. So when you click one of the mails on the left, then you make a Ajax call to another .php, like this.
Lets say the mail is this image.
echo'<img class="MAILyouWantToAttach" data-id = "'.$MAILyouWantToAttach.'" src = "../text.png">';
The Ajax success respons has to change the textareas content by its value.
$(document).on("click", ".Unflagging", function(){
var text= $(this).data("id");
$.ajax({
method: "post",
url: "AnotherFile.php",
data: { text: text},
success: function(data) {
$("#myTextarea").val(data);
},
error: function(data) {
alert("Error occurs!")
}
});
});
Then the other php file you want something like this, the echo is to print the text in the success area of the Ajax in the other .php.
$receiver = $_POST["text"];
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin= $receiver ");
while ($row = $result->fetch_assoc()) {
echo $row['text'];
}
This is just a guide, but i hope it helps you on your way to success.
My question1.blade.php
.privew {
margin-bottom: 20px;
}
.questionsBox {
display: block;
border: solid 1px #e3e3e3;
padding: 10px 20px 0px;
box-shadow: inset 0 0 30px rgba(000,000,000,0.1), inset 0 0 4px rgba(255,255,255,1);
border-radius: 3px;
margin: 0 10px;
}.questions {
background: #007fbe;
color: #FFF;
font-size: 22px;
padding: 8px 30px;
font-weight: 300;
margin: 0 -30px 10px;
position: relative;
}
.questions:after {
background: #1d68a7 no-repeat left 0;
display: block;
position: absolute;
top: 100%;
width: 9px;
height: 7px;
content: '.';
left: 0;
text-align: left;
font-size: 0;
}
.questions:after {
left: auto;
right: 0;
background-position: -10px 0;
}
.questions:before, .questions:after {
background: black;
display: block;
position: absolute;
top: 100%;
width: 9px;
height: 7px;
content: '.';
left: 0;
text-align: left;
font-size: 0;
}
.answerList {
margin-bottom: 15px;
}
ol, ul {
list-style: none;
}
.answerList li:first-child {
border-top-width: 0;
}
.answerList li {
padding: 3px 0;
}
.answerList label {
display: block;
padding: 6px;
border-radius: 6px;
border: solid 1px #dde7e8;
font-weight: 400;
font-size: 13px;
cursor: pointer;
font-family: Arial, sans-serif;
}
input[type=checkbox], input[type=radio] {
margin: 4px 0 0;
margin-top: 1px;
line-height: normal;
}
.questionsRow {
background: #dee3e6;
margin: 0 -20px;
padding: 10px 20px;
border-radius: 0 0 3px 3px;
}
.button, .greyButton {
background-color: #f2f2f2;
color: #888888;
display: inline-block;
border: solid 3px #cccccc;
vertical-align: middle;
text-shadow: 0 1px 0 #ffffff;
line-height: 27px;
min-width: 160px;
text-align: center;
padding: 5px 20px;
text-decoration: none;
border-radius: 0px;
text-transform: capitalize;
}
.questionsRow span {
float: right;
display: inline-block;
line-height: 30px;
border: solid 1px #aeb9c0;
padding: 0 10px;
background: #FFF;
color: #007fbe;
}
<body>
<div class="container">
<div class="privew">
<div class="questionsBox">
<div class="questions"><h1>Something</h1></div>
<div class="answerList"><h3>You are only allowed to select one option from the given below question</h3></div>
<div class="questions"><h4>Question 1</h4></div>
<div class="questions"><h3>Section 1</h3></div>
<ul class="answerList">
<li>
<label>
<input type="radio" name="answerGroup" value="0" id="answerGroup_0">Yes</label>
</li>
<li>
<label>
<input type="radio" name="answerGroup" value="1" id="answerGroup_1">Rather yes</label>
</li>
<li>
</ul>
</div>
<div class="questionsBox">
<div class="questions"><h3>Section 2</h3></div>
<ul class="answerList">
<li>
<label>
<input type="radio" name="answerGroup" value="2" id="answerGroup_2">Yes</label>
</li>
<li>
<label>
<input type="radio" name="answerGroup" value="3" id="answerGroup_3">Rather yes</label>
</li>
</ul>
</div>
<div class="questionsRow">Next<span>1 from 20</span>Previous</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
Hello All,
I'm trying to make a test page where users will select one radio button option and submit all selections in one instance in order to store back into the database. Also, questions are on different pages so basically user can move back and forth in order to edit its selection. There are 20 questions in total. I am unable to understand where shall I put my array logic. My best guess would be in a TestController. Please drop your valuable answer.
P.S : I am a beginner in Web Development and recently started to work on a Personality assessment website Project. However, due to less experience, I am facing a lot of challenges to achieve building it.
This problem is from my Laravel 6.x Project.
I expect to get all the selections stored in an array and passed to the database where I can further process it.
My HTML and CSS code is here. Every no. is in diffrent span tag.
I need like 152,242 after 1 minute, 152,244 after 2 minutes and so on. I was trying to do it with jquery but i did not get the perfect output.
#hp_header .number{
display: inline-block;
width: 100%;
text-align: center;
margin-top: 40px;
}
#hp_header .number .number_inner{
display: inline-block;
text-align: center;
color: #282828;
font-family: SourceSansPro-Regular !important;
font-size: 32px;
}
#hp_header .number .count{
font-family: SourceSansPro-Regular !important;
font-size: 32px;
color: #f0f1b4;
padding: 5px 10px;
background-color: #282828;
margin: 0px 5px;
}
#hp_header .number .members_count {
width: 100%;
float: left;
margin-top: 10px;
color: #282828;
font-family: SourceSansPro-Regular !important;
text-transform: uppercase;
letter-spacing: 5px;
}
<div id="hp_header">
<span class="number">
<span class="number_inner">
<span class="count">1</span>
<span class="count">5</span>
<span class="count">2</span>
,
<span class="count">2</span>
<span class="count">4</span>
<span class="count">2</span>
</span>
</span>
</div>
Thanks in advance.
Hope below code will help you. For testing i put 2 seconds interval(2000). You can make it (60000) for each minute
setInterval(oneSecondFunction, 2000);
function oneSecondFunction() {
total = document.getElementsByClassName('count').length;
values = document.getElementsByClassName('count');
current_value='';
for(i=0;i<total;i++)
{
current_value+=values[i].innerHTML;
}
new_value = parseInt(current_value)+2;
new_value_string=new_value.toString();
for(j=0;j<new_value_string.length;j++)
{
values[j].innerHTML = new_value_string[j];
}
}
#hp_header .number{
display: inline-block;
width: 100%;
text-align: center;
margin-top: 40px;
}
#hp_header .number .number_inner{
display: inline-block;
text-align: center;
color: #282828;
font-family: SourceSansPro-Regular !important;
font-size: 32px;
}
#hp_header .number .count{
font-family: SourceSansPro-Regular !important;
font-size: 32px;
color: #f0f1b4;
padding: 5px 10px;
background-color: #282828;
margin: 0px 5px;
}
#hp_header .number .members_count {
width: 100%;
float: left;
margin-top: 10px;
color: #282828;
font-family: SourceSansPro-Regular !important;
text-transform: uppercase;
letter-spacing: 5px;
}
<div id="hp_header">
<span class="number">
<span class="number_inner">
<span class="count">1</span>
<span class="count">5</span>
<span class="count">2</span>
,
<span class="count">2</span>
<span class="count">4</span>
<span class="count">2</span>
</span>
</span>
</div>
I'm doing a database project for university, but actually my question is related to html or css (I think).
Here's the thing: I have a navigation bar around the website but when I'm in some some pages I can't access others, for example when I'm in "change password" page and I put the mouse over "Log Out" it's impossible to click.
Thanks in advance, André
Here's the code:
<div id="linking">
<ul>
<li>
Home
</li>
<li>
Search for trips
</li>
<?php
if (isset($_SESSION['user_logged_in'])) {
if (($_SESSION['user_email']) === "admin#email.com") {
?>
<li>
Create tour
</li>
<li>
Create service
</li>
<?php
}
?>
<li>
<a href='profile.php'>Change settings</a>
</li>
<li>
<a href='change_password.php'>Change password</a>
</li>
<li>
<a href='logout.php'>Log out</a>
</li>
<label>Hello <?php print_r($_SESSION['user_name']) ?>!</label>
<?php
}
else {
?>
<li>
<a href='login.php'>Log In</a>
</li>
<li>
Register
</li>
<label>Hello visitor!</label>
<?php
}
?>
</ul>
</div>
And here's the css:
/* common properties */
body{
background-color: #d8d8d8;
}
hr{
color: firebrick;
background-color: firebrick;
border-color: transparent;
}
.registering {
position: absolute;
left: 30%;
top: 0%;
}
.loging {
position: absolute;
left: 33%;
top: 25%;
}
td{
vertical-align: middle;
}
/* .loging class properties */
body .loging{
position:absolute;
left:32%;
top:25%;
}
.loging td{
padding: 5px;
text-align: center;
font-size: 20px;
font-family: sans-serif;
color: firebrick;
}
.loging td input{
width: 500px;
height: 23px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-style: solid;
border-color: transparent;
text-align: center;
font-size: 16px;
}
.loging td input[type="submit"]{
width: 120px;
height: 30px;
background-color: firebrick;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
border-radius: 0px;
}
.loging td input[type="password"]{
font-size: 24px;
}
/*. registering class properties */
.registering td{
padding: 5px;
text-align: center;
font-size: 18px;
font-family: sans-serif;
color: firebrick;
}
.registering td input{
width: 500px;
height: 23px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-style: solid;
border-color: transparent;
text-align: center;
font-size: 16px;
}
.registering td input[type="submit"]{
width: 120px;
height: 30px;
background-color: firebrick;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
border-radius: 0px;
}
.registering td input[type="password"]{
font-size: 24px;
}
/* .linking properties */
#linking label{
color: firebrick;
font-weight: bold;
float:right;
position: fixed;
left: 90%;
font-family: sans-serif;
font-size: 16px;
}
li{
display: inline;
padding-right: 2px;
padding-left: 2px;
}
a{
color:firebrick;
font-weight: bold;
position: relative;
display: inline-block;
font-family: sans-serif;
font-size: 14px;
text-decoration: none;
}
/* section properties */
section{
padding:5px;
position: absolute;
width:30%;
}
section table{
padding: 8px;
}
section hr{
background-color: #FFFFFF;
}
section td, th{
width:32%;
text-align: center;
}
/* search for trips */
body .search{
position:absolute;
left:32%;
top:25%;
}
.search td{
padding: 5px;
text-align: center;
font-size: 20px;
font-family: sans-serif;
color: firebrick;
}
.search td input{
width: 500px;
height: 23px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-style: solid;
border-color: transparent;
text-align: center;
font-size: 16px;
}
.search td input[type="submit"]{
width: 120px;
height: 30px;
background-color: firebrick;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
border-radius: 0px;
}
Logout.php code:
<?php
session_start();
unset($_SESSION['user_logged_in']);
session_destroy();
header("Location:index.php");
echo "<script>alert('You have been logged out! Please come back anytime!')</script>";
?>
i think you have not added the link(logout.php) to every page..