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
Related
I integrated Jotforms into a landing page more for the purpose of storing data. However, I'm having an issue after submission. Every time someone submits a form, jotforms has this error thing that is like a new page, but it still actually submits the data to jotforms. I'm trying to have it once they submit either just goes back to top of page or a popup where it says Thank you for submitting or something like that
<?php
// $manager = new MongoDB\Driver\Manager("mongodb+srv://tribit_proxy_user:uM3JLpGJr58GeVf#cluster0.j6oly.mongodb.net/test?authSource=admin&replicaSet=atlas-115czw-shard-0&readPreference=primary&appname=MongoDB%20Compass&ssl=true");
?>
<!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>ShopCK</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./style.css">
</link>
</head>
<?php
if (isset($_POST['submission_id'])) {
// $bulk = new MongoDB\Driver\BulkWrite;
// $document = ['contactName' => $_POST['contactname'], 'contactEmail' => $_POST['contactemail'], 'contactPhone' => $_POST['contactphone'], 'businessName' => $_POST['businessname'], 'businessPhone' => $_POST['businessphone'], 'businessPhysicalAddress' => $_POST['businessphysical'], 'businessEmail' => $_POST['businessemail'], 'businessWebsite' => $_POST['businesswebsite'], 'facebook' => $_POST['facebook'], 'twitter' => $_POST['twitter'], 'instagram' => $_POST['instagram'], 'youtube' => $_POST['youtube'], 'linkedin' => $_POST['linkedin'], 'businessCategory' => $_POST['businesscategory'], 'businessDescription' => $_POST['businessdescription'], 'additionalComment' => $_POST['anyadditionalcomment'], 'businessImages' => $_POST['uploadany']];
// $bulk->insert($document);
// $result = $manager->executeBulkWrite('test.user', $bulk);
echo "<h1>DATA INSERTED SUCCESSFULLY</h1>";
}
?>
<body>
<div class="shopck-banner">
<div class="banner-logo-container">
<img alt="" src="./images/Logo.png">
</div>
<div>
<h2 class="banner-title">ShopCK is coming soon!</h2>
<h6 class="banner-description">Providing a directory to discover and support local businesses.</h6>
</div>
<a style="text-decoration: none;" href="#form-container">
<div class="banner-btn-container">
<button class="banner-btn">Register now</button>
</div>
</a>
<div class="instagram-link"><a target="_blank" href="https://www.instagram.com/k_wicksy/"><i style="color: white; margin-right:6px" class="fa fa-camera"></i>#k_wicksy</a></div>
</div>
<div id="form-container">
<script type=" text/javascript" src="https://form.jotform.com/jsform/211297864375264"></script>
</div>
<div class="shopck-footer">
<a target="_blank" class="powerd-by-section" href="https://www.tribitsoftware.ca/">
<h6>Powered by Tribit Software</h6>
<div class="avatar">
<img src="./images/Tribit.png">
</div>
</a>
<p class="copyright">#Copyright 2021 ShopCK</p>
</div>
<?php
?>
</body>
</html>
html {
scroll-behavior: smooth;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
.shopck-banner{
background-image: url('./images/ShopCKHomeDark.png');
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
padding-top: 30px;
height: 100vh;
position: relative;
}
.banner-logo-container{
display: flex;
align-items: center;
justify-content: center;
}
.banner-logo-container img{
width: 200px;
margin-bottom: 8px;
}
.banner-title{
color: #FFF;
font-weight: bold;
text-align: center;
font-size: 3.75rem;
line-height: 1.2;
letter-spacing: -0.00833em;
margin-bottom: 8px;
}
.banner-description{
color: #FFF;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.0075em;
text-align: center;
margin-bottom: 8px;
}
.banner-btn-container{
display: flex;
align-items: center;
justify-content: center;
}
.banner-btn{
border: none;
color: #FFF;
align-self: flex-end;
margin-top: 32px;
padding-top: 15px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 15px;
background-color: #000;
font-size: 0.875rem;
min-width: 64px;
box-sizing: border-box;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
line-height: 1.75;
border-radius: 4px;
letter-spacing: 0.02857em;
text-transform: uppercase;
cursor: pointer;
}
.banner-btn:hover{
color: #FFF;
background-color: #2b2b2b;
}
.instagram-link{
position: absolute;
bottom: 16px;
right: 16px;
}
.instagram-link a{
color: #FFF;
text-decoration: none;
cursor: pointer;
}
.instagram-link a:hover{
color:#ddd;
}
.shopck-footer{
color: #939596;
padding: 20px;
min-height: 50px;
background-color: #1c1d1f;
}
.powerd-by-section{
display: flex;
align-items: center;
color: #939596;
text-decoration: none;
transition: all .3s ease;
}
.powerd-by-section:hover{
color: #ddd;
}
.powerd-by-section h6{
font-size: 1.25rem;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.0075em;
}
.powerd-by-section img{
width: 50px;
height: 50px;
border-radius: 50%;
margin-left: 8px;
}
.copyright{
margin-top: 15px;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.43;
letter-spacing: 0.01071em;
}
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..
Long story short I was using in-line CSS directly in the page for the longest time, but decided to put it all in one file for my own sanity. I have tried the typical
<link rel="stylesheet" href="URL">
method and it loaded, but looked extremely weird, so I decided to include it with a PHP like
<?php include("assets/style.php"); ?>
and it works perfectly fine on all of my desktop browser like Chrome and IE, but on mobile safari the entire page is a mess.
This is my page.
<!DOCTYPE html>
<html>
<head>
<title>EPICMC</title>
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">
<meta name="description" content="EPICMC is a service that lets you interact with your favorite servers in a new and exciting way.">
<meta name="keywords" content="epicmc,epic mc,epicmc server,epicmc/register,epicmc mcpe,epicmc vote,epicmcs vote,epicmc twitter,epicmc register,epicmcgaming,epicmc mcpe,epicmcpixels,epicmc donate,epicmcs donate,epic mc admin,epic mc builds">
<meta name=viewport content="width=device-width, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Days+One&text=EPICM" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Numans' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="https://epicmc.us/dist/css/ripples.min.css" rel="stylesheet">
<link href="https://epicmc.us/dist/css/material-wfont.min.css" rel="stylesheet">
<?php include("assets/style.php"); ?>
</head>
<body>
<?php include("assets/header.php"); ?>
<hgroup>
<h1 class="logo">EPIC<font color="#00aa00">MC</font></h1>
</hgroup>
<form id="statsform" action="stats.php" method="GET">
<div class="group">
<input type="text" name="player" id="CAPSINPUT" placeholder="USERNAME" autocomplete="off"><span class="bar"></span>
</div>
<center><input type="submit" value="CHECK STATS" class="load-more"></a></center>
</form>
</div>
</div>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- BANNER -->
<center><ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-4863164385597709"
data-ad-slot="3088967678"></ins></center>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://epicmc.us/dist/js/textbox.js"></script>
<script src="https://epicmc.us/dist/js/loadingbutton.js"></script>
<script src="https://epicmc.us/dist/js/ripples.min.js"></script>
<script src="https://epicmc.us/dist/js/material.min.js"></script>
<script>
$(document).ready(function() {
$.material.init();
});
</script>
</body>
</html>
This is my style.php
<style type="text/css">
#charset "UTF-8";
* { box-sizing: border-box;
}
p {
display: inline;
}
form {
width: 300px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
font-family: 'Numans', sans-serif;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
background: transparent;
}
input:focus {
outline: none;
}
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75);
left: -2px;
color: #00aa00;
}
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #00aa00;
transition: all 0.2s ease;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
a:link,a:visited,a:hover,a:active {
color: #636363;
text-decoration: none;
}
body {
font-family: 'Numans', sans-serif;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align: center;
margin-top: 4em;
}
h1 {
color: #636363;
}
h2 {
font-family: 'Numans', sans-serif;
font-size: 12px;
}
#error {
font-family: 'Numans', sans-serif;
font-size: 15px;
text-align: center;
margin-top: -15px;
margin-bottom: 20px;
}
#username, h5 {
font-family: 'Numans',sans-serif;
font-size: 18px;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
text-transform: uppercase;
}
.logo {
font-family: 'Days One', sans-serif;
font-weight: lighter;
font-size: 48px;
margin-bottom: 35px;
text-align: center;
}
.alert-info, .alert-danger, .alert-warning, .alert-success {
margin-top: -20px;
background-color: #323232;
}
.container {
text-align: center;
}
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
border-bottom: none;
}
.load-more.load-more--loading {
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
};
}
#CAPSINPUT, .CAPSINPUT {
text-transform: uppercase;
}
#stats {
width: 300px;
margin: 4em auto;
padding: 1.5em 1.5em 1.5em 1.5em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
#statsform {
background: #fafafa;
}
#search {
background: transparent;
}
table {
color: #333;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #ebebeb;
cursor: pointer;
}
td, th {
border: 1px solid transparent;
/* No more visible border */
height: 30px;
transition: all 0.3s;
/* Simple transition for hover effect */;
}
th {
background: #DFDFDF;
/* Darken header a bit */
font-weight: bold;
}
td {
background: #FAFAFA;
text-align: center;
width: 33.33%;
border-left: 2px solid #ebebeb;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td {
background: #FEFEFE;
}
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td {
background: #F1F1F1;
}
tr td:hover {
background: #666;
color: #FFF;
} /* Hover cell effect! */
.fa-stack {
color: #00aa00;
}
#container-avatar img {
background: url('https://epicmc.us/images/herobrine.png');
background-repeat: no-repeat;
background-position: center;
display: block;
height: 85px;
width: 85px;
pointer-events: none;
}
#container-avatar #badge {
font-size: 12px;
margin: -22px 0 0 130px;
position: absolute;
text-align: center;
width: 68px;
}
</style>
the href should be "style.css" and rename the style.php to style.css and remove the tag
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>";
}