I want to generate a PDF from an specified view respecting my actual CSS.
<html>
<head>
<meta charset="utf-8" />
<style>
.justify {
text-align: justify;
text-rendering: geometricPrecision;
}
.center {
text-align: center;
}
body {
font-size: 15px;
white-space: normal;
line-height: 110%;
text-rendering: geometricPrecision;
}
.rightheader {
font-size: 12px;
}
.bigger{
font-size:18px;
}
</style>
<link href="~/Content/uikit.css" rel="stylesheet" />
<link href="~/Content/CartaSates.css" rel="stylesheet" />
<title>
</title>
</head>
<body style="padding:10px;">
<div class="uk-grid" style="margin-top:10px;margin-left:0px !important;">
<div class="uk-width-2-3" style="padding-left:0px;padding-top:0px;">
<img src="~/src/img/logo.png" style="width:200px" />
</div>
<div class="uk-width-1-3 justify" style="padding-left:0px;padding-top:0px;">
<div class="uk-grid">
<div class="uk-width-1-4 justify rightheader" style="padding-left:0px;padding-top:0px;text-align:right">
<strong>Section:</strong><br />
<strong>Office:</strong><br />
<strong>Case:</strong>
</div>
<div class="uk-width-3-4 justify rightheader" style="padding-left:15px;padding-top:0px;">
<span><strong>Foreign Trade Directorate</strong></span><br />
<span><strong>SATES-DCE-UV-2887/2019</strong></span><br />
<span>Request for verification of request.</span>
</div>
</div>
</div>
</div>
</body>
</html>
I already have the my HTML with CSS and it´s showed as intended, logo to the left, and text separated in two minnor divs to the right, but when the PDF is generated, it separate my divs in diferent rows.
Related
Text with font-size: 1rem bigger then it should be:
The problem reproduces only with all of this conditions:
ios
horizontal orientation
some text outside of span tag
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.t5 { font-size: 0.5rem;}
.t6 { font-size: 0.6rem;}
.t7 { font-size: 0.7rem;}
.t8 { font-size: 0.8rem;}
.t9 { font-size: 0.9rem;}
.t10 { font-size: 1.0rem;}
.t11 { font-size: 1.1rem;}
.t12 { font-size: 1.2rem;}
.t13 { font-size: 1.3rem;}
.t14 { font-size: 1.4rem;}
.t15 { font-size: 1.5rem;}
</style>
</head>
<body>
Some text<br />
<span class="t5">Test text 0.5</span><br />
<span class="t6">Test text 0.6</span><br />
<span class="t7">Test text 0.7</span><br />
<span class="t8">Test text 0.8</span><br />
<span class="t9">Test text 0.9</span><br />
<span class="t10">Test text 1.0</span><br />
<span class="t11">Test text 1.1</span><br />
<span class="t12">Test text 1.2</span><br />
<span class="t13">Test text 1.3</span><br />
<span class="t14">Test text 1.4</span><br />
<span class="t15">Test text 1.5</span><br />
</body>
</html>
You might be having this issue where iOS scaling the font to readable size. Refer to this answer where you need to set -webkit-text-size-adjust: none;
Body properties such as different font works but div tag properties like in #mainpic or #header just don't work
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
#mainpic {
<img src="../image/cutmypic.png";
alt="image not found";
/>background-position: "centre";
position: absolute;
bottom: 0;
center: 0;
}
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“ content”>/div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
Okay first up: use classes not IDs. Good css never has any ids in it (except for some very very specific cases)
Secondly, you got html in your css, so that does not work.
Thirdly, you cannot nest css selectors. Instead of
.wrapper {
/* some css */
.element {
/* some css */
}
}
you have to write
.wrapper {
/* wrapper css */
}
.wrapper .element {
/* element css */
}
Close all brackets properly in the CSS code, move the img tag from the CSS to the HTML code and don't use invalid properties or values ("centre", "center") in your CSS.
Also, you are using lots of typographical quotes in your codes. You have to replace all these with regular quotes - it won't work otherwise.
body {
font-family: Calibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"><img src="../image/cutmypic.png" ; alt="image not found" ; /></div>
<div id=“ content”></div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
/*center:0;*/
}
#header {
color: white;
}
<body background="image/bg.jpg">
<div id=“container”>
<div id=“header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“content”></div>
<div id=“navigation”> a link to the other web page</div>
<div id=“footer”> contains your name and student number</div>
</div>
</body>
The 1st your problem is that you have several typos.
For example, <div id = “content”>/div>.
The 2nd problem is that you can not use HTML tag in CSS.
The 3rd problem is that there is no syntax center in CSS.
And when you use background-position, you don't need to use " " , and you should write center NOT centre.
I am a beginner to HTML and CSS. i have some knowledge of javascript, not jquery and also responsive design.
So I want to make a 3 column grid aligned to center and each with 33.33% width. Also a little space between each horizontally and some space on either side. but i can seem to align it to the center.
here is my html. I also want it to be Responsive. It should be reduced to two columns then to one and stuff like that. How could i achieve this?
Here is my HTML
<!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>
<link rel="stylesheet" href="Home.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="layout" align="center">
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.success {
display:inline-block;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center
}
.success li:last-child {
float: none;
width: auto;
}
.layout {
width:75%;
}
You need to start again.
Basically your html structure needs to reflect your 3 column layout. Usually this is achieved with <div> tags.
so something like:
<div id="content">
<div id="contentleft">
your first column content is here
</div>
<div id="contentcenter">
the stuff for the middle goes here
</div>
<div id="contentright">
etc. etc. etc.<br>
...
</div>
</div>
then your .css can do something along the following lines:
#content {
width: 900px;
}
#contentLeft {
width:33%;
float:left;
}
#contentcenter {
width:33%;
padding:1%;
float:left;
}
#contentright {
width: 33%;
float:right;
}
I am trying to get 3 icons horizontally aligned with the title of my website. I can't seem to get them within the same margin as my banner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
CrossFit Villains
</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<header>
<span class="title">
CrossFit Villains
</span>
<div id="social">
<img src="fb.png" />
<img src="bird.png" />
<img src="tv.png" />
</div>
<br />
<span>1702 McAra Street, Regina, SK</span>
<br />
<br />
</header>
<div id="banner">
<img src ="banner.jpg" />
</div>
The CSS for the icons:
#social img {
float: right;
width: 70px;
height: 70px;
}
Allright,
First of all be sure to float the a elements instead of the img.
The title should be floated as well, to lign them up correctly.
Also give classes to the other span element in your header so you can apply styles to it. Using <br /> for a new line between elements in HTML is wrong practice.
span.title {
float:left;
}
#social {
float:right;
}
#social a {
float:left;
margin-right:2px; /* just for the spacing of the elements in example */
}
span.address { /* Added this class to the span in the HTML for styling */
float:left;
}
div#banner {
clear:both; /* to replace the <br /> tag */
}
Please see the edited fiddle.
Note: The images weren't linked properly, so I gave the "icons" a red background and your body a black one for readability..
Cheers, Jeroen
Hey guys I want my two #previews to float side by side. I have tried adding float:left but it doesn't work. At the moment they are just sitting on top of each other. All my code is below, thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg" /></div>
<div id="previews"><img src="preview.jpg" /></div>
</div>
</body>
</html>
Float them both to the left and it will work. You'll also need to clear them then.
A few things:
a) DIVs are block-level. You would need to define them as display:inline; for float to work.
b) You should be using class instead of ID. An ID is supposed to appear once on a page only. Classes can appear as many times as you wish.
That's all:
<div id="previews">
<img src="preview.jpg" style="float:left;" />
<img src="preview.jpg" style="float:left;" />
</div>
You can also use this:
#previews img {
float:left;
}
<div id="previews">
<img src="preview.jpg" />
<img src="preview.jpg" />
</div>
<html lang="en"><head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg"></div>
<div id="previews"><img src="preview.jpg"></div>
</div>
</body></html>
You simply add display:inline-block; vertical-align:top; under the CSS for #previews. You will also need to reduce the amount of horizontal margin used for #previews because the width of the container is only 1300px.