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;
}
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
This question already has answers here:
PHP's white screen of death [duplicate]
Can I mix MySQL APIs in PHP?
(4 answers)
Closed 5 years ago.
I have a problem. When I open my page I get a white page, it does not appear that the page is loading,
I tried php and html without css,
but that did not work either. Hopefully you can help me!
Thanks in advance!
INDEX.PHP
<?php
ini_set('display_errors',1); error_reporting(E_ALL);
file_get_contents("http://d*********/includes/class.database.php");
session_start();
if( !isset($_SESSION['username']) ){
header("location:inloggen.php?login=again");
}
?>
<?php
$conn = mysqli_connect("localhost", "dutchair_bvh", "password") or die("Kon niet verbinden met de server, meld dit aan Job!");
$output = '';
// lucht
if(isset($_POST['search'])) {
$searchq = $_POST['search'];
$searchg = preg_replace("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM dutchair_bvh.burgers WHERE voornaam LIKE '%$searchq%' OR achternaam LIKE '%$searchq%'") or die("Zoeken mislukt");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'Niks gevonden in de politie database!';
} else {
while($row = mysql_fetch_array($query)) {
$voornaam = $row['voornaam'];
$achternaam = $row['achternaam'];
$dob = $row['geboortedatum'];
$id = $row['id'];
}
}
$output .= '<div>'.$voornaam.' '.$achternaam.' '.$dob.'</div>';
?>
<link rel="shortcut icon" type="image/png" href="/favicon.png">
<title>Basisvoorziening Handhaving</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bvh.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://**************6/styles/global.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale: 1.0, user-scaleable=0">
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div id="background"></div>
<div id="header">
<div class="logo">Politie <span>Nederland</span></div> <img src="https://i.gyazo.com/92a8831641f752f13707a4e967f2d8c0.png" height="45" width="55">
<div class="logor">Unit Administration <span>System</span></div>
</div>
<form action="" method="post">
<input type="text" name="search" placeholder="Zoek burger">
<input type="submit" class="btn btn2" value="zoek" />
</form>
<?php print("$output");?>
<?php
}
?>
STYLE.CSS
body {
background: #EDEBED
}
input[type=text] {
width: 190px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.6s ease-in-out;
}
input[type=text]:focus {
width: 30%;
}
.btn{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.btn2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.btn2:hover {
background-color: #008CBA;
color: white;
}
GLOBAL.CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic);
#import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
.login-block {
width: 400px;
padding: 20px;
background: #fff;
border-radius: 5px;
border-top: 5px solid #264d73;
margin: 0 auto;
}
.login-block h1 {
text-align: center;
color: #000;
font-size: 18px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 20px;
}
.login-block input {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: 'Open Sans';
padding: 0 20px 0 50px;
outline: none;
}
.login-block select {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: 'Open Sans';
padding: 0 20px 0 50px;
outline: none;
}
.login-block input#username {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#password {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input:active, .login-block input:focus {
border: 1px solid #264d73;
}
.login-block button {
width: 100%;
height: 40px;
background: #264d73;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #264d73;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
font-family: 'Open Sans';
outline: none;
cursor: pointer;
}
.login-block button:hover {
background: #afcee9;
}
/*
.credits {
/*margin-left: 1100px;
margin-top: 470px;
margin-left: -650px;
font-size:20px;
}
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
}
a {
text-decoration: none;
}
/*Start of making table*/
/*End of making table*/
div#header{
width: 100%;
height: 50px;
background-color: #264d73;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 4px;
margin-left: 10px;
text-decoration: none;
}
.logor {
float: right;
margin-top: 4px;
margin-right: 10px;
text-decoration: none;
}
.logor a span {
font-weight: 300;
text-decoration: none;
}
.logor a {
font-size: 1.6em;
color: #fff;
text-decoration: none;
}
.logoE {
float: left;
margin-top: 4px;
margin-left: calc(100% - 320px);
}
.logoE a {
font-size: 1.5em;
color: #fff;
text-decoration: none;
}
.logoE a span {
font-weight: 300;
text-decoration: none;
}
.logo a {
font-size: 1.6em;
color: #fff;
}
.logo a span {
font-weight: 300;
}
input[type=submit]{
padding:5px 20px;
background:#ccc;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: 10px;
margin-right:auto;
margin-left:auto;
}
div#login{
width:600px;
margin: 0% auto auto auto;
font-weight: 300;
}
div#txt{
margin-top:10%;
font-family: 'Open Sans';
font-size: 100px;
color: white;
}
div#login1{
width:600px;
margin: 100px auto auto auto;
font-weight: 300;
}
.content {
width: auto;
height: calc(100% - 86px);
/*height: 100%;*/
margin-left: 250px;
background-color: #F0F0F0;
padding: 15px;
}
a.mobile {
display: block;
color: #fff;
background-color: #000;
text-align: centre;
padding: 7px;
}
a.mobile:active {
background-color: #4A4A4A;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
.sidebar {
width: calc(100% + 280px);
display: none;
height: calc(100% + 115px);
}
div#txt{
font-family: 'Open Sans';
font-size: 100px;
color: white;
margin-left: 30%;
}
.content {
margin-left: 0px;
width: calc(100% + 280px);
height: calc(100% + 320px);
/*height: 100%;*/
background-color: #F0F0F0;
padding: 15px;
}
div#header{
width: calc(100% + 280px);
height: 50px;
background-color: #264d73;
margin: 0 auto;
}
a.mobile {
/*display: none;*/
width: calc(100% + 280px);
}
div#login{
margin-bottom: 390px;
}
}
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
.sidebar {
width: calc(100% + 900px);
display: none;
height: calc(100% + 255px);
}
.content {
margin-left: 0px;
height: calc(100% + 500px);
width: calc(100% + 900px);
}
div#txt{
margin-top:1%;
font-family: 'Open Sans';
font-size: 100px;
color: white;
margin-left: 92%;
}
div#header{
width: 100%;
height: 50px;
margin: 0 auto;
}
.content {
width: calc(100% + 900px);
height: calc(100% + 500px);
background-color: #F0F0F0;
padding: 15px;
}
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: auto;
margin: auto;
padding:5px;
width: auto;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
.search {
margin-left: 0;
margin-top: -30px;
}
.searchBar {
margin-left: 70;
margin-top: 20px;
}
.logoE {
float: left;
margin-top: 4px;
margin-left: calc(100% - 300px);
}
div#header{
width: calc(100% + 900px);
height: 50px;
background-color: #264d73;
margin: 0 auto;
}
.kick {
margin-left: 100px;
margin-top: -30px;
}
.note {
margin-left: 200px;
margin-top: -30px;
}
a.mobile {
width: calc(100% + 900px);
/*display: none;*/
}
div#login{
margin-left: 75%;
margin-top: 20%;
margin-bottom: 40px;
}
}
Hope you guys know what is wrong!
(There are no errors)
Greetings, Job
I am new to this and still learning. So its more of question than answer. I got rid of the last french brace after the print output statment and moved it up to the main php after the you define your $ouput variable. I left he print $output where it was.
I got a search box on the screen. I am not sure why that brace was there at all.
good luck
Here is code:
(i had to comment out lines that were giving me errors for obvious reasons)
<?php ini_set('display_errors',1); error_reporting(E_ALL);
//file_get_contents("http://d*********/includes/class.database.php");
session_start();
if( !isset($_SESSION['username']) ){
// header("location:inloggen.php?login=again");
}
?>
<?php
//$conn = mysqli_connect("localhost", "dutchair_bvh", "password") or die("Kon niet verbinden met de server, meld dit aan Job!");
$output = '';
// lucht
if(isset($_POST['search'])) {
$searchq = $_POST['search'];
$searchg = preg_replace("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM dutchair_bvh.burgers WHERE voornaam LIKE '%$searchq%' OR achternaam LIKE '%$searchq%'") or die("Zoeken mislukt");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'Niks gevonden in de politie database!';
} else {
while($row = mysql_fetch_array($query)) {
$voornaam = $row['voornaam'];
$achternaam = $row['achternaam'];
$dob = $row['geboortedatum'];
$id = $row['id'];
}
}
$output .= '<div>'.$voornaam.' '.$achternaam.' '.$dob.'</div>';
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/png" href="/favicon.png">
<title>Basisvoorziening Handhaving</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bvh.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://**************6/styles/global.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale: 1.0, user-scaleable=0">
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div id="background"></div>
<div id="header">
<div class="logo">Politie <span>Nederland</span></div> <img src="https://i.gyazo.com/92a8831641f752f13707a4e967f2d8c0.png" height="45" width="55">
<div class="logor">Unit Administration <span>System</span></div>
</div>
<form action="" method="post">
<input type="text" name="search" placeholder="Zoek burger">
<input type="submit" class="btn btn2" value="zoek" />
</form>
<?php print("$output");?>
</body>
</html>
Previously i have added color red to my css code. However, i have deleted the code. But the red still remain on the web. What should i do? This is the html on my php file.
echo " <div class='toship-info'>
<div class='toship-header'>Deliver to: </div>
<div class='toship-content'>
<div class='toship-att'>Name : </div>
<div class='toship-data'>$ship_name</div>
<div class='toship-att'>Address : </div>
<div class='toship-data'>$ship_address</div>
<div class='toship-att'>Contact No : </div>
<div class='toship-data'>$ship_contact</div>
<div class='toship-att'>Email : </div>
<div class='toship-data'>$ship_email</div>
<br><strong>*If there is any inquiries please contact our Apex Store at
+6(04)-3901025. </strong></br>
</div>
</div>
";
This is my css file. How should i change it?
.toship-info{
width: 600px;
margin: auto;
}
.toship-header{
background: rgb(63,63,63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
padding-left: 15px;
}
.toship-content{
background: rgb(238,238,238);
height: 130px;
padding-top: 10px;
}
.toship-att{
width: 100px;
text-align: left;
font-size: 12px;
font-weight: bold;
padding: 3px;
float: left;
box-sizing: border-box;
}
.toship-data{
width: 500px;
padding: 3px;
font-weight: bold;
font-size: 12px;
float: left;
box-sizing: border-box;
}
.toship-item{
width: 600px;
margin: auto;
margin-bottom: 20px;
}
.toship-item-header{
background: rgb(63,63,63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
margin-bottom: 0px;
padding: 0;
margin: 0;
[![enter image description here][1]][1]}
Try to open in other browser, or if you are using any framework or cms then clear view cache.
Your browser probably cached the page. Try to clean your history/cache. How to do this depends on the browser you are using. For example, in Chrome you will go to History > History > Clear navigation data... > Image and files stored in cache. Also, as #rrd said in comments, in most browsers (Chrome included) Ctrl+R will reload the actual page and not the cached one.
Ctrl-F5 will do the trick. It's in the browser cache. Ctrl-F5 will ask for a complete new request and hence avoid the cache.
When i use the below code i don't see any red text
<style>
.toship-info {
width: 600px;
margin: auto;
}
.toship-header {
background: rgb(63, 63, 63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
padding-left: 15px;
}
.toship-content {
background: rgb(238, 238, 238);
height: 130px;
padding-top: 10px;
}
.toship-att {
width: 100px;
text-align: left;
font-size: 12px;
font-weight: bold;
padding: 3px;
float: left;
box-sizing: border-box;
}
.toship-data {
width: 500px;
padding: 3px;
font-weight: bold;
font-size: 12px;
float: left;
box-sizing: border-box;
}
.toship-item {
width: 600px;
margin: auto;
margin-bottom: 20px;
}
.toship-item-header {
background: rgb(63, 63, 63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
margin-bottom: 0px;
padding: 0;
margin: 0;
</style>
</head>
<body>
<div class='toship-info'> "
<div class='toship-header'>Deliver to: </div>
<div class='toship-content'>
<div class='toship-att'>Name : </div>
<div class='toship-data'>$ship_name</div>
<div class='toship-att'>Address : </div>
<div class='toship-data'>$ship_address</div>
<div class='toship-att'>Contact No : </div>
<div class='toship-data'>$ship_contact</div>
<div class='toship-att'>Email : </div>
<div class='toship-data'>$ship_email</div>
<br>
<strong>*If there is any inquiries please contact our Apex Store at
+6(04)-3901025. </strong>
<br />
</div>
</div>
</body>
Please make sure you markup your HTML properly..
was incorrectly marked up
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 am working with wordpress, when I add
<?php bsg_head(); ?>
to the header all the content on the page disappears. The formatting from the stylesheet is still applied though as it changes the background colour. Can anyone help me work out why?
single.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php bloginfo('name'); ?> | <?php bloginfo('title'); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php bsg_head(); ?>
</head>
<body>
<div class="container_12" id="singlepost">
<div class="grid_12">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div>
<div class="clear"></div>
</div>
</body>
</html>
style.css
/*
Theme Name:
Theme URI: http://www..co.uk
Description:
Version: 2
Author: Alex Sadler
Author URI: http://www..co.uk
*/
#charset "UTF-8";
/* CSS Document */
#import url("css/grid.css");
#import url("css/fonts/fonts.css");
#import url("css/coda-slider.css");
#import url("css/jquery.fancybox.css");
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
body {
background-color: #3D341A;
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
a:link {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #CCCCCC;
text-decoration: underline;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-family: nexa_boldregular, Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 5px 0px 5px;
padding: 0px;
}
h1 {
font-size: 18px;
color: #FFFFFF;
}
h2 {
font-size: 12px;
color: #FFFFFF;
}
h3 {
font-size: 10px;
color: #FFFFFF;
}
P {
margin: 0px;
padding: 0px;
}
IMG {
border: 0px;
}
.center {
text-align: center;
}
#contentwrapper {
padding-bottom: 20px;
}
#header {
padding-top: 20px;
position: fixed;
width: 100%;
padding-bottom: 20px;
z-index: 99;
}
#title h1 {
font-size: 24px;
}
#info {
text-align: right;
text-transform: uppercase;
font: normal 12px nexa_lightregular, Arial, Helvetica, sans-serif;
}
#info .headerphone {
font-family: nexa_boldregular, Arial, Helvetica, sans-serif;
}
#slogan {
padding-top: 350px;
text-shadow: 0px 0px 2px #000;
}
#slogan h1 {
margin: -30px 0px 0px;
padding: 0px;
font: small-caps 120px nexa_boldregular, Arial, Helvetica, sans-serif;
}
#slogan h2 {
margin: 0px;
padding: 0px;
font: small-caps 60px nexa_boldregular, Arial, Helvetica, sans-serif;
}
.block {
height: 170px;
width: 260px;
padding: 20px;
background: #525055 no-repeat center center;
float: left;
}
.portfolioblock {
height: 210px;
width: 300px;
background: #525055 no-repeat center center;
float: left;
overflow: hidden;
}
.portfolioblock .rollover {
height: 170px;
width: 260px;
padding: 20px;
background: url(img/rolloverbg.png);
margin-top: 210px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.portfolioblock:hover .rollover {
float: left;
margin-top: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.portfolioblock img {
margin-bottom: 20px;
}
.text h1 {
margin-left: 55px;
margin-top: 25px;
}
#socialmedia {
text-align: right;
}
#singlepost {
padding-top: 20px;
padding-bottom: 20px;
}
#blog a {
font-weight: normal;
}
As far as i'm aware, you need <?php wp_head(); ?>. Don't forget <?php wp_footer(); ?> in your footer, before your </body> tag, which is generally used for plugins echoing javascript libraries.
Enable the error reporting in php, so that you can see the exact error
Add the below code
<? error_reporting(E_ALL); ?>
For more PHP updates visit http://www.phpsyntax.blogspot.in/