I create simple page which I want to print from a browser.
I put all whistles I was able to find to center my title and picture.
<html>
<head>
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<!-- print.css is empty -->
</head>
<body style="text-align: center; margin: 0 auto;">
<div>
<div style="font-size:48pt">
Pretty Long-Long-Long Title
</div>
<img src="content/images/sample.jpg" style="width:80%"/>
</div>
</body>
</html>
The page looks fine and centered in all browsers.
The page is printed fine (centered) in IE and Firefox, but in Chrome the whole body box is left-justified and much smaller than page width.
Is there any whistels that would help to print centered title/image from Chrome?
Problem solved.
The problem was in Chrome itself. To be more exact, in Print Preview which uses Chrome PDF Writer plug-in. Looks like the Chrome PDF Writer does not recognize page size and does not have any Page Setup settings. I disabled Chrome's Print Preview, installed Adobe's PDF Printer, and everything prints OK with my original code fragment.
try this
<body>
<div align="center" style="text-align:center;">
<div style="font-size:48pt">
Pretty Long-Long-Long Title
</div>
<img src="content/images/sample.jpg" style="width:80%"/>
</div>
</body>
either
<div align="center" style="text-align:center;">
or
<div style="text-align:center;margin:0 auto;">
worked for me in chrome, printed to a pdf
Related
I have a receipt generated as an image, which was printed inside html document (below i'll put an example).
So when I print it in firefox everything works fine, but for chrome text cut off.
Everything is the same except the browser.
<html>
<body style="margin:0">
<div>
<img style="max-width: 100%;" data-address="https://dev-receiptapi.microbizcloud.com/receipt_print_request/1582?access_token=2a717113eb2f21b06bdc99e15355beabf7f98b53" src="https://dev-receiptapi.microbizcloud.com/receipt_print_request/1582?access_token=2a717113eb2f21b06bdc99e15355beabf7f98b53">
</div>
</body>
</html>
Alternativly add small margin to the body, like:
<body style="margin:5px">
I just launched a very simple site with 5 images. 4 of the images do not show up regardless of the path in the img tag. The 5th image always shows up regardless of the path in the img tag.
I have tried "images/imagename.jpg", "/images.imagename.jpg", "../images.imagename.jpg".
I have tried putting images in root and using src="imagename.jpg".
The images that don't show up have this warning in the console:
Here is the current code:
http://avalynncirce.com/perduco
<!DOCTYPE html>
<html>
<head>
<style>
img {max-height: 100vh;}
</style>
</head>
<body>
<div style="width:20%; float:left; position: fixed;">
<nav>
<ul>
<li>Workflow v1 Scatterplot</li>
<li>Workflow v1 Menu</li>
<li>Workflow v2 Scatterplot</li>
<li>Collaboration Tool: Sketch (MAC and Online)</li>
<li>Collaboration Tool Tool: Figma (Windows)</li>
</ul>
</nav>
</div>
<div style="width:75%; float:right;">
<section id="sv1">
<hr style="margin: 50px;">
<img src="/images/scatterplotv1.png">
</section>
<section id="mv1">
<hr style="margin: 50px;">
<img src="../images/menuv1.png">
</section>
<section id="sv2">
<hr style="margin: 50px;">
<img src="../images/perduco.png">
</section>
<section id="mt">
<hr style="margin: 50px;">
<img src="../images/perduco-sketch.png">
</section>
<section id="mt2">
<hr style="margin: 50px;">
<img src="../images/figma.png">
</section>
</div>
</body>
</html>
Keep Your Folder look like this. and try below HTML for Image.
<img src="images/logo.png" alt="logo"/>
"../images/imagename.jpg" will look for it in your root folder (or one folder up from "/images").
I always use "./images/imagename.jpg" and it always works.
Your browser might be caching images incorrectly. Try opening developer tools (if using chrome) choosing the network tab and disabling cache when dev tools are open.
Otherwise, check your console in dev tools for possible errors as to why they aren't showing.
This has never occurred before and I'm not sure why it occurred this time, but the image files in question were set to private. I use Filezilla for uploading files. A right-click on the server image brought up a menu where I could change the privacy settings.
I need to create a little html code that I will use in sharepoint in script editor. The idea is that I have some report from Microsoft BI in iframe (changed the address in code below) and it works fine. But I want to cover the "share buttons" in the bottom right of the site, so it can't be shared. The iframe should fill the whole WebPart in sharepoint, so I tried to allign the image simply to bottom right corner, but it doesn't seem to work. Any ideas?
<html>
<head>
</head>
<body>
<iframe src="https://www.google.pl/?gfe_rd=cr&ei=x5UEWO-yGaOh8welvY2IAQ" width="100%" height="700">
</iframe>
<img src="logo.jpg" align="bottom" align="right">
</body>
</html>
Ok, I've finally got it working. The "TOP" variable is static, it's the height of the displayed website minus the height of the image itself. Here is the code:
<html>
<head>
</head>
<body>
<div style="height:750px; position:relative">
<iframe style="border:none; width:100%; height:700px; z-index:1" src="website.com"></iframe>
<img style="top:663px; right:0px; position:absolute; z-index:9" src="testbar2.jpg">
</div>
</body>
</html>
The align attribute of <img> is not supported in HTML5. Use CSS instead.
img {
float: right;
}
I tried almost every online technique, but I still got the top space in my website, when ever i open it with opera mini mobile phone browser,single layout view, so i decided to try fix it on my own, and I got it right!
I realize when even you display a page in a single layout, it fits the website to the screen, and some css functions are disabled, since margin, padding, float and position functions are disabled automatically when you fit to screen, and the body always add inbuilt padding at the top. so i decieded to look for at least one function that works, guess what? "display". let me show you how!
<html>
<head>
<style>
body {
display: inline;
}
#top {
display: inline-block;
}
</style>
</head>
<body>
<div id="top">
<!-- your code goes here! -->
eg: <div id="header"></div>
<div id="container"></div> and so on..
<!-- your code goes here! -->
</div>
</body>
</html>
I tried almost every online technique, but i still got the top space in my website, when ever i open it with opera mini mobile phone browser, so i decided to try fix it on my own, and i got it right!
i realize when even you display a page in a single layout, it fits the website to the screen, and some css functions are disabled, since margin, padding, float and position functions are disabled automatically when you fit to screen, and the body always add inbuilt padding at the top. so i decieded to look for at least one function that works, guess what? "display". let me show you how!
<html>
<head>
<style>
body {
display: inline;
}
#top {
display: inline-block;
}
</style>
</head>
<body>
<div id="top">
<!-- your code goes here! -->
eg: <div id="header"></div>
<div id="container"></div> and so on..
<!-- your code goes here! -->
</div>
</body>
</html>
If you notice, the body{display:inline;} removes the inbuilt padding in the body, but without #top{display:inline-block;}, the div still wont display well, so you must include the <div id="top">
element before any code on your page! so simple.. hope this helps? you can thank me if it works, http://www.facebook.com/exploxi
I have a very simple layout that doesn't look correct in Ie. I've messed with Firebug Lite and the IE Developer Toolbar but just can't seem to boil down why the right image wraps way below the left image in this case.
Here is a link to the problem that I've simplified for debugging purposes.
http://tunetra.de/test/layout.html
I'll also past my HTML here below.
<html>
<head>
<style>
#container
{
margin: 0px auto;
width: 1000px;
background: #fff;
}
#main
{
text-align: left;
}
</style>
</head>
<body style="text-align:center;">
<div id="container">
<div id="header">
<img src="img/left_image.png" style="width: 272px; height: 90px; float: left;position: relative;">
<div style="float: right;position: relative;background-color: #fff;width: 728px;height: 90px;">
<img src="img/right_image.png" style="">
</div>
</div>
<div id="main">
Lorem Ipsum Bla<br/> Bla<br/> Bla
</div>
</div>
</body>
</html>
Your page works just fine by default in Internet Explorer 10. I do see the problem you're alluding to in Internet Explorer 9 though. This is caused by your page loading in Quirks Mode. Insert the following Doctype to correct this:
<!DOCTYPE html>
Place that just before <html> on the first line. This resolves your issue.
You can quickly test this by putting your page into Standards Mode using the F12 Developer Tools. Press F12 on your keyboard to reveal the Developer Tools. At the top-right, click "Document Mode: Quirks Mode" and change it to "Internet Explorer 9 Standards".