I am having issues getting a background image to work using your conversion api.
Eg of the template file styling:
<meta charset="utf-8" />
<link href="https://use.typekit.net/mmg2zqw.css" rel="stylesheet" />
<style>
body, p, li, td, th, dt, dd { font-family: arboria, sans-serif, arial, helvetica; font-weight: 300; font-style: normal; font-size:20px; color:#333; }
body { background: url(/templates/backgrounds/certificate-background.png) no-repeat; }
img { border:none; display:block; }
p { margin-top:0; font-size: 20px;}
span { margin-top:0; font-size: 24px; color: #78BE21;}
h1, h2, h3, h4, h5 { font-family: arboria, sans-serif, arial, helvetica; font-weight: 300; font-style: normal; color:#555; }
h1 { font-size:68px; margin-top:10px; margin-bottom: 20px; }
h2 { font-size:52px; margin-top:5px; margin-bottom: 10px; color: #78BE21; }
h3 { font-size:30px; margin-top:5px; margin-bottom: 5px; }
h4 { font-size:18px; margin-top:5px; margin-bottom: 0; }
h5 { font-size:14px; margin-top:5px; margin-bottom: 0; }
Do I need to add a parameter to the api call to allow the image to work?
You are thinkting to put a minimum height to see a possible change ? Beacause if your tag contains nothing, so your background will not be visible.
Try this on your body :
body {
background-image: url('/templates/backgrounds/certificate-background.png') no-repeat;
width: 100%
min-heigth: 500px;
}
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I've noticed something quite strange, I can't seem to get h1 and button html elements aligned.
I've removed borders and paddings however there still seems to be a consistent misalignment. I am unsure what is happening, can someone please explain why this behavior is occurring? I have attached a picture of the end result:
<head>
<style>
button {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: text-top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
</head>
<body>
<div>
<h1>Head</h1>
<button>Head</button>
</div>
</body>
Use verticle-align: top; instead of verticle-align: text-top; because verticle-align: text-top; effect only text. And there is a default border-width: 2px; to button so remove if you don't need.
button {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
<div>
<h1>Head</h1>
<button>Head</button>
</div>
if you wanna h1 tag and button together then here is your solve....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
margin-top:-4px;
margin-left: -4px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
vertical-align: text-top;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin:0px;
padding:0px;
display:inline-block;
height:30px;
width:100px;
background:lightblue;
font-family: Arial;
font-size:20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
</head>
<body>
<div>
<h1>Head</h1>
<button>Head</button>
</div>
</body>
</html>
Use this code it will be fine
button {
margin-top: 1px;
padding: 0px;
display: inline-block;
height: 30px;
width: 100px;
background: lightblue;
vertical-align: top;
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
}
h1 {
margin: 0px;
margin-top: 2px;
margin-left: 4px;
margin-bottom: 3px;
padding-top: 3px;
padding-left: 23px;
display: inline-block;
height: 24px;
width: 70px;
background: lightblue;
font-family: Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
}
div {
background:red;
}
</style>
So i am currently in the process of creating an EPUB e-book, it is near ready to be labeled complete, but i have an issue with ADE based readers(tested on BlueFire reader), where the text refuses to justify and aligns left instead(however center alignment works fine)
I have cleaned the css, and checked and rechecked the properties and i see no conflicting alignments in the CSS
I have tried Prestigio E-reader on android as well as kindlepreview on PC and both of those displayed fine
There is no enforced text alignment on Bluefire itself
Anyone got any sugestions?
CSS in question:
#font-face {
font-family:"Calibri";
font-style:normal;
font-weight:normal;
src : url("../Fonts/Calibri.TTF");
}
#font-face {
font-family:"Minion Pro";
font-style:normal;
font-weight:normal;
src : url("../Fonts/MinionPro-Regular.otf");
}
#font-face {
font-family:"Calibri";
font-style:italic;
font-weight:bold;
src : url("../Fonts/Calibri-BoldItalic.TTF");
}
#font-face {
font-family:"Calibri";
font-style:oblique;
font-weight:bold;
src : url("../Fonts/Calibri-BoldItalic.TTF");
}
#font-face {
font-family:"Calibri";
font-style:normal;
font-weight:bold;
src : url("../Fonts/Calibri-Bold.TTF");
}
#font-face {
font-family:"Calibri";
font-style:italic;
font-weight:normal;
src : url("../Fonts/Calibri-Italic.TTF");
}
#font-face {
font-family:"Calibri";
font-style:oblique;
font-weight:normal;
src : url("../Fonts/Calibri-Italic.TTF");
}
td, th {
border-style: solid;
border-width: 1px;
padding: 0.2em;
}
li {
display:block;
text-align: justify;
}
table {
border: 1px solid black;
border-collapse: collapse;
max-width: 80%;
margin: auto;
}
span.bold {
font-family:"Calibri", sans-serif;
font-style:normal;
font-weight:bold; !important
}
span.char-style-override-4 {
font-family:"Calibri", sans-serif;
font-style:italic;
}
span.char-style-override-14 {
text-decoration: underline;
}
/* _______________________________Pamats_________________________ */
body {
font-family : "Calibri", serif;
margin-left:3% ;
margin-right:3% ;
margin-top:5% ;
margin-bottom:3% ;
-epub-hyphens:auto;
-webkit-hyphens:auto;
}
#page {
margin :10pt;
}
h1 {
text-align: left;
font-size: 1.0em;
font-weight: normal;
}
/* ______________________________________paragrāfi___________________ */
p.Normal {
font-family:"Calibri";
font-size:1em;
font-style:normal;
font-weight:normal;
text-decoration : none;
font-variant : normal;
line-height : 1.25;
color : #000000;
text-indent : 1em;
margin : 0px;
page-break-after: avoid;
text-align: justify; !important
}
p.centrs {
text-align: center;
}
span.italic {
font-style:italic;
font-weight:normal;
}
span.bi {
font-style:italic;
font-weight:bold;
}
div.vestule p.Normal {
text-indent: 2em;
margin-left: 1em;
}
ul p.Normal {
text-indent: 0;
}
a {
color:#000000;
}
h2{
text-align: left;
font-size: 1em;
font-weight: normal;
}
image{
max-width:100%;
height:auto;
}
img{
max-width:100%;
height:auto;
}
The issue was, there were parse errors, i had placed !important after ";", issue is now resolved!
i write this code to print html page in paper copy using paper 80mm but this code not working correctly i need to a few help to correct it
#media print {
div.invoice{
background: #FFFFFF;
width:40%;
margin-left:30%;
margin-top: 0px
}
div.invoice div{
background: #FFFFFF;
color: black;
margin-left: 1%;
}
div.invoice h2{
font-size: 14px;
}
div.invoice h3{
font-size: 13px;
}
div.invoice h4{
font-size: 12px;
}
div.invoice div h2, div.invoice div h3, div.invoice div h4{
color: black;
line-height:0.8em;
margin-top:1px;
-webkit-margin-before: 0.8em;
-webkit-margin-after: 0.8em;
}
h1, h2, h3, h4{
-webkit-margin-before: 0.4em;
-webkit-margin-after: 0.4em;
}
}
Please follow below steps:
Step 1 : Add media="print" to your stylesheet link or example :
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="print" >
step 2 : Then follow below media query.
#media print
{
body { margin: 0; background-image: none; font-size: 12pt; }
}
Just wondering how to get rid of the unnecessary looking spaces
in my heading. I want my header to look similar to the capture 2 (2nd picture) but there are unnecessary spaces that I can't seem to get rid of. I ran it through jsfiddle:
http://jsfiddle.net/yT6h6/ and I can still see the spaces even though I don't think there was anything wrong with the code. Please take a look at this and greatly appreciated if you can help me.
HTML Code:
<div class="content">
<div class="heading"><b style="font-size:14px; font-family:'Arial', Gadget, sans-serif"><b style="font-size:9px;">Home \\ Current Students \\</b>
</b>
<br />FBE Degrees & Electives
<br>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
CSS Code:
.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
try this one remove line-height and add display:block
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
display:block;
color: #336666;
}
I think you firstly need to seriously tidy up that HTML and use some more natural elements. The heading should be a H of some level, probably h1. The paragraph tags make more sense for the text. Everything will be far cleaner and easier to solve if you do this. Here's my suggestion that changes the HTML and fixes your margin issues.
HTML
<div class="content">
<div class="heading">
<p class="crumbs">Home \\ Current Students \\</p>
<h1>FBE Degrees & Electives</h1>
<p class="subheading">FBE Degrees & Other Courses for FBE students including Elective courses</p>
</div>
</div>
CSS
p {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #336666;
}
a {
color:#fff;
text-decoration:none;
}
.heading {
background:#333333;
padding:20px;
}
.heading p {
margin:0;
padding:0;
line-height:10px;
}
h1 {
margin:0;
margin-bottom:5px;
font-family:"Courier New", Courier, monospace;
font-size:28px;
line-height:36px;
color:#DBDBDB;
}
Fiddle here:
http://jsfiddle.net/yT6h6/6/
It can be simplified more actually (I left some of your classes in there even though they aren't used), but this is at least a lot neater to work with.
Hey i've tried your code see at: http://jsbin.com/awonek/1/edit
Looks fine to me.
could code try
div#heading{
margin-bottom:-20px;
}
what browsers have you tried it in?
Added some changes: See http://jsbin.com/uvurev/1/edit
<div class="content">
<div class="heading">
Home \\ Current Students \\
<h2 class="M_logo_text">FBE Degrees & Electives</h2>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
</div>
CSS
div.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5{
font-size:9px; font-family:'Arial', Gadget, sans-serif
margin-right: -2px;
text-decoration: none;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
/*
added style
*/
b.type1{
font-size:9px; font-family:'Arial', Gadget, sans-serif
}
h2.M_logo_text{
font-size: 20px;
margin:0px;
}
I have a site using 2 css : one global, one page specific.
By default, I want to set a font type and size for everything, and adjust it depending on my needs on some pages.
So I have :
global.css
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
p {
text-align:justify;
margin:0px;
margin-bottom:10px;
}
a:link {
color: #993300;
text-decoration: none;
}
a:visited {
color:#993300;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline overline;
}
news.css
div.news{
width: 100%;
}
.news p.reminder {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #848484;
margin:0px;
margin-bottom:20px;
text-align: center;
position: relative;
top: -10px;
text-transform: uppercase;
}
.news p.reminder a:link, .news p.reminder a:visited {
color: #848484;
}
.news p.reminder a:hover {
}
HTML file
<HTML>
<HEAD>
<TITLE>the title</TITLE>
<LINK href="global.css" rel="stylesheet" type="text/css">
<LINK href="news.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV class="news">
<P class="reminder">
some text
</P>
</DIV>
</BODY>
</HTML>
For a reason I don't see, the part :
.news p.reminder {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
is not taken into account.
If I remove the * definition from the global.css, it's OK. But if I keep it, that part does not override it.
How may I do to make this work ?
The reason you don't see it is because, while the paragraph does take on the styles you want, the * selector matches <A href="some_url"> and promptly changes them back.
You could modify the selector to match the a element too, but I'd set the font styling on the body instead of *