I am currently trying to convert HTML to PDF using itext7 and itext7.pdfhtml but have a small problem.
I have a fixed footer (.footer) which works well when opened with a browser but when converted using below code, the div is not fixed to the bottom of the page. The div sits just after the other div content before it.
C# .net core code
string fullBody = System.IO.File.ReadAllText("index.html");
var stream = new MemoryStream();
var writer = new iText.Kernel.Pdf.PdfWriter(stream);
writer.SetCloseStream(false);
iText.Html2pdf.HtmlConverter.ConvertToPdf(fullBody , writer);
writer.Close();
stream.Seek(0, SeekOrigin.Begin);
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="header">
<img src="header1.bmp" width="100%" />
<img src="header2.bmp" width="100%"/>
</div>
...
<div class="footer">
Fixed footer
</div>
</body>
</html>
CSS
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
Have tried several other examples but it still won't stay at the bottom.
Even this similar question Similar question doesnt work
Any help would be greatly appreciated.
In PDF
In browser (print view)
Just a small note - this pdf will only have 1 page so a hard coded solution might be considered.
The footers belong to the page margin area. #page media is the right way to configure it. CSS running element functionality can be used to put the element into the desired location and exclude it from the rest of the layout. Major tools converting HTML into page-based representation support it.
Here is a sample HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#footer {
position: running(footer);
}
#page {
#bottom-center {
content: element(footer);
}
}
</style>
</head>
<body>
<p>Hello world</p>
<div id="footer">I am a footer</div>
</body>
</html>
Result looks like this:
Related
I have this HTML file whןch suppose to duplicate
an image and put it right next to the original.
so you get the same image twice, sort of connected
it does'nt work for some reason:
duplicate
<html>
<body>
<img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"><img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</body>
</html>
thank you
I was expecting an image to duplicate
but it does not work
It does work. As Victor Svensson mentioned the comments, one way you could fix this is by setting a max width for the images.
img {
max-width: 50%;
}
<html>
<body>
<img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"><img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</body>
</html>
My answer can be a bit unrelated to your case, but still, it works as you described.
Add a CSS rule float: left which puts all the elements just right next to each other. The image you're using is too big, so you might consider specifying the width of the photo by adding one more rule called width: and the value you need.
You can add those rules in three ways: by adding them in the style attribute
<img style="float: left; width: 480px;" src="...">
or by creating a <style> tag in your HTML code
<html>
<head>
<style>
.my-imgs {
float: left;
width: 480px;
}
</style>
</head>
<body>
<img class="my-imgs" src="...">
</body>
</html>
or by creating a CSS-file, linking it to your HTML
Your HTML file:
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<img class="my-imgs" src="...">
</body>
</html>
Your CSS file (styles.css in this case, placed in the same folder as your html file)
.my-imgs {
float: left;
width: 480px;
}
I am embedding base64 images in my web page projects and I want to keep it all organized but the base64 takes up large sections of the markup making it hard to read and debug.
Is there a way to separate base64 strings to another location on the page?
<html>
<head>
</head>
<body>
<!-- markup here -->
<!-- markup here -->
<!-- markup here -->
</body>
</html>
Is there a way to organize the base64 string all together at the beginning of the body tag or at the end?
Update
There are examples of moving the image data to CSS as a background image and then assigning the class. That might work for some cases but not for cases where an image behavior is expected.
If you are using CSS and want to keep the code organised you can place the data image url in css and call it using div in the body. check the example code
<!DOCTYPE html>
<html>
<head>
<style>
#someclass {
/* single gray pixel - repeated */
background-image:
url('data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
background-repeat: repeat;
background-position: left top;
position: absolute;
left: 30px;
top: 68px;
}
</style>
</head>
<body>
<div id="someclass">sssssss....</div>
</body>
</html>
Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.
When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.
i was going through this tutorial, to allign two images inside a dive vertically so that there is no space between them, please take a look
http://mynag.kopiblog.com/2012/11/28/solved-remove-space-below-an-image-in-div-when-vertically-align/
i wrote my code like this
<head>
<style type=”text/css”>
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class=”imgclass”>
<img src=”pictop.jpg”>
</div>
<div>
<img src=”picbottom.jpg”>
</div>
</body>
</html>
but it didnt workrd as shown in the second pic shown in the link i specified.
What am i doing wrong here.
i want them as two pics alined vertically without any space.
please help
Please replace your quotes with the right ones, “ is not ".
The code is missing doctype and opening html-tag.
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class="imgclass">
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
<div>
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
</body>
</html>
Your result should look like this:
http://pbrd.co/1qt52ku
Tested in Chrome. Other browser may need fixes via line-height, margin, and padding.