I want to show a google map in this html div:
<div id="map">
</div>
html,
body,
#map {
position: absolute;
top: 0;
bottom: 0;
left:0;
height:100%;
width:100%;
}
Everything is okay and it shows a google map fit to screen, and I want it to show on the other div like this:
<div style="z-index:1;" align="center">
some thing this
</div>
But when I run my app, I just see the google map, how can I solve this? problem?thanks.
The z-index property only applies to positioned elements (i.e. elements which have the position property set to something other than static (which is the default, and what the div is set to).
Related
I want to set the <div id="bar">...</div> into the background.
First, here is my page: tekkkz.com
<div id="bar">
<span id="views">50</span>
<a class="icon-small" id="like"></a>
<a class="icon-small" id="dislike"></a>
</div>
This block (on the top right with the like/dislike buttons) should be in the background, so that it wont take any width of my content box.
How to do this?
For better understanding: what i want to reach is similar to set a image anchor to page in libreoffice.
You should use position: absolute on your <div id="bar"> and position: relative on it's parent. Then use right: 0 if you want your element to be at the right corner of the content block.
#bar {
position: absolute;
right: 0;
}
.content {
position: relative;
}
Since already in your stylesheet style.css
#bar{float:right;}
So you could just add in your pre block
<pre style="clear:both">
I tried it. It worked like charm.
Hope it help
I have wordpress site.
I want to use google map background overlay in footer.
like this Screenshot.
Is there any plugin.
I don't think there is a plugin for that, but you can do it with css:
Create a contanier div
Create the map div container
Create the info container
At the end you must have something like this:
<div class="wrapper">
<div class="map"></div><!-- end Map -->
<div class="box-info">... more HTML </div>
</div><!-- end wrapper -->
Then, add some styles:
.wrapper{
position: relative; // Position relative to container
z-index: 1 // add a "level" to this div
}
.box-info{
position: absolute; // Put this div on top of his parent
z-index: 2; // Add one more "Level" to this div, so this will be on top
top:0;
left:0;
width:100%;
height: (Some height)px;
background: ....
}
You need to read this, so you can understand better some things.
I have an image that is also a link using
<img src="img.png" id="cloud"></img>
And I centered it (and resized it) using
#cloud
{
display: block;
margin-left:auto;
margin-right:auto;
height:45%;
}
The problem is, the clickable area for the link extends across the entire web page, rather than just across the image. How would I fix this?
You could always use absolute positioning.
HTML:
<a href="link.html" >
<img id="centerimage" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" />
</a>
CSS:
#centerimage {
position: absolute;
left: 0;
right: 0;
top:0;
margin: auto;
}
JS Fiddle: http://jsfiddle.net/SinisterSystems/3TbVv/3/
If you needed to place the element within the range of your document structure, you could apply a wrapper with a CSS class of relative.
HTML
<div class="wrapper">
<a href="link.html" >
<img id="centerimage" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" />
</a>
</div>
CSS
.wrapper {
position:relative;
margin-top:25px;
}
#centerimage {
position: absolute;
left: 0;
right: 0;
top:0;
margin: auto;
}
JS Fiddle: http://jsfiddle.net/SinisterSystems/3TbVv/4/
Expansion: The reason why it was showing your link across the entire page is because you were using display:block; and there was no wrapper or any sort of containment for it. display:block; is inherently a 100% width element.
Furthermore, display:inline; wouldn't have worked either, as it would fix the problem, but just adjust it to the left edge of the screen. If it doesn't have a 100% width to go off of, it can't set margins.
Easiest solution would be to just wrapper it in, and style the wrapper element while you set some sort of absolute position with your img. That will ensure it will stay within the wrapper, and you can position the wrapper accordingly in your document by normal means, hence the relative style.
Not sure if this will work but try doing
<img src="img.png" id="centerimage" href = "link.html"/>
if this does not work try useing javascript or jquery
<img src="img.png" id="centerimage" onClick = "click" href = "link.html"/>
<script>
function click() {
window.location.href = "link.html";
}
</script>
then add this to the css
cursor: pointer;
I am working on this grid-like user list and I am having trouble achieving my goal.
My goal is when you hover over the user's div, info about him will be displayed. I want the div to increase its size and overlap the other divs without breaking the DOM tree.
I hope you know what I mean .. :)
You could use jQuery's .css() function:
$(document).ready(function()
{
$(".user").hover(function()
{
$(this).css({ "z-index": "9999" });
}
});
Just using the z-index won't help. But combining it with a layout that looks like this:
<div class="box">
<div class="content">
<!-- Your box content -->
</div>
</div>
Style:
.box {
float: left;
position:relative;
overflow:visible;
}
.content {
position:absolute;
}
To overlap it's important, that a row has a higher z-index than it's previous one.
Here is an idea:
You could have each item sit in a position: relative div, then when the item is hovered or whatever event that grows the item, give the item position: relative; left: 0; top: 0; and change the height.
Position absolute will take it out of its line and make it look like it is still there so none of the other divs will move.
I found similar topics but they all used absolute positioning which placed the canvases at the top left of the page. I have them contained within a div but I'm not sure exactly how to get them to layer properly. I tried using absolute and relative positioning in CSS but I wasn't having any luck.
Do this:
<style>
#container { position: relative; }
.canvas { position: absolute; top: 0; left: 0; }
</style>
<div id="container">
<canvas class="canvas" id="canvas1"></canvas>
<canvas class="canvas" id="canvas2"></canvas>
</div>
Make sure to add position: relative to the containing div in order to position the canvas elements absolutely within it.