I'm a total HTML noob. Last time I used html must have been using Dreamweaver over 20 years ago.
I got an iframe that loads my application. This is working fine but above the iframe I would like to add a header with an image and background color. Probably a percentage instead of a fix size to make it look good on different resolutions?
Below the iframe I want to add a small space with a short text.
How would I add that to this code?
<!DOCTYPE html>
<html>
<style type="text/css">
html, body { margin: 0; padding 0; width: 100%; height: 100%;}
iframe { border: 0; width: 100%; height: 87%; }
</style>
<body>
<iframe src="myapplicationip"></iframe>
</body>
</html>
Check out CSS background-image, HTML5 header and footer tags.
Using HTML5 tags you can start like this:
<!DOCTYPE html>
<html>
<style type="text/css">
html, body { margin: 0; padding 0; width: 100%; height: 100%;}
header{ background-image: url("img_tree.png");}
iframe { border: 0; width: 100%; height: 87%; }
footer{color:blue;}
</style>
<body>
<header>
<h1>Your header</h1>
</header>
<iframe src="myapplicationip"></iframe>
<footer>
<p>Your footer</p>
</footer>
</body>
Related
Hi I'm trying to make a full height banner for my website's homepage. I want my banner to always take the full height of the window, wether on computer, ipad or iphones. Anyone could help would be much appreciated.
You can give height:100vh to the banner. So that it will cover the whole window.
if your banner contains only an image ,it can be done by:
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.banner-div{
background-size: 100% 100%;
background-image: url(http://www.wefms.com/speedtest/hello.JPG);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="banner-div">
<!--displays an image banner for full screen size-->
</div>
</body>
</html>
or it can be done by
<head>
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.banner{
height: 100vh;
width: 100%;
background-color:lightblue;
}
.inner-div{
background-color: lightgreen;
width: 200px;
}
.normal-div{
height: 140vh;
width: 100%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="banner">
<div class="inner-div">banner div for full screen height</div>
</div>
<div id="normal-div">
Normal division for 140 vh
</div>
</body>
or you can also use javascript
screen.height
to detect device screen height and you can assign it to a div
I'm currently trying to make a landing page and I have a problem. There are some white stripes all around the <img>, it looks like this.
I would like the picture to be full-screen, without any stripes etc.
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="background">
<img src="background.jpg" id="background"> </img>
</div>
</div>
</body>
</html>
And here's CSS:
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: auto;
opacity: 0.6;
position: relative;
}
There is padding automatically applied to the body.
Just add this to your css
body{
padding:0;
margin:0;
}
Edit: Solution to follow up in comments
You will need to remove the <img> tag and change your background div in your css
#background
{
width: 100%;
height: auto;
background: url("background.jpg");
background-size: cover;
opacity: 0.6;
position: relative;
}
By default, each HTML tag has a browser-predefined appearance/style, in your case, body has margin: 8px on Chrome, for example. You need to reset all of those predefined styling rules in order not to have surprises, read about CSS resets at https://cssreset.com/what-is-a-css-reset/
Moreover, in order to stretch the image to cover all the visible area, you need to make sure body has width: 100vw; (viewport width) and height: 100vh; (viewport height) and everything else has 100% on both or inherits them from their parents.
Working snippet at https://codepen.io/Raven0us/pen/KZQejX
The browser applies its own default styles to websites that you can alter with your own css. Take a look at this cheat sheet
An Easy fix for your issue is to add css:
body{
margin:0;
}
Been trying this all day trying to get iframe that's full length of window to scale down as broswer window gets smaller without loosing it's aspect ratio.
Here's what I've tried already.
<!DOCTYPE html>
<html>
<head>
<style>
html, body{
width: 100%;
height: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
</head>
<body>
<div id="wrapper">
<iframe src="http://www.mundaychevrolet.com" scrolling="no" style="width:100%; height: 100%; transform-scale" frameborder="0"></iframe>
</div>
</body>
</html>
Make iframe full length of browser window
http://jsfiddle.net/BfLZf/4/
http://jsfiddle.net/BfLZf/4/show
html,body {
margin: 0;
padding: 0;
height: 100%;
}
body {
overflow: auto;
}
iframe {
overflow: auto;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
and make it scale down as window gets smaller
For responsive images (scaling ...) http://www.456bereastreet.com/archive/201306/how_to_proportionally_scale_images_that_have_dimension_attributes/
http://bradfrostweb.com/blog/web/this-is-responsive/
Since div #wrapper has no height set, iframe takes its default size. The right css in your case is:
<style>
html, body, #wrapper{
width:100%; height:100%; margin:0; padding:0; overflow:hidden;
}
</style>
<iframe src="http://www.mundaychevrolet.com" style="width:100%; height: 100%; transform-scale" frameborder="0"></iframe>
<!-- remove scrolling="no" -->
I want to have a div in footer from side by side, but with this code it is leaving a white border.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#bottomnav {
background-color: #333;
opacity: 1;
height: 100px;
left: 0;
right: 0;
bottom: 0;
overflow: visible;
}
</style>
</head>
<body>
<footer>
<div id="bottomnav">
Hello
</div>
</footer>
</body>
</html>
From your description, I can't tell quite what problem you have, but I'm guessing it's the margin on the body element. Try this:
body {
margin: 0;
}
You need to reset body margins to zero.
body {
margin: 0;
}
you need to clear the body margins
* {margin:0; padding:0;}
but universal selectors can affect you page load times
Have a look at css resets and what the various fixes can do for your browser
http://www.cssreset.com/
also this may explain a bunch of things for you http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
I have a pretty run-of-the-mill website: header, body and footer. The header and body are green, but the footer is black. The site looks fine when there's a large amount of content, but on pages with only a paragraph or two, the footer doesn't extend to the bottom of the page (especially on larger monitors), and the green background of the site extends beyond the footer - not the effect I'm going for.
Is there a way to set the footer height to extend all the way to the bottom of the page, regardless of content and monitor size? Ideally this would be done without using Javascript.
You are looking for a sticky footer. I have had good experiences with Ryan Fait's solution, but this new sticky footer manages to work without the extra tags.
From the exposition on the sticky footer:
In the head:
<style type="text/css">
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
And for your body:
<div id="wrap">
<div id="main">
<!-- Your content here -->
</div>
</div>
<div id="footer">
</div>
Edit
From your explanation, it seems that I misunderstood you. You are looking for an auto-expanding section, rather than a sticky footer. If this is the case, you can get that effect by using display: table (though it doesn't work in as many browsers as the sticky footers do - it fails in IE 7, for example).
I have created an example here.
The code, for reference:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
min-height: 100%;
padding: 0;
}
.Wrapper {
display: table;
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
}
.Contents {
background-color: #CCC;
display: table-row;
min-height: 100px;
}
.Footer {
background-color: #0C0;
display: table-row;
min-height: 100%;
}
.data {
display: table-cell;
}
.Wrapper .data {
height: 100px;
}
.Footer .data {
height: 100%;
min-height: 40px;
background-color: #0C0;
}
</style>
</head>
<body>
<div class="Wrapper">
<div class="Contents">
<p class="data"> </p>
</div>
<div class="Footer">
<p class="data"> </p>
</div>
</div>
</body>
</html>
You could add a dummy div and style that with CSS to match the height of your navigation pane, with your footer below this div, it'll always style the way you want.
It would be better if you did use some JavaScript, it wouldn't be complicated at all.
If I'm understanding your question correctly, you'll need to clear the footer, by applying clear:both; in css selector for the footer.
would suggest going for the js alternative..seems much easier..please tell us if there's any specific reason to avoid js based styling in your case...the only other alternative i could think of is hardcoding the body content div dimensions and setting the footer position fixed..not ideal