I'm trying to print a business card using HTML and CSS. The user will be able to print using his browser.
When I print in an A4 format there's no problem. When I print it on card paper (cr80 3in by 2in) nothing printed.
What can I do to make it work?
screenshot of the print preview
this is a preview of the print. The frame will hold a qr code and a label.
The code follows. The image src will load with ajax later.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(function(){
function printMe() {
window.print()
}
$("#badge").click(function(){
printMe();
});
});
</script>
<title>Badge</title>
<style type="text/css">
#media print {
.page-break { display: block; page-break-before: always; }
}
*{
margin:0px;
padding:0px;
}
#details{
position:relative;
top:0.8in;
height: 1.1in;
width:100%;
overflow:hidden;
}
#badge{
width:3in;
height:2in;
border:1px solid gray;
//background-image:url("badge-background.png");
}
#qr_code {
margin-top:2px;
float:left;
height:1.1in;
width: 1.1in;
}
#text{
float:right;
margin:0 auto;
width:180px;
}
#first_name{
position:relative;
top:0.3in;
font-size:0.4in;
}
</style>
</head>
<body>
<div id="badge" class="page-break">
<div id="details">
<div id="qr_code"><img src="" id="qr_code_image" width="105" heigth="105"/></div>
<div id="text"><span id="first_name"></span></div>
</div>
</div>
</body>
</html>
Related
I have the following code
CSS
.photo_types {
position:relative;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:gray;
text-align:left;
font-weight:bold;
margin:0% auto;
}
HTML
<div id="photo_types" class="photo_types">
<img src="images/ystone_burnt_tree.jpg" />
That code above is loaded via Javascript in the code below
CSS
.mySelfStyle {
position:absolute;
top:3.5%;
left:1%;
width:80%;
height:90%;
background-color:black;
text-align:center;
}
.photogMainStyle {
position:absolute;
top:3.5%;
left:1%;
width:80%;
height:90%;
background-color:black;
}
HTML
<div id="myself_panel">
<img id="myself_panel_img" src='images/ystone_burnt_tree.jpg' />
<p style="color:white;"> The Most Beautiful Place I have been To </p>
</div>
<div id="photo_panel">
</div>
JS
function showMyPhotography() {
itemObj = document.getElementById('myself_panel');
itemObj.className = 'hiderStyle';
itemObj = document.getElementById('photo_panel');
itemObj.className='photogMainStyle';
/*
itemObj.load("photo_panel.html");
*/
itemObj.innerHTML='<object type="text/html" data="photo_panel.html"> </object>';
}
The problem I am having is that the photo_panel.html which is loaded does not use all of the space in the div photo_panel. It only uses the space partially.
You need to set the height and width of the object tag you are adding
#photo_panel object
{
height:100%;
width:100%;
}
Plunker Sample
Thanks for your responses everyone. The following solved my problem.
.hiderStyle
{
clear : both;
display : none;
}
Earlier I did not have "clear:both" in my hiderStyle and I changed the function as follows
function showMyPhotography()
{
/*
itemObj = document.getElementById('myself_panel');
itemObj.className = 'hiderStyle';
itemObj = document.getElementById('photo_panel');
itemObj.className='photogMainStyle';
itemObj.load("photo_panel.html");
itemObj.innerHTML='<object type="text/html" data="photo_panel.html" style="width:100%; heig
*/
$("#myself_panel").className = 'hiderStyle';
$("#myself_panel").load("photo_panel.html");
}
I also had a similar problem. I was using <object> instead of using jquery. The following approach solved my problem.
html
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Untitled-7.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="load_page()">
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
</body>
</html>
<script>
function load_page()
{
document.getElementById("d1").innerHTML='<object type="text/html" data="page1.html" ></object>';
document.getElementById("d2").innerHTML='<object type="text/html" data="page2.html" ></object>';
document.getElementById("d3").innerHTML='<object type="text/html" data="page3.html" ></object>';
}
</script>
css
html,body
{
height:100%;
width:100%;
}
div
{
height:100vh;
width:100vw;
}
div object
{
height:100vh;
width:100vw;
}
Hope this helps :)
My layout currently breaks on 320px resolution (.info drops below .icon and breaks the layout) and I'm lost as to how about preventing it from breaking.
The .num info(number) is being loaded dynamically, and could be anything from 0 - 2147483647. If the screen resolution is not wide enough to show the .num and the .unread on one line, instead of breaking, I would like the .unread to drop down to the next line (display:block applied to it?). I tried to think of a way to use only css, then though I could use js to apply class if more than 2 digits are present, but this direction still doesn't seem right if the resolution is wider and could show more digits. E.G - 1000px could show many more digits... I would want it to stay on one line in this case.
My code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
display:block;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left: 15px;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:10px 0;
}
.num {
font-weight:bold;
font-size:20px;
}
.unread {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">23</a>
<span class="unread">Unchecked Voicemails to Date</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/18Mids4M3SupNwOT8ocP?p=preview
I figured it out. I needed to add a width to the .info container and make the elements inside of .info p display:inline-block.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left:15px;
width:60%;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:5px 0 15px;
}
.info span {
display:inline-block;
}
.num {
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">2</a>
<span class="unread">Unopened Voicemails</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/NanIRaMcK9AJvpNEQG3Z?p=preview
I'm trying to align the tab divs horizontally, but It doesn't work and I can't find my fault?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Employees</title>
<link rel="stylesheet" href="/calc/stylesheets/style.css">
</head>
<body>
<div class="tabs">
<div class="tab">Home</div>
<div class="tab">Add Expenses</div>
<div class="tab">Tags</div>
<div class="tab">Overview </div>
</div>
</body>
</html>
style.css:
#tabs {
overflow: hidden;
}
#tab {
float: left;
}
You've mixed up classes and ID's. Modify your css to this:
.tabs {
overflow: hidden;
}
.tab {
float: left;
}
#tab should be .tab, according to your HTML
You have to float your class .tab instead of an id. Also, when you float elements you need to clear at one point. Like this:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Employees</title>
<link rel="stylesheet" href="/calc/stylesheets/style.css">
</head>
<body>
<div class="tabs">
<div class="tab">Home</div>
<div class="tab">Add Expenses</div>
<div class="tab">Tags</div>
<div class="tab">Overview </div>
<div class="clear"></div>
</div>
</body>
</html>
CSS
#tabs {
overflow: hidden;
}
.tab {
float: left;
}
.clear {
clear: both;
}
Fiddle: http://jsfiddle.net/hM62P/
You are using #tabs and #tab, which is not at all available in your HTML. # refers to ID. You need to use .tabs and .tab which refers to a class.
.tabs{
width:100%;
border:1px solid red;
}
.tab{
float:left;
}
Demo Link
Use this CSS,
.tabs {
width:100%;
}
.tab {
width:25%;
float:left;
}
The problem is that you are using #tab instead of .tab. Here id is not used. # is for id
When we normally zoom in or zoom out a webpage (by pressing Ctrl + or Ctrl -) the entire page components remain together like the following screenshot of this page
But when I zoom my webpage instead of zooming to a specific area ,the components get distorted
Here is my html
<!doctype html>
<html>
<head>
<title>Are you ready for the show?</title>
<link rel="stylesheet" href="css/global.css"/>
</head>
<body>
<div id="header">
<a href="home.php">
<img src="../images/logo.png"></img>
<span id="logo_name">Dooms Day</span>
</a>
<span id="login">
LogIn
</span>
</div>
</dody>
</html>
and the css
*
{
margin:0;
padding:0;
}
body
{
font-family:Palatino,Georgio,"Times New Roman",Times,serif;
}
#header
{
position: relative;
width:100%;
background: none repeat scroll 0% 0% rgb(50,51,47);
height:80px;
}
#header a
{
text-decoration: none;
color:white;
}
#logo_name
{
font-size:25px;
}
#header img
{
padding-top:12px;
margin-left:10%;
}
#login
{
width:auto;
height:auto;
font-size:20px;
padding:8px 20px 8px 20px;
background-color: rgb(100,192,0);
margin-left: 60%;
border-radius: 10px
}
What should I do to achieve this effect as its necessary for symmetry?
I have a nav bar. When the user makes their screen bigger I want my font size to auto adjust. I tried it with: li { font-size: 1.2vw; } It works if the page is refreshed after adjusting the screen. What would be the code for an auto update? I want my text to constantly change its size based on the window width.
<!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>Power</title>
<style type="text/css">
#page {
position:inherit;
display:block;
width:60%;
margin:auto;
min-width:1000px;
z-index:0;
}
#pageImg {
position:absolute;
width:60%;
min-width:1000px;
z-index:1;
}
#media (min-width: 1000px) {
#navBarImg {
top: 5vw;
}
#navBarLogoImg {
top: 5vw;
}
#navMenuPart1 {
top: 5vw;
left:60%;
}
}
#navBarImg {
position:absolute;
width:60%;
min-width:1000px;
top:50px;
z-index:2;
}
#navBarLogoImg {
position:absolute;
width:11.75%;
min-width:190px;
top:50px;
z-index:3;
}
#navMenuPart1{
position:absolute;
width:100%;
min-width:1000px;
left:20px;
top:50px;
z-index:3;
color: #FFFFFF;
}
li { font-size: 1.2vw; }
ul{ white-space: nowrap; }
.navMenuItems ul { list-style:none; text-align:center; padding:10px 0; }
.navMenuItems ul li { display:inline; padding:15px; letter-spacing:2px; }
.navMenuItems ul li a { text-decoration:none; color:#3a3a3a; }
.navMenuItems ul li a:hover {color:#F19433;}
</style>
</head>
<body>
<div id="page">
<img id="pageImg" src="../Navigation/backgroundImg.png" />
<div id="navBar">
<img id="navBarImg" src="../Navigation/navBarBGImg.png" />
<img id="navBarLogoImg" src="../Navigation/navLogoImg.png" />
</div>
<div id='navMenuPart1' class="navMenuItems">
<ul>
<li><a href='#'><span>Research</span></a></li>
<li><a href='#'><span>Team</span></a></li>
<li><a href='#'><span>News</span></a></li>
<li><a href='#'><span>Courses</span></a></li>
<li><a href='#'><span>Outreach</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
causeRepaintsOn = $("li");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
</script>
<header></header>
</div>
</body>
</html>
EDIT:
Here is a FIDDLE - you can resize the page and see that it is working.
See this css-tricks article:
This is a webkit bug (Chrome,Safari) and it doesn't occur on IE10+ and FF 19+
In that article the author gives a Jquery solution for webkit browsers:
To fix this issue (allow resizing without page refresh) you need to
cause a "repaint" on the element. I used jQuery and just fiddled with
each elements (irrelevant, in this case) z-index value, which triggers
the repaint.
causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
So your page will look something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
causeRepaintsOn = $("li");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
</script>
<header></header>
... etc etc..
</body>
</html>
Use,
font-size:1em;
or
font-size:100%; // based on body default declaration
If you have a css like this:
#body #mytext {
font-size: 50%;
}
you can dynamically resize in jQuery like this:
$(window).resize(function(){
$('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});