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.
Related
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.
In my Application I was making div of map as
<div id="map" style="height: 610px; width:100%"></div>
but to make my map responsive I want to make height also 100%, if I make height: 100% then it is not working.
How can I make height also variable like width so that map can be seen properly on any device.
Demo : http://jsfiddle.net/CcYp6/
If you change height & width of map then you will not get map.
You need to set the parent elements to height: 100%; first
html, body {
height: 100%;
}
Demo
Demo (This won't work as no parent height is defined)
Explanation: Why do you need to do that? So when you specify an element's height in % then the 1st question that arises is: 100% of what?
By default, a div has height of 0px, so 100% for a div simply won't work, but setting the parent elements height to 100%; will work.
You have to set the div size with JavaScript.
$("#map").height($(window).height()).width($(window).width());
map.invalidateSize();
You can find a complete example here.
Use height="100vh" works in newer browser. but its ok.
Put a position: relative wrapper parent around it, then position your map absolutely to fill that parent:
.map-wrapper {
position: relative;
}
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="map-wrapper">
<div id="map"></div>
</div>
If #map already has a parent that you can position relatively, just use that; you won't need the .map-wrapper element.
Leaflet Quick Start Guide could be clearer on this point as it's a common use case. The mobile tutorial hints at it.
I am weak in css and can you please help with this problem. You can see problem by clicking on Login/Register link in the below url.
Test box url
This is done in drupal. I am not able get the css to make the div with id "toboggan-login" to appear under the "Login/Register" link
Forgot to mention. I put the below css code. It works in small resolution systems. But its does not work in my 22'' monitor.
div#toboggan-login {
position: absolute;
top: 23px;
left: 74em;
}
This will fix your issue:
CSS:
div#toboggan-login {
position:absolute;
left: 50%;
margin-left: 310px;
width: 160px;
}
Than if you want to distance it a bit from the Login/Register top, just add:
top:10px; or how much px you want!
To explain the above lines:
The left:50%; pushes your element in the middle of the screen, so even at window resize your element will stay there, centered.
But to set it appropriately to some center-left position than we add position-left that will adjust the element position to a desired amount of px left from the center.
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;
I would like to have an IFRAME dynamically sized using the following CSS:
#myiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
However, no browser seems to support this.
In good browsers I could wrap the IFRAME in a DIV with the quoted CSS style and set the height & width of the IFRAME to 100%. But this does not work in IE7. Short of using CSS expressions, has anyone managed to solve this?
Update
MatTheCat answered with a scenario that works if the IFRAME is located directly under the body and the body/html tags have height: 100% set. In my original question I did not state where the IFRAME was and what styling applied to it's container. Hopefully the following addresses this:
<html>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
and let's assume the following container CSS:
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
if you now place height: 100% on the IFRAME it will not size correctly.
Use a div for the padding on all sides. Place the iframe in it using 100% of its parent div.
http://jsfiddle.net/sg3s/j8sbX/
Now there are a few things you need to remember. An iframe is originally an inline-frame, so while modern browsers don't care, set display:block on it. By default it also has a border. Any stying we want to be done needs to be done on the iframe container instead or we'll break the 100% container boundry.
And this is how we would put an element above it:
http://jsfiddle.net/sg3s/j8sbX/25/ (edit: my bad, you actually need to set border=0 on the iframe for IE7)
Should work fine in IE7+ (IE6 doesn't like absolute positioning + using top/right/bottom/left to give it layout)
Edit Some extra explanation
We need to style the iframe container mainly because an iframe on itself doesn't let itself be sized with top/left/bottom/right. But what will work is setting its width and height to 100%. So starting from there we simply wrap the iframe in an element which we can reliably style to make less than the window 100%, the size which elements default to when none of their parents have a static height/width.
Thinking about it we can actually drop the absolute and block. http://jsfiddle.net/sg3s/j8sbX/26/ Might want to doublecheck IE7 on that though.
After we make the iframe 100% high and wide we cannot put any margin, padding, or border on it because that will be added to the already 100% height & width. Thus making it larger than its container, for divs that will result in an overflow:visible, simply showing everything going over the edges. But that in turn would mess up the margins, paddings and offsets we gave our elements.... In fact to make it be only the 100% height and width you have to make sure you removed the iframes default border.
Try it out by adding a larger border (like 3px) in my example to the iframe, you should easily be able to see how it's affecting the layout.
Why don't you use height & width? You'd still get an absolute position by setting top/bottom & left/right, as in the example below.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0px;
height:100%;
width:100%;
}
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
#myiframe {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
This works for me (Tested on IE9).
html,body {
margin:0;
padding:0;
height:100%;
min-height:100%;
}
#myiframe {
width:100%;
height:100%;
border:0;
}
work fine for me even with IE7.
I would say take a look at this stack overflow question. It might help:
Make Iframe to fit 100% of container's remaining height
You can try to use this:
document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';