I need a way to fill the entire webpage with an iframe.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:0px; width:100%; height:100%; }
iframe{width:100%; height:95%; border:none;}
</style>
</head>
<body>
<iframe src="http://www.repubblica.it/"></iframe>
</body>
</html>
You can see it here: http://jsfiddle.net/8nh3kfws/1/
As you can see, the iframe doesn't fill the entire page but there is a big white space in the bottom. I have noticed that it works if I remove "<!DOCTYPE html>" but I don't know why.
So, How can I do it without removing "<!DOCTYPE html>" ?
Add html to your style declaration.
html, body{ margin:0px; width:100%; height:100%; }
http://jsfiddle.net/8nh3kfws/2/
Specify a position to your iframe.
iframe{width:100%; height:95%; border:none; position: absolute}
Related
Hello expert i am trying to build a welcome page like facebook. I want a header with different color with fixed width with browser just like facebook welcome page. I have created a div id with 100 width. But the width is not fitting with the browser. it showing in the body. Please tell me how to do this. I am absolutely new in all of this.
Index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="welcome.css"/>
<title>Welcome To The Thinkers</title>
</head>
<body>
<div class="header"><h1>Welcome To Thinkers</h1></div>
</body>
</html>
CSS
body{
background-color:yellow;
width:100%;
}
p{
font-size:23px;
color:#930
}
.header{width:100%;
height:72px;
background-color:green;
}
If I understand you correctly I think your problem is with default margin/padding on certain elements.
If you add
body, h1
{
margin:0;
padding:0;
}
It should sort that out.
Demo
Try this code:
//these code is for fixed header
.header{
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #0683c9;
}
Something weird is happening.
I've a basic html code. html, head, body.
(As I've received some negative votes, here's the full code)
<html>
<head>
</head>
<body>
</body>
</html>
This is my css:
html {
background-image: url(background.png);
background-repeat: repeat;
margin-top:-8px;
}
body {
background-image: url(telefonillo.png);
background-repeat:no-repeat;
}
This is what chrome and firefox shows:
How can I fix this?
I tried to "Inspect" with firefox, and tried to remove the "background.png" from HTML, then the "telefonillo.png" shows up.
Tried "z-index:1" on body, but isn't working, as it isn't content at all.
Edit: I also tried removing all the divs, and other css, incase there was some kind of problems between any rules, but it's still happening.
Why don't you use before like this
body:before {
content:"";
background:url(background.png) no-repeat top left;
width:100%;
height:100%;
}
body {
background:url(telefonillo.png) no-repeat top left;
width:100%;
height:100%;
}
Perhaps you need to add the following tags inside the head of the html document:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Anyway, this has helped me with weird issues like this in the past. I hope it helps someone out there!
Let me preface this question with the warning that I'm a self-taught (amateur) web developer (and not a very good one). I've been trying for a long time to find an effective way of centering web pages using AP Divs. I've tried setting "margin: 0 auto;" and I've tried setting "margin-left: auto;". Both work for that one div. But I then have to use that as a wrapper to design within, so when I put more divs inside that, they don't center.
I may be completely approaching this wrong; if so, please correct me. Code (not working) for a basic version of what I want to do is below. If you run that code, if I were to place, say, an image in apDiv1, it would scale to the page size fine; but the text in apDiv2 does not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
#apDiv1 {
margin: 0 auto;
width:600px;
}
#apDiv2 {
position:absolute;
width:50px;
height:24px;
z-index:1;
left: 47px;
top: 29px;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">Hello</div>
</div>
</body>
</html>
I can center a div inside another div just fine using margin-left:auto; and margin-right:auto;:
Working example: http://jsfiddle.net/xjKhT/
In my own opinion, it is not good to use appdivs(coz it depends on how you positioned it on the design). You can do it(centering stuffs) on your own, check this:
Centering(Simple Sample)
<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>
<div id="header">
<div id="title">Hello World</div>
</div>
Custom AppDivs adds extra styles which is not really necessary:)
Updated example
Ok after some guessing and poking I think you mean that you want to absolutely position the elements inside the center-aligned wrapper.
position: absolute will be absolute to the page UNLESS the parent has position: relative.
#apDiv1 {
margin: 0 auto;
width:600px;
position:relative;
}
I made a web page with the following code and viewed it in Google Chrome.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.
How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?
Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.
For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>
if i understand you correctly, set your html & body width to 100% , height 100%
http://jsfiddle.net/Diezel23/Lv6Vw/#base
You could add an additional div:
<html>
<head>
<style>
body {
padding: 30px;
margin: 0px;
}
div {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div>
ABC
</div>
</body>
</html>
I have two html files, one contains the other with an iframe, and I want to make this iframe stretch over the full height of the parent html.
So the first html file (which has a red background) look like:
<!DOCTYPE html>
<html>
<body style="background-color: red; margin: 0px; padding: 0px;">
<iframe src="Blue.html" frameborder="0" scrolling="no" height="100%" width="100%" />
</body>
</html>
The second (which has a blue background):
<!DOCTYPE html>
<html>
<body style="background-color: blue;" />
</html>
If all things are correct I expect to see only a blue background, because the iframe should overlap the entire parent page, but I see only a strip of blue, and a whole lot of red..
With the HTML5 doctype <!DOCTYPE html> I cannot seem to be getting the correct result:
If I remove the HTML5 doctype I get the result I want. I think this is because it will render the HTML in quirks mode:
I do want the HTML doctype though, so how can I fix this? Thanks for looking!
CSS:
#wrap { position:fixed; left:0; width:100%; top:0; height:100%; }
#iframe { display: block; width:100%; height:100%; }
HTML:
<div id="wrap">
<iframe src="..." frameborder="0" id="iframe"></iframe>
</div>
Live demo: http://jsfiddle.net/5G5rE/show/