I have this code:
<iframe scrolling="no" src="http://www.portalminero.com/display/bols/Bolsa+de+Metales"
style="border: 0 none; margin-left: 100px; height: 860px; width: 970px;"></iframe>
When I run it I load height I want, but I don't want to show the header of the page... just start in "Bolsa de Metales" title.. how can I do this?
There is no way to do that with CSS or JavaScript if the loaded page is not on your domain (cross-domain).
A simple solution could be just to add a div with a white background and add it as layer on top (positioning with css):
HTML:
<div id="myDiv"></div>
<iframe id="myIFrame" scrolling="no" src="http://www.portalminero.com/display/bols/Bolsa+de+Metales"></iframe>
CSS:
#myIFrame {
border: 0;
margin-left: 100px;
height: 860px;
width: 970px;
}
#myDiv {
background-color:#fff;
margin-left: 100px;
width: 970px;
height: 40px;
position: absolute;
}
Related
I am trying to embed an iFrame in a content management system which will later act as a preview function when making changes to a page. Trouble is, the iFrame won't change size, and I'm bewildered.
Video link to example: https://www.icloud.com/sharedalbum/#B0b5M7GFPGbX4Tu
How can I make the height responsive to the CSS values I'm entering? What's happening?
try this
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videowrapper">
<iframe width="853" height="480" src="-YOUR-URL-HERE-" frameborder="0" allowfullscreen></iframe>
</div>
I want to wrap a laptop image around a youtube video. I allready got a solution for that. Now i want to make everything responsive for smaller devices. Any solutions for that ?
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
#tv_container {
background: url('img/video.jpg') no-repeat top left transparent;
width: 1440px; /* Adjust TV image width */
height: 810px; /* Adjust TV image height */
position: relative;
}
#tv_container iframe {
position: absolute;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: relative;
top: 78px;
left: 252px;
width: 65%;
height: 67%;
}
<div class="container">
<div id="tv_container">
<div class="videoWrapper">
<iframe width="760" height="315" src="https://www.youtube.com/embed/qidS1nnK0Ps" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
You should change the #tv_container styles to use a variable width:
#tv_container {
background: url('img/video.jpg') no-repeat top left transparent;
width: 80%;
height: auto;
position: relative;
}
I also used an auto height for the container so it changes according to its width.
I am trying to get my footer to be at bottom of page, header at top of page and section in the middle of page. But all I get is the red footer displayed on top of page. The background wrapper should be gray but that doesn't work either. Please help. Thank you.
Here is the css:
body {
margin: 0 auto;
}
#wrapper {
position: relative;
background-color: gray;
height: 100%;
width: 100%;
}
header {
position: absolute;
top:0;
width: 100%;
height: 20px;
background-color: red;
}
section {
position: absolute;
width: 100%;
height: 100px;
margin-top: auto;
margin-bottom: auto;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: blue;
}
below is the body of the html:
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
Just add this to html/body:
html, body {
height: 100%;
}
You should have to use position: absolute;. It tends to mess up all of your spacing when used in parent elements like that. The section section will be placed right over the header section because it hasn't been positioned at all.
Try just giving the section a min height and removing the position attributes.
Hope this helps.
You were close. Replace the CSS definition for <body>:
html, body{
margin: 0 auto;
width: 100%;
height: 100%;
}
make this in following class in your code :
html {
height: 100%;
}
body{
margin: 0 auto;
height: 100%;
}
section{
position: absolute;
width: 100%;
height: 100px;
top:20px;
}
DEMO
Remove the position absolute from the header, footer and section. I think it might be it.
I am trying to place a div element over a canvas (it is for a game) on the center of my page. It is about a startscreen that I want to show over the canvas, before starting the game(this startscreen has options like "Play game", "Settings" etc). The problem is that I cannnot get this done, I have searched a lot on Google, I have seen a lot of examples, but none of them seems to be working for me. Here is my code:
<div id="gamecontainer">
<canvas id="myCanvas" width="800" height="600">
Sorry, <strong>CANVAS</strong> is not supported by your browser. Get a more recent one to play my game!
</canvas>
<div id="gamestartscreen" class="gamelayer">
<img src="images/icons/play.png" alt="Play Game" onclick="alert('ceve');"><br>
<img src="images/icons/settings.png" alt="Settings">
</div>
</div>
here is the css:
#gamecontainer {
width: 800px;
height: 600px;
background-color: beige;
border: 1px solid black;
position: relative;
margin: 0 auto;
}
.gamelayer {
width: 800px;
height: 600px;
position: absolute;
display: none;
z-index: 0;
}
/* Screen for the main menu (Like Play, Settings, etc.) */
#gamestartscreen {
position: relative;
margin: 0 auto;
}
#gamestartscreen img {
margin: 10px;
cursor: pointer;
}
Could someone please tell me where I am doing it wrong?
The problem was that the canvas layer was in its native static positioning, while the gamestart div was in relative positioning with no positive z-index value. Essentially, you jut have to set the canvas element to position: absolute or even position: relative, while having a >1 z-index for the startstreen div. This JSFiddle should make it all clear.
Cheers!
#gamecontainer {
width: 800px;
height: 600px;
background-color: beige;
border: 1px solid black;
position: relative;
margin: 0 auto;
}
canvas {
position: absolute;
z-index: 1;
}
#gamestartscreen {
position: absolute;
margin: 0 auto;
z-index: 2;
background: red;
}
<div id="gamecontainer">
<canvas id="myCanvas" width="800" height="600">
Sorry, <strong>CANVAS</strong> is not supported by your browser. Get a more recent one to play my game!
</canvas>
<div id="gamestartscreen" class="gamelayer">
Hello world!
</div>
</div>
HTML
<body onload="MM_preloadImages('images/enterroll.gif')">
<div id="wrapper">
<div id="enterlogo"><img src="images/entrylogo.gif" width="600" height="600" alt="enterlogo" /></div>
<div id="enter"><img src="images/enter.gif" alt="enter" name="enter" width="300" height="300" border="0" id="enter2" /></div>
</div>
</body>
CSS
body {
background-color: #CCC;
}
#wrapper {
height: 750px;
width: 750px;
}
#enterlogo {
height: 600px;
width: 600px;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
}
#enter {
height: 300px;
width: 300px;
}
So what I actually need this all to do is have the enter div sit in the bottom right hand corner of the wrapper div.
For this to happen I need it to overlay the enterlogo div! I've looked up many posts on z-index and positioning methods with float right, but all of them seem to fall short.
Any help at all would be appreciated, I called a friend and he said that making the image in the enterlogo div a background and putting the other image in that div could help.. I can't see how it'll work though!
P.S the rollover image is going to be a link, that is going to eb the only div piece on the page.
Use position: absolute, like this:
#wrapper {
position: relative;
}
#enter {
position: absolute;
right: 0;
bottom: 0;
}
Here's a demo: http://jsfiddle.net/thirtydot/Nd2jQ/
Here's some more information about how this works: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I believe you are overusing javascript.. You should just use CSS for all your requirements (and in the process simplify your html)..
<body>
<div id="wrapper">
<div id="enterlogo"></div>
</div>
</body>
and
body {
background-color: #CCC;
}
#wrapper {
height: 750px;
width: 750px;
position:relative;
}
#enterlogo {
height: 600px;
width: 600px;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
background: url('images/entrylogo.gif') top left no-repeat;
}
#enter {
display:block;
height: 300px;
width: 300px;
background: url('images/enter.gif') top left no-repeat;
position:absolute;
bottom:0;
right:0;
}
#enter:hover {
background-image: url('images/enterroll.gif');
}
demo at http://jsfiddle.net/gaby/WL96s/