I have an iframe that has a dynamic size and needs to stay in the bottom right of the screen. There are multiple elements in play such as window size and and a min-width, but ALL of my problems would be solved if I could reference my iframe from the bottom right rather than the bottom left.
So, is there a way to treat the iframe in a way that I could say something like:
iframe {
right: 0;
bottom: 0;
}
in css and have it stuck in the bottom right corner, even when the size of the frame changes?
You need to set
iframe {
position:fixed;
bottom:0;
right:0;
}
It sounds like you need to set the position of your iframe to fixed:
iframe{
bottom:0;
position:fixed;
right:0;
}
Yes, you can apply position:fixed to the iframe and have stuck to the bottom right hand corner like so:
iframe {
position: fixed;
right: 0;
bottom: 0;
}
https://jsfiddle.net/baav59vh/
Related
I've been searching for hours on the net, here and elsewhere, for a simple code that allows me to put an img(in this case im using SVG) to stretch and skew accordingly to the browser window size... however everyone has been talking about codes that maintain the aspect ratio... I do not want to maintain the ratio, i just want to force stretch the img/svg onto the 4 edges of the browser... anyone has a simple code for that?
I have been using
width:100%;
position: fixed;
left: 0px;
top: 0px;
z-index: 7;
background-size:100% 100%;
but to no avail..
In HTML, there is actually a lot more flexibility with background images then actual images.
The approach I use is to create a div element and set it's background-image to the image you want to display.
Something link this:
#imageDiv
{
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
background-image:url('https://www.gravatar.com/avatar/dd3f93d8f93c5908d58711ff9092ba02?s=328&d=identicon&r=PG');
background-repeat:no-repeat;
background-size:100% 100%;
z-index:1;
}
See this jsfiddle: http://jsfiddle.net/2t17onko/2/
I can't seem to get the Leaflet full screen plugin to work appropriately in Google Chrome when I set the CSS position property for the map div.
Here's a JS Bin to demonstrate my problem.
See the code:
#map { position:absolute; top:100px; bottom:50px; width:100%; }
On Firefox and IE, the map correctly goes to full screen (i.e. expands beyond the dimensions of the map div), but on Chrome, the full screen gets constrained by the top and bottom properties of the map div.
Any ideas on how to overcome this problem?
Thanks!
Eli
Edited 8/14/14: Thanks #FranceImage for the great answer, which worked like a charm. I'm still learning CSS and thus I'm sure there are always better ways to do things than I have done. For example, I'm not sure how to use the float property to achieve the same effect that I have with position: absolute on my page here.
How do I change the following code to use the float property instead of position: absolute to achieve the desired effect of having my map NOT overlap the header and sidebar? Thank you!
#map2 {
height: 100%;
width: 100%;
}
#mapcontain {
position: absolute;
top: 125px;
bottom: 50px;
left: 16%;
right: 0;
width: 100%;
}
For the plugin to work, you can't change the following
#map { position:absolute; top:0; bottom:0; width:100%; }
You will have to wrap the in a container (another div) where you will apply your positioning css
<div id="content">
<div id="map"></div>
</div>
Note: I would not use absolute positioning for a page layout.
Absolute position benefit is that the element is taken out of the normal flow and can cover other elements. It is usually used for dialog boxes and popups.
Go for float position.
I'm working on a concept of using an image that isn't a perfect square and using it at the top left and bottom right of the image, but I want to position it so it's 25px off the image slider.
What is the proper way to position this to look like the mock-up?
Positioning using position:relative; and top/left: -XXpx; I think this is best way but I could be wrong
Positioning using margin-left: -XXpx; etc Don't think this is right at all
Position using vertical-align I was unsuccessful at getting this to work
Here is a fiddle of it - Stripped Down
--
Yes, your first approach is the best: http://jsfiddle.net/zFa99/8/
You want to put position: relative on the container which holds the main image and the two corner images, and then position the corner-images absolutely.
#slider { position: relative; }
.tl-corner, .br-corner { position: absolute; }
.tl-corner { bottom: 0; right: 0; } /* this line is not ncessary as top:0 and left:0 are default */
.br-corner { bottom: 0; right: 0; }
There is no need to float the corner images.
OK there is an image in a centered div, which is placed at the center of a page. Its width is 400px.
What I'm trying to achieve is:
to place another div - inside of that div with alignment right via CSS.
Due to various screen resolution, I wish to avoid commands "top:, right:".
How to achieve that?
<div class="non"><div class="info">Go top right</div><img src="images/top.jpg"></div>
CSS..
.non { width:400px; background-color:#d20000; }
.info { position:absolute;float:right; background-color:#efefef; }
Example here
Just do this, it should work:
.non { width:400px; background-color:#d20000; position: relative; }
.info { position:absolute; top: 0px; right: 0px; background-color:#efefef; }
I know you want to avoid using top and right, but if you do this, the .info class is positioned perfect top right corner of the .non class div, not the whole page :)
I'm afraid I don't really know how to do this save for float: position or right: 0. I managed to achieve what you want using two positions.. relative of the containing div, and absolute of the inner div:
.non {
width:400px;
background-color:#d20000;
position: relative;
}
.info {
position:absolute;
background-color:#efefef;
right: 0;
}
Other than that, as #HashemQolami has said, just remove the position: absolute from your code, and it works fine.
i need this kind of effect in my project. there is a left corner floating red color strip. but i want to implement it for image using css. Please refer below image
http://www.w3.org/TR/xhtml2/mod-tables.html#sec_26.6.1.
you can use position:fixed; for a div.
Example code
css
#redBar {width:40px; height:200px; position:fixed; background:red;}
html
<div id="redBar"></div>
Demo http://jsbin.com/aqofa5
You can modify the background property to add your custom background image like background:url("the-path-for-the-image").
It is called fixed position. Here is css that accomplishes this:
.element { position:fixed; top:2%; right:2%;}
More info.
You can use a positioned div:
#myImgDiv
{
position: fixed;
top: 0;
left: 0;
background-image: url(path/to-img.png);
}
If it's an image related to content, it's best to use an <img> tag with an alt attribute within this div.
Let's say this is you DIV
<div id="alwaysThere"><img src="..."></div>
This should be CSS style:
#alwaysThere
{
position: fixed; /* or absolute if you want it to be fixed page top-left */
top: 0;
left: 0;
}
Use fixed position when you want your image to stay there regardless of page scrolling and absolute when you want it to stay top left on your page which means it will scroll when you'll scroll the page down.
The example you provided with a link uses fixed hence it stays there regardless of scrolling.
Pretty easy to be done, do the following:
div#divID
{
position:fixed;
top:0px;
left:0px;
}
This will give you the effect that this div will never leave the visible area of the browser.
Other position values are:
Static -- default
Absolute -- absolute in terms of the page, not the browser window
Relative -- relative to what it would be if the position was static
This is already an image. It doesn't use a floating div.
This CSS is used for the body:
background-image: url(http://www.w3.org/StyleSheets/TR/logo-ED);
background: white;
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;