Image over iframe in html - html

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;
}

Related

Resizing my page make items disappear

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.

how to allign images vertically inside a div without any space between them

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.

How to embed PDF file with responsive width

I'm embedding pdf files using something like this:
<div class="graph-outline">
<object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
</object>
</div>
It works but I want to set the pdf width to match the width of the containing div. Currently it shows up like an iframe with scrollbars, so to view the entire pdf, you have to scroll right to left. I want the pdf to fit the width of the container.
How do I fix this? I'm supporting IE8 and up.
Here is a jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/
Simply do this:
<object data="resume.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="resume.pdf">click here to
download the PDF file.</a></p>
</object>
If you're using Bootstrap 3, you can use the embed-responsive class and set the padding bottom as the height divided by the width plus a little extra for toolbars. For example, to display an 8.5 by 11 PDF, use 130% (11/8.5) plus a little extra (20%).
<div class='embed-responsive' style='padding-bottom:150%'>
<object data='URL.pdf' type='application/pdf' width='100%' height='100%'></object>
</div>
Here's the Bootstrap CSS:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
I did that mistake once - embedding PDF files in HTML pages. I will suggest that you use a JavaScript library for displaying the content of the PDF. Like https://github.com/mozilla/pdf.js/
<embed src="your.pdf" type="application/pdf#view=FitH" width="actual-width.px" height="actual-height.px"></embed>
Check this link for all PDF Parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=7
Chrome has its own PDF reader & all parameter don't work on chrome.
Mozilla is worst for handling PDFs.
<html>
<head>
<style type="text/css">
#wrapper{ width:100%; float:left; height:auto; border:1px solid #5694cf;}
</style>
</head>
<div id="wrapper">
<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" width="100%" height="100%">
<p>Your web browser doesn't have a PDF Plugin. Instead you can <a href="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf"> Click
here to download the PDF</a></p>
</object>
</div>
</html>
Seen from a non-PHP guru perspective, this should do exactly what us desired to:
<style>
[name$='pdf'] { width:100%; height: auto;}
</style>

HTML image positioning

I'm trying to create a html document to be shown on iphone and ipad.
It's a simple one but I've some problems with the image position and I'm not sure if I should use relative or absolute position.
What I'd like to have is an image in the center of the page, (a litte bit under the top of the screen) and a youtube iframe centered under the image.
This code is working on portrait but not on landscape as the image will not be in the center if the page.
I'd like also to have some space between the image and the youtube frame.
This is my actual code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta content="width=device-width;" initial-scale="1.0;" maximum-scale="2.0;" name="viewport" user-scalable="1;" />
<body bgcolor="#9fa2b5">
<div align="center">
<img style="position:relative; TOP:15px; LEFT:65px; "src="http://mysite.jpg" alt="image is missing" width=90 height=130>
<p>
</p>
<iframe width="320" height="180" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>
</body>
</html>
There are several different techniques to centre page contents and a few are discussed at this article on w3.org. You are using the align attribute on the div, and it should work. However, in the image tag you are also adding left:65px; which will move the image 65px to the right of centre.
In a pure css solution, you should do the following to the html.
<div class="container">
<img class="rndImage" src="http://myimage.org" alt="image is missing"/>
<iframe class="youtube" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>
And add the following CSS in style block or in an attached css style sheet.
iframe.youtube
{
width:320px;
height:180px;
display:block;
margin:15px auto;
}
img.rndImage
{
display:block;
width:90px;
height:130px;
margin:15px auto;
}
div.container
{
position:relative;
width:100%;
margin:5px, auto;
}
The above code separates out the style from the html and links it by using classes. You can see a working example on JsFiddle.Net.

Hyperlinks do not work

I have the following code in the head section of my website. I have read this question but my css does not seem to have a z-index.The image and the like box display but nothing happens when I click them or I should say that the hyperlinks do not work. Please help out. Thanks
<div class="content-pad" style="float:left;">
<img src="http://www.startupsandfinance.com/wp-content/uploads/2012/06/Advertise-here-728x90.png" width="728" height="90" />
<span class="widget-pad" style="margin-left:25px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FStartupAndFinance&width=290&height=62&colorscheme=light&show_faces=false&border_color&stream=false&header=true&appId=384169901601437" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:62px;" allowTransparency="true"></iframe>
</span>
</div>
</div>
When you click on the header image, the default email application is launched as you have an href to:
mailto:developerfahaduddin#gmail.com
You can check it out live in here:
http://jsfiddle.net/MSRXU/
So, is something else that you haven't write the code for.
After looking at your page with Firebug, I see something else is messed up. If you add some height to:
<div class="content">
...
</div>
You will be fine, and the image will be clickable.
The problem is that .content has no height, and pointer events are not reaching the iframe because it is outside of it's parent element's boundaries.
Adding this rule to whatever else you have for your .content selector.
div.content {
height: 120px;
}