I've create a website and with the viewpoint metatag, I've set the content with to 1200px, <meta name="viewport" content="width=1400, initlia-sclae=1.0, user-scalable=yes">.
Well it's work fine, but now I have to create an iframe (in an external site) with my site in it. But the space available to me is smaller than the content width, so you have to scroll horizontaly to view all.
I've tried do this: <iframe src="http://tlicetlac.tumblr.com" width="800px" height="400px" style="-webkit-transform:scale(0.9);-moz-transform-scale(0.9);"></iframe> but didn't work because resized the iframe's display area too.
So, can I for example set multiple viewpoint to resize the content for multiple web sites?
I tried your code and it worked fine .
you can see here Resize external website content to fit iFrame width
i used it to resize a world clock map from another web site to my web site.
here is my code:
<div id="containerworldTime">
<iframe src="http://24timezones.com/" width="992" height="500" scrolling="no" ></iframe>
</div>
#containerworldTime {
height: 395px;
margin:auto;
overflow: hidden;
width: 770px;
border:red solid 5px;
}
#containerworldTime iframe {
border: 0 solid;
height: 1103px;
margin-left: -110px;
margin-top: -385px;
width: 979px;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
}
and see this example
<div
style="
overflow: hidden;
display:inline-block;">
<iframe
src='https://en.wikipedia.org/wiki/Punding'
scrolling="no"
frameBorder="0"
style="
width: 660px;
height: 1000px;
margin-top: -180px;
margin-left: -200px;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);"
></iframe>
</div>
Related
The cloud looks like it's inside the mountain image's box/outline. I thought the margin should be affected relative to either parent div container or viewport. I am new to CSS and don't understand why this is happening ?
Taken screenshot with pesticide activated for the outlines
body {
background-color: grey;
margin: 0;
text-align: center;
}
.top-container {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.cloud2 {
position: absolute;
margin-top: 50px;
margin-left: 15px;
}
<body>
<div class="top-container">
<img class="cloud1" src="images/cloud.png" alt="cloud-img">
<h1>Welcome</h1>
<p>This is jungle</p>
<img class="cloud2" src="images/cloud.png" alt="cloud-img">
<img class="mountain" src="images/mountain.png" alt="mountain-img">
</div>
</body>
With position: absolute (and fixed) you always want to provide one or more positioning constraints (i.e. top, left, bottom, right) so that css knows how to position the element relative to the "nearest positioned ancestor".
By positioning an element absolutely, you are telling css that you want to position this element such that it takes up no space on the DOM with regard to the flow layout. Without providing any positioning constraint css only knows the element to which it should position.
You may assume the default is just to place the element in the top left (i.e. top: 0, left: 0) but that's not the case. The absolute element will just be thrown where it would have been positioned as a static element but without taking up any of the block/inline space. So this is why the order of the element relative to its siblings is important when no positioning constraints are used. By the way I have NEVER used this in my career, I've always used positioning constraints to be explicit! See demo below.
So short answer is just use positioning constraints and you're good.
body {
background-color: grey;
margin: 0;
text-align: center;
}
.top-container {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.cloud2 {
position: absolute;
margin-top: 50px;
margin-left: 15px;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="top-container">
<img src="https://www.pinclipart.com/picdir/middle/538-5386297_cloud-outline-png-clipart-transparent-background-gray-clouds.png" alt="cloud-img" width="20%">
<h1>Welcome</h1>
<p>This is jungle</p>
<img class="cloud2" src="https://www.pinclipart.com/picdir/middle/538-5386297_cloud-outline-png-clipart-transparent-background-gray-clouds.png" alt="cloud-img" width="20%">
<img class="mountain" src="https://www.pngkey.com/png/full/111-1118124_cartoon-clip-art-transprent-png-free-download-mountain.png" alt="mountain-img" width="80%">
</div>
</body>
</html>
There are many gotchas with position: absolute so be aware.
Aside
CSS takes time to know and understand. There are rules to guide you
but a lot of the learning process is trial and error and on top of that the rules are somewhat different between browsers too. I've found many
solutions to extreme edge cases that I have since forgotten, the trick
is to remember just enough to find the solution again. Over time it
will become second nature. Also using the dev tools elements->styles
panel to quickly experiment can help you find a solution or learn
about all the properties and their values.
I've searched for several days with the problem embedding a video via
and can't find the proper solution to this prob.
I'm editing a purchased web html5 template on localhost using FF on Linux.
The HTML
<!-- blog side -->
<section class="blog-side sp-seven blog-style-one standard-post video-post">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12 col-xs-12 content-side">
<div class="blog-details-content">
<div class="wrapper">
<div class="videowrapper">
<iframe src="https://www.youtube-nocookie.com/embed/NNcvbxIODsY?start=15" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
The CSS
.blog-side {
position: relative;
}
.wrapper {
margin: 0 auto;
}
.videowrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0px;
}
.videowrapper iframe {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: 100%;
width: 100%;
}
The video does not display, but gets this error code - File Not Found:
The embed code that I get from YT is long and has many attributes I'm not interested in, and have deleted some of them with the same results.
Could this be a .js problem?
How is your html file named? I think you're not targeting correctly your html file (which contains the iframe and the rest of the code).
I'm saying this because your screenshot shows that file named <iframe width=... does NOT exist.
Your path should be like:
/home/esmeralda/Desktop/Belfast/myFile.html
Here, myFile.html is the file (with .html extension) which has your source code "iframe, css styles, etcetera".
can someone point me or give a hint, solution on how to modify a modal box which the height are offset to the browser height resolution?
currently if I have a modal box height of 500px by 1200px and my browser is 1280x1024, the modalbox is not scrolling and cannot view the under parts of the box.
I hope you can help me, thank you
TIA
I am assuming you want to set the modal width/height as a percentage of the viewport (e.g. browser window)?
You can do this with CSS providing width and height of html/body are set to 100% first.
As an example, a modal sized to 50% of the viewport and fixed to the center would look like;
<html>
<head>
<style type="text/css">
html, body { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
#modal {
width: 50%;
height: 50%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
/* display: none; */
}
</style>
</head>
<body>
<div id="modal">
<h1>modal</h1>
</div>
</body>
</html>
A lot of topics on this... but not getting the point how to do it.
I have my JQM Header and Footer. I want the content area to fill the 100% height in between head and foot.
Thats my code, how is it possible?
<body>
<div data-role="page" id="entryPage" data-theme="d">
<div data-role="header" id="header" data-position="fixed" data-theme="d">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" id="content" data-theme="d">
<div id="columnwrapper">
<div id="leftcolumn">
<div class="innertube">
Point 1
</div>
<div class="innertube">
Point 1
</div>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
<div id="switch1">
test
</div>
</div>
<div class="innertube">
test2
</div>
</div>
<div id="contentcolumn">
<div class="innertube">Content</div>
<div class="innertube">Content</div>
</div>
</div><!-- /content -->
<div data-role="footer" id="footer" data-position="fixed" data-theme="d">
<div id="switch2">
Expand main menu
</div>
</div><!-- /footer -->
</div><!-- /page -->
</body>
CSS:
#columnwrapper{
float: left;
width: 100%;
margin-left: -75%; /*Set left margin to -(contentcolumnWidth)*/
background-color: #C8FC98;
}
#leftcolumn{
margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 40px; /*Width of right column*/
margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/
background: yellowgreen;
}
#contentcolumn{
float: left;
width: 75%; /*Width of content column*/
background-color: blue;
}
.innertube{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
Actually the inner area only fills the height depending on the content... means 2 divs 2 rows, but not 100%..
Thanks
The CSS position: fixed doesn't work correctly in mobile browsers. My experience is with Android and iOS browsers and none of them impliment position: fixed properly (the exception is the iOS 5 browser but it's still in beta).
Rather than fixing an element to the screen and not moving it when the user scrolls in mobile browsers it tends to be treated like position: absolute and it moves when the page scrolls.
Also using the CSS overflow property won't allow scrolling on most mobile devices (iOS supports it but the user has to know to use two fingers while scrolling in a scrollable-div).
You can however use CSS but be aware you will need to use position: absolute or you can use JavaScript to set the heights on the elements.
Here is a jQuery Mobile solution using JavaScript to set the heights of the pseudo-page elements:
$(document).delegate('#page_name', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});
To get a flawless finish you need to take into consideration the behavior of the target device's address bar because if you want a fullscreen webpage then you have to add the height of the address bar to the height of the page.
Thanks, Jasper! That helped me a lot.
I had to mess around a lot to get this to work with multiple headers/footers, and to account for the url bar in ios. I thought I would share my solution for any one else having this issue.
This is working for me so far in ios simulator, but I would be eager to hear how it works on other devices.
/* detect device */
var ua = navigator.userAgent,
iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
ipad = ~ua.indexOf('iPad'),
ios = iphone || ipad,
android = ~ua.indexOf('Android');
$(document).delegate('#the_page', 'pageshow', function () {
var $page = $(this),
$target = $(this).find('.fullHeight'),
t_padding = parseInt($target.css('padding-top'))
+ parseInt($target.css('padding-bottom')),
w_height = (ios)? screen.height-65: $(window).height(); // "-65" is to compensate for url bar. Any better ideas?
headFootHeight = 0;
// Get total height for all headers and footers on page
$page.find('[data-role="footer"], [data-role="header"]').each(function() {
var myTotalHeight = $(this).height()
+ parseInt( $(this).css('padding-top') )
+ parseInt( $(this).css('padding-bottom') );
headFootHeight += myTotalHeight;
});
var the_height = (w_height - headFootHeight);
$page
.height(w_height)
.find('.fullHeight')
.height(the_height - t_padding);
});
This script is setting a 100% height on '.fullHeight', instead of [data-role=content] to give more flexibility, but you can just add the fullHeight class to your [data-role=content] element.
One issue I'm still having is compensating for the url bar in ios, and finding a window height that works across devices. Any ideas on that?
the CSS:
footer {
display: block;
position: fixed;
left: 0;
bottom: 0;
right: 0;
height: 50px;
background-color: #333;
overflow: hidden;
z-index:1000;
-webkit-transform: translateZ(0);
opacity:.9;
}
header{
display:block;
position: fixed;
left:0;
right:0;
top:0;
height:50px;
overflow: hidden;
}
section{
display:block;
position:fixed;
left:0;
top:50px;
bottom:50px;
right:0;
overflow-y: auto;
}
nav{
display:block;
height:100%;
-webkit-backface-visibility: hidden;
}
.body{
overflow-y: hidden;
}
.bar {
border: 1px solid #2A2A2A;
background: #111111;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image: -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image: -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image: linear-gradient(top, #3c3c3c, #111);
}
the only html needed:
<header class="bar" id="AllHead"></header>
<div data-role="content" class="content" id="home"><section><nav></nav></section></div><!-- /content -->
<footer class="bar" id="allFoot"></footer>
</div><!-- /page -->
you can then set whatever items you want inside the footer and the bottom nav bar
this will always look right, no matter what happens, also this wont flash on and off everytime you touch something. hope it helps
Hey guys, my first question here on stack overflow. Trying to get something pretty simple to work, I'm sure I'm missing something quite obvious. Still getting used to the "standard" css, too many years working with non-functional ones! Heh.
So, sample of what I'm doing:
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
<div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
In essence: The first div is a container, that I would like to automatically overflow as content is added. Inside of that container, I have a popup menu, which I have simplified here. The popup menu appears (as it should) directly under "hello".
My problem, however, is that instead of the popup menu "coming out" of the parent, as would be expected by the absolute position, it is actually causing a scrollbar to appear on the parent.
I know that if I take otu the "position: relative" it works, but then it no longer appars where I want it (directly under the previous element).
What am I missing here?
EDIT: Sample here: http://marcos.metx.net/OverflowTest.htm
first of all - Inline styling is a big no no.
It is best to include a style sheet and apply it to individual div's via the "id" or "class" attributes.
Please read up on standards compliant css at w3schools
The problem is your overflow property.
auto - "If overflow is clipped, a scroll-bar should be added to see the rest of the content"
What you are looking for is "overflow: visible;"
Using position: absolute instead of relative on that middle div will solve your problem. This gives you (with an added border color on the inner-most div):
alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png
And here is the updated source code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: absolute; z-index: 99999">
<div style="z-index: 99999; overflow-y: hidden; position: absolute;
overflow: hidden; height: 200px; left: 0; auto: 0;
border: 1px solid red">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For more on this, see Absolutely positioned box inside a box with overflow: auto or hidden.