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
Related
The button and text fields on my login page are unresponsive / I am unable to click or interact with them. It worked fine yesterday and is linked to a PHP database. I have no idea what code I changed but it was possibly CSS that has stopped it working. Any advice would be great as I am lost.
I have tried editing CSS but to avail.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Maoine in Eirinn (MIE) Wild Atlantic Gaeltacht Properties</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="container">
<?php include("includes/header.html");?>
<?php include("includes/nav.html");?>
<div id="content">
<?php
if (empty($_SESSION))
session_start();
if (isset($_SESSION['errors'])) {
echo "<div class='form-errors'>";
foreach($_SESSION['errors'] as $error)
{
echo "<p>";
echo $error;
echo "</p>";
}
echo "</div>";
}
unset($_SESSION['errors']);
?>
<div id="login">
<h3> Login </h3>
<form action="login_action.php" method="POST">
<p>
Username: <input type="text" name="adminname" required="required">
</p><p>
Password: <input type="password" name="password" required="required">
</p><p>
<input type="submit" value="Login">
</p>
</form>
</div>
</div>
<?php include("includes/footer.html");?>
</div>
</body>
</html>
body{background-color: #EEEEEE; }
#container{margin: auto;
width: 100%;
background-color: #EEEEEE;
border: 10px solid #EEEEEE;
}
#header{
background-color: #449966;
height: 110px;
margin-top: 38px;
}
#nav{background-color: #000000;
clear: left;
}
#moira{
float:right;
padding-right: 50px;
position: relative;
margin-left: 50px;
}
#martin{
float:right;
padding-right: 50px;
position: relative;
margin-left: 50px;
}
#openinghours{`
width: 30%;
float:left;
margin-left: 100px;}
#contactus{width: 50%;
float:left;
margin-bottom: 200px;}
#content{background-color: #EEEEEE;
padding: 50px;
min-height: 500px;
text-align: center;
}
#content a {background-color: #449966; color: white; text-decoration:none; padding:5px;}
#content a:hover {background-color: #878787; color: white;}
#footer{background-color: #449966;
height: 50px;
padding: 10px;
display: flex;
margin-top: 200px;
bottom: 0;
width: 100%;
position: fixed;
}
#comments {width: 70%; float: left;}
.container{
position: relative;
border-radius: 8px;
width: 90%;
height: 500px;
overflow: hidden;
}
#login{z-index: 100;}
#logo {float:left;}
#copyright {float:left;}
#footer ul{ text-align: center;
width: 50%;
margin: auto;}
#footer a{ color:#449966; }
#socialMedia{float:right; width: 150px; display: flex;}
#sitename{text-align: center;
width: 100%;}
#languageimage img{
border: 1px solid #ddd;
border-radius: 50%;
float:right;
display: flex;
vertical-align: top;}
table td {padding: 10px;}
table {width: 100%}
table tr:nth-child(1) {
background-color: #449966;
}
table tr {
background-color:#FFFFFF;
}
#displayproperties{width: 75%;}
#addtestimonial{width: 25%; margin-left: 50px; float: right;}
#addtestimonial table {border: 0px;}
#addtestimonial table tr td {padding: 0px; border: 0px;}
#addtestimonial table tr {background-color: #c6e1e0; border: 0px;}
.show {display:block;}
#commentform {
font-family: Arial;
width: auto;
}
label { float:left;
width: 50px;
clear: left;
text-align: left;
padding-right: 15px;
margin-top: 10px;
}
input, textarea {margin-top: 10px; }
#mysubmit { margin-left:65px;
padding-bottom: 10px;
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #449966;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#youtubewaw{margin-bottom: 200px;}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #449966;
color: white;
}
.dropdown-content a:hover {
background-color: #449966;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media only screen and (max-width: 1200px) {
#openinghours{float:none;}
#addtestimonial{float:none;}
#media only screen and (max-width: 768px) {
body{font-size:90%;}
#displayproducts td:nth-child(1){display:none;}
#commentform{width: auto; font-size: 80%;}
#mysubmit{margin-left: 0;}
#openinghours{float:none;}
td:nth-of-type(4){display:none;}
#content{ padding: 0px;}}
#media screen and (max-width: 768px) {
#sitename{display:none;}
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
#sitename{display:none;}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
I noticed you have an accidental ` character.
#openinghours{`
width: 30%;
float:left;
margin-left: 100px;}
Also you've got some id called #mysubmit but your submit input doesn't use that ID.
I removed the below and everything works again. I don't understand why but I am fairly new to this
.container{
position: relative;
I am setting up an ID card printing software in PHP both for landscape and portrait mode. The problem is with the print() command it always takes the standard page sizes A4, A3... Because of this it prints the id in a specific section of the card.
Can anyone help or recommend something? Perhaps there is another way to print it without print preview in chrome?
<style>
#page {
/*size: A5;
margin: 5px;*/
width: 53.98mm;
height: 85.60mm;
margin: 0px;
}
#media print {
html, body {
/*width: 210mm;
height: 297mm;*/
/*width: 218mm;
height: 340mm;*/
}
}
#printablediv {
width: 53.98mm;
height: 85.60mm;
}
.idcardreport {
font-family: arial;
-webkit-print-color-adjust: exact;
}
/*IDcard Front Part Css Code*/
.idcardreport-frontend{
margin: 2px;
float: left;
border: 1px solid #000;
padding: 10px;
width: 260px;
text-align: center;
height:370px;
background-size: 100% 100% !important;
}
.logo img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.pick img{
width: 60px;
height: 80px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.signe img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
h3 {
font-size: 14px;
color: #1A2229;
text-align: center;
}
h2 {
font-size: 10px;
color: #1A2229;
text-align: center;
}
h1 {
font-size: 18px;
color: #1A2229;
text-align: center;
}
p {
text-align: left;
font-size: 12px;
margin-bottom: 0px;
margin-top: 1px;
color: #1A2229;
}
.vertical{
writing-mode:tb-rl;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform:rotate(180deg);
transform: rotate(180deg);
white-space:nowrap;
display:block;
bottom:0;
}
</style>
<style>
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0px;
/*right: -400px;*/
top: 0;
}
}
button.btn.btn-dark {
padding: 10px;
position: relative;
top: -390px;
}
</style>
<button type="button" class="btn btn-dark" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
<div class="wrapper" id="section-to-print"></div> //add ID on the section u want to print
I have been working on a contact system - I got it to work, replies, everything - But the margins are way out of wack - see pic - Does anyone have any ideas what I am doing wrong? It is also centered and I want it to the left.
I have listed my index.php and styles.css below. I have to integrate it into an existing website - www.londonontariomortgages.ca/blog.html - So I am thinking of doing iFrame - However, with it not creating a new line when past the margin it looks dumb.
index.php
<?php require_once 'php/connect.php'; require_once 'php/functions.php'; ?>
<!doctype html>
<html>
<head>
<title>YouTube Comment System Series</title>
<meta charset="UTF-8" lang="en-US">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/global.js"></script>
</head>
<body>
<p>
<div class="page-container">
<?php
get_total();
require_once 'php/check_com.php';
?>
<form action="" method="post" class="main">
<label>enter a brief comment</label>
<textarea class="form-text" name="comment" id="comment"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="post">
</form>
<?php get_comments(); ?>
</div>
</p>
</body>
</html>
styles.php
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
/* resets */
* {
margin:0px;
padding:0px;
box-sizing:border-box;
font-family:'Calibri', sans-serif;
outline:none;
}
/* Animations */
#keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
/* body, html */
html, body {
background-color:#edf1f5;
}
/* content */
.page-container {
width:80%;
height:auto;
min-height:100vh;
margin:0 auto;
padding:50px 10px 0px 10px;
}
.comment {
width:45%;
height:auto;
padding:7px 23px;
margin:0px auto;
margin-bottom:10px;
text-align:left;
}
.child {
margin-top:10px;
margin-left:30px;
padding-left:5px;
}
.child-comments {
border-left:1px solid rgba(1,1,1,0.2);
}
form.main {
width:45%;
margin:0 auto;
margin-top:5px;
}
.form-input {
border:1px solid rgba(1,1,1,0.3);
width:50%;
padding:4px 7px;
font-size:13px;
line-height:24px;
resize:none;
}
.form-text {
border:1px solid rgba(1,1,1,0.3);
width:100%;
padding:4px 7px;
margin-top:5px;
font-size:13px;
line-height:24px;
resize:none;
transition:ease 0.2s all;
outline:none !important;
}
.form-text-error {
border-color:rgba(237,28,36,0.7);
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.form-text:focus {
border-color:rgba(0,114,188,0.7);
}
.form-submit {
text-transform: uppercase;
border:1px solid rgba(1,1,1,0.3);
cursor:pointer;
padding:5px 13px;
margin-top:5px;
}
/* fonts */
.user, .time {
display:inline-block;
}
.user {
font-size:13px;
color:#0072bc;
text-decoration: none;
word-break: break-all;
line-height:17px;
}
.time {
font-size:11px;
color:#b2b1b1;
transition:ease 0.2s all;
}
.comment:hover .time {
color:#767676;
}
.comment-text {
font-size:13px;
line-height:17px;
color:#222;
margin:0px 10px;
}
a {
font-size:11.2px;
text-transform: uppercase;
text-decoration: none;
color:#222;
cursor:pointer;
transition:ease 0.3s all;
}
a:hover {
color:#0072bc;
}
.link-reply {
color:#767676;
margin-left:20px;
}
h1 {
width:45%;
height:auto;
margin:0px auto;
font-size:16px;
font-weight:300;
text-transform: uppercase;
border-bottom:1px solid rgba(1,1,1,0.2);
}
label {
font-size:13px;
text-transform: uppercase;
vertical-align: bottom;
}
See updated CSS, I removed margin: auto from the .page-container and form.main and ".comment"
That was causing the centering of form on the page instead of default left alignment.
Add this CSS for fixing the text not wrapping issue
.comment-text {
font-size: 13px;
line-height: 17px;
color: #222;
margin: 0px 10px;
word-break: break-all;
}
Your comments do not wrap because there is no space in them. So to break elements with no space in them, you need to add word-break: break-all property to break them explicitly.
In ideal world scenario, your comments will definitely have spaces in them and you wont need it(word-break), but the testers(testing your website ) will test it with any dummy data, so you need to be prepared for that and apply fix generally for this issue.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
/* resets */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Calibri', sans-serif;
outline: none;
}
/* Animations */
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
/* body, html */
html,
body {
background-color: #edf1f5;
}
/* content */
.page-container {
width: 80%;
height: auto;
min-height: 100vh;
padding: 20px 10px 0px 10px;
}
.comment {
width: 45%;
height: auto;
padding: 7px 0;
margin-bottom: 10px;
text-align: left;
}
.child {
margin-top: 10px;
margin-left: 30px;
padding-left: 5px;
}
.child-comments {
border-left: 1px solid rgba(1, 1, 1, 0.2);
}
form.main {
width: 45%;
margin-top: 5px;
}
.form-input {
border: 1px solid rgba(1, 1, 1, 0.3);
width: 50%;
padding: 4px 7px;
font-size: 13px;
line-height: 24px;
resize: none;
}
.form-text {
border: 1px solid rgba(1, 1, 1, 0.3);
width: 100%;
padding: 4px 7px;
margin-top: 5px;
font-size: 13px;
line-height: 24px;
resize: none;
transition: ease 0.2s all;
outline: none !important;
}
.form-text-error {
border-color: rgba(237, 28, 36, 0.7);
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.form-text:focus {
border-color: rgba(0, 114, 188, 0.7);
}
.form-submit {
text-transform: uppercase;
border: 1px solid rgba(1, 1, 1, 0.3);
cursor: pointer;
padding: 5px 13px;
margin-top: 5px;
}
/* fonts */
.user,
.time {
display: inline-block;
}
.user {
font-size: 13px;
color: #0072bc;
text-decoration: none;
word-break: break-all;
line-height: 17px;
}
.time {
font-size: 11px;
color: #b2b1b1;
transition: ease 0.2s all;
}
.comment:hover .time {
color: #767676;
}
.comment-text {
font-size: 13px;
line-height: 17px;
color: #222;
margin: 0px 10px;
}
a {
font-size: 11.2px;
text-transform: uppercase;
text-decoration: none;
color: #222;
cursor: pointer;
transition: ease 0.3s all;
}
a:hover {
color: #0072bc;
}
.link-reply {
color: #767676;
margin-left: 20px;
}
h1 {
width: 45%;
height: auto;
margin: 0px auto;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(1, 1, 1, 0.2);
}
label {
font-size: 13px;
text-transform: uppercase;
vertical-align: bottom;
}
<html>
<head>
<title>YouTube Comment System Series</title>
<meta charset="UTF-8" lang="en-US">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/global.js"></script>
</head>
<body>
<p>
<div class="page-container">
<?php
get_total();
require_once 'php/check_com.php';
?>
<form action="" method="post" class="main">
<label>enter a brief comment</label>
<textarea class="form-text" name="comment" id="comment"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="post">
</form>
<?php get_comments(); ?>
</div>
</p>
</body>
</html>
I am working on a simple login page with a login form. When i added < !DOCTYPE HTML>, the input field sketched further than the container when set to 100% width. I have searched for solution and noticed questions asked consider doctype messing up css is regarding a specific problem.
Below are my codes;
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 25px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -18px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="">
<title>Member Login</title>
<link rel="stylesheet" href="fonts/FontAwesome/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/login.css">
</head>
<body>
<div class="loginbox">
<img class="loginavatar" src="assets/images/user.png" draggable="false" />
<h1>Login Form</h1>
<div class="inputContainer">
<form method="POST" action="">
<!--<p>Username</p>-->
<div class="usernithicon inputBox">
<i class="fa fa-user logico"></i>
<input type="text" id="usern" name="username" required><label for="usern">Username</label></div>
<!--<p>Password</p>-->
<div class="passnithicon inputBox">
<i class="fa fa-lock logico"></i>
<input type="password" id="pswrd" name="password" required><label for="pswrd">Password</label></div>
<input type="checkbox" id="remberme" name="remember"><label for="remberme">Remeber Me</label>
<input type="submit" name="" value="Login">
Forgot password?<br>
Create An Account
</form>
</div>
</div>
</body>
</html>
When this renders in browser the username and password input field will become stretched and i was able to use width:90%;, which works fine but i would love to have it set to width:100%; (which works perfectly without added the doctype tag) but when the doctype code is added, it becomes stretched.
Additional Issue: The background image i added to the body wont cover the whole screen, it breaks in the middle and repeat. i tried adding background-repeat:none; but didn't work. but if i remove the doctype tag, the background fills up the page as expected.
How do i solve this?
base on what you want i added display: inline-flex; in your input wrappers
Try this
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 20px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
display: inline-flex;
align-items: baseline;
width: 100%;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -22px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
For the background try this
body, html{
height: 100%;
background-image: url('your_image_path')
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
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>