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
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;
this is a follow-up question to the one posted here. i am trying to get my fonts to show up[ in my laravel website. i tried changing things so SASS will import my fonts, but they're still not showing up on my website. I went to check weaqther the font downloaded in Chrome devtools, but Chrome said the font loaded a 404 error. i checked the link, and the font downloads. Very strange. How do i get my fonts to show up/
Here is my SASS file:
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
#mixin fontFace($family,$src,$weight: normal,$style: normal) {
#font-face {
font-family: $family;
src: url('#{$src}'); // IE9 compat
font-style: $style;
font-weight: $weight;
}
}
#include fontFace('Nexabold', 'public/build/fonts/nexaBold.otf')
body {
margin: 0;
background-color: #ecf0f1;
font-family: NexaBold;
}
.mainheader {
height: 75px;
font-family: NexaBold;
font-size: 28px;
line-height: 75px;
text-align: center;
vertical-align: middle;
background-color: #dce0e1; }
.menu {
height: 40px; }
.subcontainter-title{float:left;}
.subcontainer-left {
height: 75px;
float: left;
width:50%;
}
.subcontainer {
height: 75px;
margin: auto; }
.subcontainer-right {
height: 75px;
width: 50%;
float: right; }
.subcontainer-button {
height: 90px;
width: 105px;
float: right;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.subcontainer-left .subcontainer-button{float:left;}
.subcontainer-button a {
text-decoration: none;
color: black; }
.subcontainer-button a:visited {
text-decoration: none;
color: black; }
.subcontainer-button a:active {
color: black; }
.subcontainer-button a:hover {
border-bottom: 3px solid gray;
cursor: pointer; }
.subcontainer-title {
height: 75px;
float: left;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.bt-active a {
border-bottom: 3px solid gold; }
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.maincontainer {
height: 700px; }
.textheader {
height: 180px;
text-align: center;
vertical-align: middle;
line-height: 180px;
font-family: NexaLight;
font-size: 48px; }
.ongoing-header {
width: 700px;
margin: auto;
height: 70px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-color: #bcc0c1; }
.subheader {
height: 70px;
width: 260px;
font-family: OpenSans;
font-weight: bold;
font-size: 22px;
text-align: center;
line-height: 70px;
vertical-align: middle;
float: left; }
.subheader-menu {
height: 36px;
background-color: #ccd0d1; }
.button {
height: 36px;
width: auto;
margin: auto;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 36px;
font-family: OpenSans;
cursor: pointer;
border-radius: 4px;
transition: 0.3s; }
.button:hover {
background-color: #ecf0f1; }
.subheader-right {
float: right;
padding-top: 16px;
width: 260px;
margin: auto;
margin-right: 24px; }
.ongoing-container {
width: 700px;
margin: auto; }
.ongoing-game {
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-family: OpenSans;
transition: 0.3s; }
.ongoing-game:nth-child(even):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(odd):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(even) {
background-color: #d3d9da; }
.ongoing-game:nth-child(odd) {
background-color: #dce0e1; }
.iconholder {
height: 20px;
width: 20px;
float: left;
margin-top: 4px;
margin-right: 4px; }
#username {
float: left;
height: 40px;
width: 220px;
text-align: left;
padding-left: 24px; }
#btcamount {
float: left;
height: 40px;
width: 220px;
text-align: right;
padding-right: 24px; }
#ongoing {
height: 40px;
width: 212px;
float: left; }
.bitcoinlogo {
height: 15px; }
.helpcontainer {
height: 600px;
width: 500px;
margin: auto;
font-family: OpenSans; }
.helpform {
margin-top: 20px;
height: 400px;
font-size: 12px; }
.helpform textarea {
resize: none;
font-family: OpenSans; }
#issuetext {
height: 100px;
width: 480px; }
#emailtext {
height: 18px;
width: 220px;
font-family: OpenSans; }
.submitbutton {
height: 40px;
width: 180px;
float: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 40px;
font-size: 14px;
cursor: pointer;
border-radius: 3px;
transition: 0.2s background-color; }
.submitbutton:hover {
background-color: lightgrey; }
I'm having a problem with my CSS style sheet. I try inputting the values to the DIV CLASSES, but there is no effect. The style sheet worked fine on my other HTML website, but I'm using a common header and footer via PHP on this website and it seems like it's interfering with the CSS for some reason. I don't know if my coding has any fallacies in it, but from what I can see everything looks fine:
CSS STYLE SHEET
body {
background-color: #000;
font-family: Arial, Verdana;
color: #fff;
}
a:link {
color: #ff0;
text-decoration: none;
}
a:visited {
color: #ff0;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:active {
color: #000f;
text-decoration: none;
}
p {
text-align: justify;
font-size: 14px;
}
.container {
border: 1px solid #fff;
width: 820px;
height: 1350px;
padding: 10px;
}
.header {
background-image: url("/Images/CSS/logo.jpg");
background-position: center;
background-size: cover;
height: 20%;
width: 100%;
}
.logo {
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: -o-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
border: 0px solid #fff;
height: 90%;
width: 100%;
}
.logo h1 {
margin: 15px;
color: #ffa500;
float: right;
position: relative;
bottom: -160;
}
.logo p {
font-size: 12px;
margin: 15px;
color: #ffa500;
float: left;
position: relative;
bottom: -175;
}
.userbar {
width: 100%;
height: 10%;
background-color: #000;
border: 1px solid #fff;
padding: 5px;
.body {
border: 0px solid #fff;
width: 100%;
height: 70%;
}
.left {
border: 1px solid #fff;
float: left;
width: 250px;
height: 100%;
}
.right {
border: 0px solid #fff;
float: right;
width: 550px;
height: 100%;
}
.nav {
width: 100%;
border: 1px solid #fff;
margin-top: 15px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-position: none;
list-style: none;
}
.nav li {
width: 85%;
margin: 15px;
color: #fff;
border-bottom: 1px dotted #fff;
}
.side {
margin-top: 25px;
color: #fff;
width: 100%;
border: 1px solid #fff;
}
.content {
width: 100%;
}
.content p {
padding: 10px;
color: #fff;
text-align: justify;
border-style: solid;
border-width: 0px;
}
.footer {
height: 10%;
width: 100%;
border: 1px solid #fff;
}
.footer p {
padding: 5px;
color: #fff;
text-align: center;
}
.pic {
padding: 10px;
margin: 10px;
}
.pic p {
width: 430px;
text-align: center;
font-size: 9px;
}
.pic1 {
float: left;
padding: 10px;
margin: 10px;
border: 1px solid #fff;
}
.pic1 p {
width: 170px;
text-align: center;
font-size: 9px;
}
.pic2 {
float: right;
margin: 10px;
padding: 10px;
border: 1px solid #fff;
}
.pic2 p {
width: 170px;
text-align: center;
font-size: 9px;
}
Index Page
Note that the Index page itself is not html. It's a PHP file and I'm using separate PHP files for the header and footer. This is just the page source to let you see the layout of my website.
<html>
<head>
<title></title>
<link rel ="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
</div>
<div class="userbar">
</div>
</div>
<div class="body">
<div class="left">
<div class="nav">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</div>
<div class="side">
<h3 align="center">News</h3>
</div>
</div>
<div class="right">
<div class="content"> </div><!----content----!>
</div><!----right----!>
<div class="footer">
</div>
</div><!----container----!>
</body>
</html>
I have read some other answers but have still not been able to get the settings right.
The columsheader does not start scrolling up again.
Here is my php:
<div id="columnsHeader" class="affix" data-offset-top="800" data-offset-bottom="400" data-spy="affix">
Here is my css:
.itemList {
position: relative;
}
.extrafieldscolumnsHeader {
position: absolute;
top: -25px;
width: 818px;
color:white;
min-height: 28px;
padding-top: 5px;
padding-left:8px;
}
#columnsHeader.affix {
border-top: 40px solid #FFFFFF;
position: fixed;
top: 43px;
width: 818px;
}
#columnsHeader.affix-bottom {
position: absolute; /* Start scrolling again. */
top: auto; /* Override the top position above. */
bottom: 55px; /* It should stop near the bottom of its parent. */
}
Here is the temp url:
http://108.163.203.210/~goodwin/xjoomla/index.php?option=com_k2&view=itemlist&layout=category&task=category&id=12&Itemid=143
i think this may works for you and you just need to set margin-bottom of <BODY>respect to your footer...
HTML:
<footer>
<button class="filter">filter ▶</button>
<button class="wgit">wGit ▶</button>
</footer>
CSS:
body > footer {
width: 100%;
position: fixed;
background-color: #ffffff;
bottom: 0px;
right: 0px;
height: 40px;
border-top: 1px solid #000000;
}
body > footer > button{
font-size: 16px;
float: right;
margin:5px 15px 5px 10px;
width: 80px;
padding: 3px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
body > footer > button:hover{
color: #000000;
box-shadow: 0px 0px 10px #c3c3c3 inset;
}
.filter-child {
display: none;
background-color: #ffffff;
position: fixed;
right:15px;
bottom:50px;
padding:5px;
border: 1px dashed #c3c3c3;
border-radius: 10px;
}
.filter-child li{
list-style: none;
padding: 5px;
text-align: center;
background-color: #f3f3f3;
margin: 2px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
.filter-child li:hover{
box-shadow: 0px 0px 5px #3a3a3a inset;
}
.filter-child a{
color: #000000;
}
and you can follow this links also...
http://www.cssstickyfooter.com/
http://css-tricks.com/snippets/css/sticky-footer/
My "Page [0]" text isn't centered on my webpage. Anyone know why? I could really use some help please.
Here is the html:
<html>
<head>
<title>Test Forum</title>
<link href="http://prime.programming-designs.com/test_forum/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="http://prime.programming-designs.com/test_forum//images/banner1.png" alt="" id="banner" />
<h1>Test Forums</h1>
<hr />
<div id="navi"><div id="naviheader">Boards</div>Testing<br />General Discussion<br />Video Games<br />Anime and Manga<br />BlazBlue<br />Shin Megami Tensei<br />Earthbound<br />Phantasy Star<br />Mobile Suit Gundam<br /></div>
<div class="postbox"><h4>CyanPrime</h4><hr />Welcome to the King's Gate BBS!</div>Page: [0]
</body>
</html>
Here is the CSS:
#charset "windows-1252";
body{
background-color: #EEFFF8;
color: #000000;
text-align: center;
}
.postbox{
text-align: left;
margin: auto;
background-color: #dbfef8;
border: 1px solid #82FFCD;
width: 50%;
margin-top: 10px;
}
.stickypostbox{
text-align: left;
margin: auto;
background-color: #F5FFFA;
border: 1px solid #82FFCD;
width: 50%;
margin-top: 10px;
}
h4{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #9932CC;
}
h1{
color: #551A8B;
}
hr{
color: #82FFCD;
background-color: #82FFCD;
height: 1px;
border: 0px dotted #82FFCD;
}
a{
color: #7F00FF;
text-decoration: none;
}
a:hover{
color: #7F00FF;
text-decoration: underline;
}
form{
margin: 0px auto;
width: 50%;
}
#formdiv {
background-color:#dbfef8;
border:1px solid #82FFCD;
}
.fielddiv1{
background-color: #f9f9f9;
border: 1px solid #DBFEF8;
vertical-align: middle;
width: 45%;
float: left;
}
.fielddiv2{
background-color: #f9f9f9;
border: 1px solid #DBFEF8;
vertical-align: middle;
width: 100%;
}
.fieldtext1{
width: 50%;
background-color: #82FFCD;
float: left;
}
.fieldtext2{
width: 100%;
background-color: #82FFCD;
}
#replydiv{
width: 100%;
background-color: #DBFEF8;
margin: 10px 0 10px 0;
}
#admindiv{
width: 100%;
background-color: #DBFEF8;
margin: 10px 0 10px 0;
}
#navi{
width: 200px;
background-color: #dbfef8;
border: 1px solid #82FFCD;
text-align: left;
float: left;
}
#naviheader{
width: 100%;
background-color: #82FFCD;
}
#submitbutton{
border: 1px solid #82FFCD;
background-color: #DBFEF8;
color: #000000;
margin-top: 5px;
width: 100px;
height: 20px;
}
#banner{
border: 1px solid #82FFCD;
}
.postbar{
margin-right: 0px;
margin-top: 0px;
}
.bannedtext{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #FF0000;
}
And here is the webpage so you can get some context (you'll notice that my "page [0]" is centered on the other boards, but not the index. http://prime.programming-designs.com/test_forum/
The float on the left is pushing the content to the right. It's still centred across the line, but it's not centred across the page. Adding a large bottom margin to .postbox illustrates this.
Centreing problem illustrated http://img169.imageshack.us/img169/9027/williamhtmlproblem.png
My suggestion would be to wrap the footer in a <div>. Either clear: both; (or just left), add margins on either end to compensate for the floated element, or give it position: absolute; left: 0; right: 0; to force centreing across the page.
Change:
Page: [0]
To (wrap it in a div with pager class):
<div class="pager">Page: [0]</div>
Change this in your CSS:
.postbox, .pager{
text-align: left;
margin: auto;
width: 50%;
margin-top: 10px;
}
.postbox {
background-color: #dbfef8;
border: 1px solid #82FFCD;
}
.pager {
text-align: center;
}
The reason this is happening is because your float is pushing over your content. You pager is coming straight off the body tag. In general, it's best to wrap plain text inside an html element.
You may want to revisit the structure of your page. Create a left column and a center column div or something like that.