I try to Shrink an Iframe to show whole page in a small frame!
iframe {
width: 1108px;
height: 710px;
-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);
}
<table border =1>
<tr>
<td>
<iframe src ="http://example.com"/>
</td>
</tr>
</table>
this code works but I have a problem in Table!
when I put the iframe in a table , the cell size become as the real iframe size (1108*710) but the iframe is shown small because of the codes!
how can i fit the i frame to the cells?
The only way I would see to approach what you want it to use a em trick:
iframe {
width: 69.250em; /* 1108px = 69.250em */
height: 44.375em; /* 710px = 44.375em */
font-size: 0.25em; /* base scale: 0.25 */
}
<table border=1>
<tr>
<td>
<iframe src="http://example.com"/>
</td>
</tr>
</table>
But your iframe content will render as you were using a 277px * 177.5px resolution.
Related
I have an I frame inside of a <td> element. I'd like to dynamically scale the iframe so that it takes up 33% of the screen width (and automatically fixes the height).
When I try this:
<iframe src="google drive presentation url" frameborder="0" width="33vw" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
It only takes up 33% of the <td> element (which also has text in it).
Also, I tried using width="33%" but that didn't work either.
How can I fix this?
you must give width using CSS instead.
body {
margin: 0
}
td {
width: 33.3%;
background: red
}
iframe {
width: 100%
}
<table>
<tr>
<td>
<iframe src="google drive presentation url" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</td>
<td>
Foo Bar
</td>
<td>
Foo Bar
</td>
</tr>
</table>
Are you supporting anything older than IE9? Can you use vw units?
Here is a JSFiddle of the (rough) idea. The <div> elements on the bottom are for measurement/comparison.
First, I'm new to mobile development, so apologies in advance for what might be a simple question. But I've researched this for a couple of days and just can't seem to get it to work.
I can't get a particular DIV to render at the appropriate height when I switch to a mobile view. All the other divs work fine in both desktop and mobile. The div in question looks fine in the desktop view but not in mobile.
Here's a link to the page: http://echoflyfishing.com/2016
The div in question is the "DOUBLE HAND". I want it the same height as the "SINGLE HAND" above it. No matter what I do, I can't get it to size correctly. I know there's a simple solution but I've tried everything I can think of in terms of height and am stumped.
Here's the relevant HTML:
<div class="sh_container_m">
<table cellpadding="0" cellspacing="0" class="sh_container_table_m">
<tr>
<td style="font-size: 3.5vw;padding-top: 2vw; padding-bottom: 2vw;"><p>Single Hand</p></td>
</tr>
</table>
<div class="sh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the single hand image carousel will be</td>
</tr>
</table>
<div class="dh_container_m">
<table cellpadding="0" cellspacing="0" class="dh_container_table_m">
<tr>
<td style="font-size: 3.5vw;"><p>Double Hand</p></td>
</tr>
</table>
<div class="dh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the double hand image carousel will be</td>
</tr>
</table>
</div>
</div>
</div>
</div>
And the CSS:
.dh_container_m
{
display: block;
visibility: hidden;
margin: 0 auto;
width: 100vw;
text-align: center;
}
.dh_container_table_m
{
margin: 0 auto;
width: 100vw;
border: none;
background-color: #fbaa27 !important;
}
Did you mean for your dh_images_container_m div to be nested inside the sh_images_container_m div? It is going to take on it's "parents" properties which may also be contributing to some of your sizing issues.
On a side note, you have your links to the css files in the header as type="text". They should be type="css/text".
use px not vw because it's percentage and define the width of both divs as you want simple one more suggestion is use bootstrap css framework it's better for you you can make responsive site easily with the help of it.
i am new to designing html pages..i have searched for answer through the day.. but no luck.. i have problem in fixing my html page height fit to the browser . i am developing web page with the help of apache tiles for page layout. so in my layout i will have header , body and footer. below is my tiles layout jsp
<body>
<table width="100%" height="100%" align="center">
<tr height="20%">
<td><tiles:insertAttribute name="header" /></td>
</tr>
<tr height="60%">
<tiles:insertAttribute name="menu" ignore="true" />
<td align="left">
<tiles:insertAttribute name="body" />
</td>
</tr>
<tr height="20%">
<td><tiles:insertAttribute name="footer" /></td>
</tr>
</table>
</body>
and i have css defined for body and table as follows
body {
background-color: #f0f0f0;
width: 100%;
height: 100%;
margin: 0%;
padding: 0%;
}
table {
table-layout: fixed;
overflow: auto;
}
i want to design my pages with percentage and i dont want to use pixels for scaling issues on different screen resolution.
when i load the page.. the table height shrinks with respect to the body page content size.. for e.g - if i have body page size of two line. then my footer moves up (looks weird) . i would like to fix header, body and footer with 20 % 60% and 20% respectively, and this should be fixed.
Thanks in advance
Consider the following code. How can I implement the table in a responsive manner such that on a large screen the table height and width is equal to the sum if the images (e.g. 600x600) and on a smaller screen such as a mobile device the table shrinks the images proportionally. For example, on an iPhone where the screen width is 320 pixels I want the table to scale down to 320x320 while preserving the image aspect ratio.
<HTML>
<head></head>
<body>
<div id="header"></div>
<div id="table"
<table style="height: 100%">
<tr>
<td>
<img id="topleft" src="300x300.png">
</td>
<td>
<img id="topright" src="300x300.png">
</td>
</tr>
<tr>
<td>
<img id="bottomleft" src="300x300.png">
</td>
<td>
<img id="bottomright" src="300x300.png">
</td>
</tr>
</table>
</div>
<div id="footer"></div>
</body>
</html>
Here's an image showing how the above code renders in a mobile Safari browser.
You can set table width to 100% and td and img widths to rougly 49% (to keep the border) if you have 2 images per row. Additionally, if you might have images smaller than the possible screen size, use something like img {max-width: 49%;}
Adaptive table dimension can be tricky. First thing I would recommend is to put table inside of a div with attribute as position: relative and then control your margins and size this way.
<div id="myCont" style="">
<table>
<tr>
<td> Hello! </td>
<td> Aloha! </td>
</tr>
<tr>
<td> Goodbye! </td>
<td> Aloha! </td>
</tr>
</table>
</div>
Then some css:
#myCont {
position: relative;
width: 100%;
}
#myCont table {
width: 100%;
}
#myCont table tr td {
width: 50%;
position: relative;
}
.imgCls {
width: 100%;
}
If you then set table to <table cellspacing="0" cellpadding="0">, you're going to have a lot easier time getting the accurate dimensions and a "clear slate" to start with.
Also, img tags will ALWAYS respect the aspect ratio if you only set the width attribute.
For this, I might recommend a jQuery solution.
<img class="imgCls" src="/path/to/img.png" />
<script type="text/javascript">
$(document).ready(function(){
var imgw = $('.imgCls').parent('td').css('width');
$('.imgCls').css('width',imgw);
});
</script>
Something like this should work as long as the images with the imgCls class are (or desired to be) uniform in width, the var imgw will take the width of the first .imgCls it finds.
I suggest you to try with this css code:
img{ width: 49%; }
http://jsfiddle.net/xeSLA/
I have a table where all columns need to be an exact minimum width.
If the table does not fit into it's container div the table will go into a scroll.
This is my setup:
<table>
<tr>
<td class='cell'>1</td>
<td class='cell'>2</td>
</tr>
</table>
.cell {
width: 10em;
min-width: 10em;
}
This works in every browser but IE7 because min-width is not supported, is there a workaround for this?
check this:
http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
Its easier than you think:
<table>
<tr>
<td width=60>1</td>
<td width=80>2</td>
</tr>
</table>
http://jsfiddle.net/V8jny/
#div {
width:XXXpx; // the static width u want
height:XXXpx; // the same with the height
overflow:scroll;
}
hope, thats what u're looking for.
g.r.