how can I align the text with the twitter button?
This is how I want it to be aligned:
This is the code:
<div class="pull-right">
<p>text <b>text</b> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1357735024.html#_=1358118140271&id=twitter-widget-0&lang=it&screen_name=test&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 214px; height: 20px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>
</div>
The vertical-align CSS property appears to be what your looking for.
Here's a working example of your code I made.
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'm trying to implement a RSS feed and move it to the right of my Google Maps API, but it stay in the bottom of the page.
Can someone help me?
Here is an image of my page:
Here is the code of the rss feed:
<div id="widgetmain" style="text-align:left;overflow-y:auto;overflow-x:hidden;width:200px;background-color:#transparent; border:1px solid #333333;">
<div id="rsswidget" style="height:500px;">
<iframe src="http://us1.rssfeedwidget.com/getrss.php?time=1495402870570&x=http%3A%2F%2Ffeeds.feedburner.com%2Fthr%2Freviews%2Fallreviews&w=200&h=500&bc=333333&bw=1&bgc=transparent&m=10&it=true&t=(default)&tc=333333&ts=15&tb=transparent&il=true&lc=000003&ls=14&lb=true&id=false&dc=333333&ds=14&idt=true&dtc=000000&dts=12" border="0" hspace="0" vspace="0" frameborder="no" marginwidth="0" marginheight="0" style="border:0; padding:0; margin:0; width:200px; height:500px;" id="rssOutput">Reading RSS Feed ...
</iframe>
</div>
<div style="text-align:right;margin-bottom:0;border-top:1px solid #333333;" id="widgetbottom">
<span style="font-size:70%">RSS feed </span>
<br>
</div>
</div>
Try using float. Under the "style" of the first div, put "float: right"
I am trying to sit 2 iframes side by side and have them both in the center of a page. The DIV that surrounds them has all text etc in central but the iframes sit either left or right based on the align tag but not in the middle.
HTML:
<div class="box">
<iframe src="iframe content" width="64" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" align="left">
</iframe>
</div>
<div class="box">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="iframe content" style="height:20px;" align="right">
</iframe>
</div>
CSS:
.box iframe{
display:inline-block;
}
.clear{
clear:both;
}
You can add
.box{ text-align:center;}
for iframe you can use float left as well. or else even display: inline-block is fine as well.
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>
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.