New to coding - can you help me place a footer over the iframe? It needs to cover the dark grey footer that is currently in the iframe, and also needs to be responsive if the page is zoomed in or out. It can be dark gray for now.
Attached is the current coding.
Thanks for your help.
<!doctype html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="utf-8" />
<style>
body {
display: flex;
margin: 0;
height: 100vh;
}
iframe {
min-height: 100%;
min-width: 100%;
}
</style>
</head>
<body>
<iframe scrolling="no" src="https://onedrive.live.com/embed?cid=71689B83CE6D0B52&resid=71689B83CE6D0B52%217352&authkey=AOXRS7b8IrWU4Qs&em=2"></iframe>
</body>
</html>
Here is the code.
<!doctype html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
}
iframe {
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.footer{
position: absolute;
width: 100%;
bottom: 0;
right: 0;
left: 0;
height: 50px;
background: black;
}
</style>
</head>
<body>
<iframe scrolling="no" src="https://onedrive.live.com/embed?cid=71689B83CE6D0B52&resid=71689B83CE6D0B52%217352&authkey=AOXRS7b8IrWU4Qs&em=2"></iframe>
<div class="footer"></div>
</body>
Related
/* body{
overflow-x: hidden;
} */
.divOne{
/* overflow-y: hidden; */
position: relative;
background-color: aqua;
height: 100px;
width: 100%;
}
.divTwo{
background-color: red;
height: 300px;
width: 300px;
position: absolute;
top: -30px;
right: -80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>learning about canvas</title>
</head>
<body>
<div class="container-div">
<div class="divOne">div1</div>
<div class="divTwo">div2</div>
</div>
</body>
</html>
I want to make it so that the horizontal scroll bar wouldn't appear below. I want to make the overflowing 2 div overflow: hidden . but overflow : hidden only works when its applied to body and that causes a lot of problems.
You need to add absolute positioning rules for the container-div class, relative positioning for the body tag, with the overflow-x: hidden rule.
Now your block .divTwo is hidden in the viewing area, I have a width of 300x300.
body {
position: relative;
overflow-x: hidden;
}
.container-div {
position: absolute;
left: 0;
right: 0;
}
.divOne{
/* overflow-y: hidden; */
background-color: aqua;
height: 100px;
width: 100%;
}
.divTwo{
background-color: red;
height: 300px;
width: 300px;
position: absolute;
top: -30px;
right: -80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>learning about canvas</title>
</head>
<body>
<div class="container-div">
<div class="divOne">div1</div>
<div class="divTwo">div2</div>
</div>
</body>
</html>
I am new to HTML.
My question is, how do I show different iframes, based on the sizes of media queries?
Example:
for #media (max-width:400px) load iframe01 and for the rest of the sizes, load iframe02.
Any ideas, please?
My code is as follows:
.container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 75%; /* 4:3 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<iframe class="responsive-iframe" src="iframe_sample"></iframe>
</div>
</body>
</html>
It is possible to achieve this.
Here is an example:
html {
background: blue;
}
.container {
position: relative;
width: 100%;
overflow: hidden;
/* padding-top: 75%; */
/* 4: 3 Aspect Ratio; */
}
.responsive-iframe,
.responsive-iframe2 {
/* position: absolute; */
top: 0;
left: 0;
/* bottom: 0; */
right: 0;
width: 100%;
height: 100%;
border: none;
}
#media only screen and (max-width: 400px) {
html {
background: red;
}
.responsive-iframe {
/* position: absolute; */
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
.responsive-iframe2 {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<iframe class="responsive-iframe" src="https://www.facebook.com/"></iframe>
<iframe class="responsive-iframe2" src="https://twitter.com/home"></iframe>
</div>
</body>
</html>
The iframes are broken links. However, you can give a separate ID or class to each iframe and then use the display: none property on the ID or class that you do not want visible.
The code I presented shows two iframes on desktop format. However, once you scale the page to 400px or less, it shows only one. I also altered the background colour for reference.
Hope this answers your question.
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
bellow are my html and css files where my header div disappearing when added position fixed. i even specified top and left but no luck. please help.
body {
margin: 0px;
padding:0px;
background-color:whiteSmoke;
}
.header {
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
<style>
body {
margin: 0px;
padding: 0px;
background-color: whiteSmoke;
}
.header {
height: 60px;
width: 100%;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
In your original code, there is no content in the div with the class "header". Therefore, its width is 0.
I've added "width: 100%" to the class header so that it can gain width and appear.
You can run the code to see the result. I hope it helps.
As an alternative to declaring a specific width property to the fixed element, a right property with the value of 0 can also be declared, effectively "expanding" the fixed element width from left-to-right of the screen.
body {
margin: 0;
padding: 0;
background-color: whiteSmoke;
}
.header {
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top: 0;
left: 0;
right: 0;
}
<body>
<div class="header"></div>
</body>
Because a fixed element doesn't have a width.
So it has a height of 60px and becaus eyou didnt specify a width, so it appears hidden. Adding content, or something along the lines of width: 100%; will show the div again.
Please add some content or width to header.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
body {
margin: 0px;
padding:0px;
background-color:whiteSmoke;
}
.header {
width:60px;
background-color: red;
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top:0;
left:0;
}
Running Expample
I have the following code but my image won't resize, how come? Does the image need to be bigger?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>blah</title>
<style type="text/css" media="screen, print, projection">
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%
height: 100%;
}
</style>
</head>
<body>
<img id="background" src="greenbackground.png" alt="Background Image" />
</body>
</html>
You also need this:
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin:0;
padding:0;
}
Note, using css3 you can do this:
body{
background:url(...) no-repeat;
background-size: 100%;
}
Edit: Missed a ;
Demo:
http://jsfiddle.net/jJT45/
You're setting it to 100%, but 100% of what? Try giving the body the same 100% height and width properties and see what happens.