I have an iframe which shows scaled websites but after scaling, a whitespace stays, and its size is the size before scaling. I have tried to wrap it around with different div's as I've found some solutions but it's not working for me, the space is still there.
You can see it here.
HTML
<div id='wrap'>
<div id='preview_div'>
<iframe src="../404/index.php"></iframe>
</div>
</div>
CSS
#preview_div {
position: relative;
width: 700px;
height:600px;
margin:auto;
}
iframe {
background-color:white;
width: 1400px;
height: 960px;
position: relative;
overflow:hidden;
border: none;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
#wrap {
width:700px;
height:600px;
margin:auto;
float:left;
}
Any ideas? Thanks.
If you want to get rid of the window scrollbars, you could apply overflow: hidden to #preview_div to hide the extra space.
Inside the iFrame the container the div () has a CSS width of 630px. Also there is a pixel with on the iFrame itself.
Related
I have two right triangle images that I want to put together like this (solid colors only for example):
I can think of a couple of ways to do this:
Divs with background images, and positioning them on top of each
other
A similar approach to the above, but with images instead of divs
The problem comes from the fact that I want to be able to hover (and click) on each individual triangle and have it change it's state (such as change color on hover).
Both of my above solutions create the problem where one is on top of the other, and I cannot click or hover over the other. I was thinking of doing this with CSS shapes, but those usually involve borders and I don't know of a way to overlay the image on those.
I need to be able to accomplish this with just CSS and HTML, and ideally without an image map.
Is this what you want?
Edit: I didn't notice there was another answer with similar approach, had the answer window opened for awhile, sorry.
.container {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.triangle {
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
overflow: hidden;
}
.triangle:hover {
border: 1px solid red;
}
.top_right {
transform: skewX(45deg);
transform-origin: 0 0;
}
.top_right img{
transform: skewX(-45deg);
transform-origin: 0 0;
}
.bottom_left {
transform: skewX(45deg);
transform-origin: 0 100%;
}
.bottom_left img{
transform: skewX(-45deg);
transform-origin: 0 100%;
}
<div class="container">
<div class="triangle top_right">
<img src="http://www.avatarsdb.com/avatars/spongebob_happy.jpg">
</div>
<div class="triangle bottom_left">
<img src="http://www.avatarsdb.com/avatars/say_cheese.jpg">
</div>
</div>
Another option is to use css skew:
your html:
<div class="img-container">
<img src="http://www.natureasia.com/common/img/splash/thailand.jpg" />
</div>
<div class="img-container">
<img src="http://www.worddive.com/blog/wp-content/uploads/2014/06/nature-and-environment-course.jpg"/>
</div>
The css:
.img-container, .img-container img { width: 100%; height: 100%; }
.img-container {
overflow: hidden;
position: absolute;
transform: skewX(-68deg);
}
.img-container:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.img-container:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.img-container img {
transform: skewX(68deg);
transform-origin: inherit;
}
It will probably work better with square images, however you can play around with the skew until it looks right.
Check out this Fiddle or rotating the other way
Again, not 100% sure on browser compatibility tho. If you need to guarantee that all browsers render properly you might be best of using images.
working on a site and this animation isn't responsive. I've changed the width to 100% and added css. Can anyone help me out? here's the site link..
armani.globerunnerstaging.com
Here's my html and css
<div class="video-container">
<iframesrc="https://content.understand.com/hair-loss-dallas.player?PresentationID=4e9e3cad-0f79-49c0-a204-8193a6a4264b&CatalogID=3fcc6564-3065-4b92-a116-8a692f3572d5" width="100%" height="557" frameborder="0" scrolling="no">
</iframe>
</div>
.video-container {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:touch;
border: solid black 1px;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
First thing, an iFrame can't have a percentage unit for the width attribute :
width="100%" height="557" frameborder="0"
It should be pixels. For example:
width="701" or width="701px"
But your main problem is that player displaying within your iFrame has a container with a fixed width of 701px.
div#container
{
background: #FFF;
margin: 0 auto;
padding: 0;
width: 701px;
height: 557px;
}
This means even if your iFrame has a smaller width than 701px, its content won't shrink below that limit.
Unless you can edit the CSS of the page inside the iFrame, there is no way to change this behaviour.
UPDATE:
Maybe if you try playing around with CSS Scale transform you could make it work for mobile.
.video-container iframe{
-ms-transform-origin: 0 0; /* IE 9 */
-webkit-transform-origin: 0 0; /* Chrome, Safari, Opera */
transform-origin: 0 0;
-ms-transform: scale(0.75); /* IE 9 */
-webkit-transform: scale(0.75); /* Safari */
transform: scale(0.75);
}
Make sure you correct the iframe property width:"100%" first.
Here is an example : http://codepen.io/Rubecula/pen/CtKdH
I have searched for a resolution to my problem, but have not yet been successful.
I have images of different sizes in Nivo Slider, but I need to create a viewport that displays the image centered in a div. It's hard to explain, but I have included a diagram below.
The image must be centered in a div, while the div must also be responsive. I don't want the div to change its size and would like the image to create an overflow that is hidden on the div.
I have tried different methods of CSS and HTML, but neither are my greatest strengths.
If I understand correctly what you want to achieve is something like this (uncommenting /*overflow: hidden;*/): DEMO
HTML:
<div>
<img src="http://i.imgur.com/cjgKmvp.jpg"/>
</div>
CSS:
div{
position: relative;
margin: 100px auto;
width: 400px;
height: 300px;
border: 3px solid red;
/*overflow: hidden;*/
}
img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
Note: I comment overflow: hidden; so you can see how the image is positioned.
I have an iframe with some content.
When i zoom out the content in the iframe does not zoom with the page, it stays the same size therefor causing scroll bars to appear, giving away the fact that its an iframe.
Is there a way to make the iframe zoom with the page?
Thanks
You have not given details on your lines of code or the browser you are working on, but ,
here's what you can try to achieve your goal.
<style>
#frameScale { width: 1390px; height: 2940px; padding: 0; position:relative; left:-90px; top:0px; overflow: hidden; }
#frame { width: 1390px; height: 2940px; position:relative; left:-55px; top:0px; }
#frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="frameScale ">
<iframe id="frame" src="Give Some URL Source Here"></iframe>
</div>
The layout I'm trying to achieve is shown in this image:
The HTML below is one of many attempts which haven't worked. The project this is for is targeting HTML5 in the latest browsers only, so there is no need for it to work in anything except the latest Chrome, Safari, Firefox and (with a following wind) IE9 beta.
<!DOCTYPE html>
<html>
<body>
<div style="border: solid 1px red; width:600px; height: 600px">
<span style="-webkit-transform:rotate(-
90deg);display:block;position:absolute;bottom:600px">My Vertical Text</span>
<img src="http://www.gizmodo.com/assets/resources/2007/01/Bill-gates-mugshot.jpg"
style="position:absolute;bottom:600px" />
</div>
</body>
</html>
I suppose you might want something like this: http://jsfiddle.net/aNscn/3/
bottom: 600px is going to get you nowhere - that's just going to put the elements 600px away from the bottom of the user's screen. Instead, give the outer div a position: relative and let the two elements align to it's bottom with a suitably low bottom value. Also check out the transform-origin property to get the positioning of the span correct after rotation.
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(-90deg);
-moz-transform-origin: left top;
-o-transform: rotate(-90deg);
-o-transform-origin: left top;
transform: rotate(-90deg);
transform-origin: left top;
position: absolute;
bottom: 0;
left: 5px;
}
#img {
position:absolute;
bottom: 15px;
left: 30px;
}