How do I get an iframe to appear under an image and align to the right? Here's my code.
<img src="images/pc-mag.png" width="500" height="275" align="right">
<iframe width="500" height="400" align="right" src="https://www.youtube.com/embed/9rR5PpHSoIQ" frameborder="0"></iframe>
<h3 class="subHD">SubTitle</h3>
<p>Body paragraph</p>
Thank you for the help. Here's the code that worked.
<div class="FullPage">
<!--container for image and iframe -->
<div style="float:right; margin-left:20px">
<img src="images/pc-mag.png" width="500" height="275" align="right"><br>
<iframe width="500" height="400" align="right" style="margin-top:20px" src="https://www.youtube.com/" frameborder="0"></iframe>
</div>
<img src="../images/Logotype.png" width="190" height="101"/>
<h3>Title</h3>
<p>Body text</p>
</div>
Check this jsfiddle i have wrapped iframe and img inside divs
iframe,img{
float:right;
}
div{
clear:both;
}
There are two image tags, not sure under which image tag you want to align iframe?
Suggestion: You can wrap your iframe in paragraph tag and can align anywhere you want.
For example: <p style="text-align:right;"> <!--here you can add iframe --> </p>
Related
Can anyone say why this is wrong? I thought the yellow div would be across the whole page like the pink div. But when I look at it - no, the yellow div lines up under the image not the whole length.
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style=width:100%;background:red>
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style=width:100%;background:yellow>
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
( https://silib2.net/eResources/scripts/carousel/form.htm )
It is probably something stupid?
Please Try This:-
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style="width:100%;background:red; clear: both; overflow: hidden;">
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style="width:100%;background:yellow; clear: both; overflow: hidden;">
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
Static Height to Iframe May solve your issue
<iframe scrolling="no" frameborder="0" width="100%" height="165px" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iframe>
You need to give your iframe a smaller height which would be approximately
height: 225px;
And you need to give the div that wraps it [one with red background on it]
clear:both; Overflow:hidden;
I've been trying to get a hyper link to be centered above a picture. I tried using a div class tag to center it, but they won't allow pixels.
HOMEPAGE <img src="1.jpg width="300" height="300" />
This is what it looks like after I run it:
I want the hyperlink to line up in the middle of the picture.
If you add a text-align: center to the container element you will get what you want:
<div style="text-align: center;">
HOMEPAGE<br />
<img src="https://dummyimage.com/150x100/s7e/ffe" width="300" height="300" />
</div>
A Container Approach with CSS
CSS:
.imagecontainer {
width:300px;
text-align:center;
}
HTML
<div class="imagecontainer">
<a href="link">
Some text
</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Domestic_goat_kid_in_capeweed.jpg" width=300/>
</div>
JSfiddle
Try using the element DIV, setting the width to 300 pixels just like your image and CSS to align the link to center:
<div>
<div style="width: 300px; text-align: center"> HOMEPAGE </div>
<div><img src="1.jpg width="300" height="300" /></div>
</div>
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>San Diego</h3>
<p>Departure</p>
<body>
<iframe src="http://flightaware.com/resources/airport/SAN/APD/AIRPORT+DIAGRAM/pdf" width="600" height="700">
<iframe src="https://flightaware.com/resources/airport/KSAN/DP/all/pdf" width="600" height="700">
</body>
<p>Approach</p>
<body>
<iframe src="https://flightaware.com/resources/airport/KSAN/STAR/all/pdf" width="600" height="700">
<iframe src="https://flightaware.com/resources/airport/KSAN/IAP/all/pdf" width="750" height="800">
</body>
</div>
</div>
</div>
</section>
That is what I have at the moment, but it only shows one pdf, the top one. How can I get it to show all the pdfs?
Thanks
First of all, you forgot to close your iframe tags.
The iframe tag is not self closing and should be explicitly closed like the following:
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
(Notice the </iframe> closing tag)
This one worked for me (your original HTML re-worked):
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>San Diego</h3>
<p>Departure</p>
<div>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
</div>
<p>Approach</p>
<div>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
<iframe src="https://www.weather.com" width="750" height="800"></iframe>
</div>
</div>
</div>
</div>
</section>
See it here: https://jsfiddle.net/c55zztbn
If you are still not getting your iframe's src URL's shown, the url you are using might be using a "X-Frame-Options" response header which will prevent the iframe from loading it.
Hope that it helps a bit!
I want them to align beside each other and I can't use table formatting
<div align=left><img src="../data/banner.png" alt="Logo" width="20%" height="100%"></div>
<iframe name="main_Frame" height="100%" width="80%" src="../data/home.htm" frameborder="0" align="right"></iframe>
<div style="width:20%; float:left;"><img src="../data/banner.png" width="100%" alt="Logo"></div>
<div style="width:80%; float:right;"><iframe name="main_Frame" src="../data/home.htm" frameborder="0" width="100%"></iframe></div>
This should get them to align horizontally, provided they won't inherit some other styling attributes.
If you are just starting out you should try thinking of sites as blocks of divs before anything else,
<div style="position:relative; overflow:auto;">
<div style = "width:20%; float:left;">
<a href="../data/home.htm" target="main_Frame">
<img src="../data/banner.png" alt="Logo"></a>
</div>
<div style = "width:80%; float:left;">
<iframe name="main_Frame" src="../data/home.htm" frameborder="0" align="right"></iframe>
</div>
</div>
I would recommend learning some CSS, here is a good: http://www.codecademy.com/tracks/web
I'd like to place an image under my iframe, but i've pieced together some code and it doesn't appear to be exactly right. The iframe contains text and has a transparent background. Can you help me out? thanks,
<td width="216" style="position: relative;">
<img src="http://southwestarkansasradio.com/images/onair995.jpg"></a><br>
<img src="http://southwestarkansasradio.com/images/playerbackground.jpg" style="z-index: -1"/>
<div style="absolute;left:0px;top:0px;font-size: 32px;display: none">
<iframe name="I1" width="316" height="216" src="http://southwestarkansasradio.com /NowPlaying.html" border="0" frameborder="0" allowTransparency="true">
Your browser does not support inline frames.</iframe>
</div>
</td>
<img src="http://southwestarkansasradio.com/images/onair995.jpg"></a><br>
<img src="http://southwestarkansasradio.com/images/playerbackground.jpg" style="z-index: -1"/>
<div style="position:absolute;left:0px;top:0px;font-size: 32px">
<iframe width="316" height="216" src="http://southwestarkansasradio.com/NowPlaying.html" border="0" frameborder="0" allowTransparency="true">
Your browser does not support inline frames.</iframe>
</div>
You have 'display:none' on the div tag that contains the iframe. I tested the above code and it works as you have explained is should.