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.
Related
I am newbie about css and html design. I use flex in my bootstrap design.
I set the flex to sort the components from left to right direction.
As on the this site.
I want to shrink the slider to the right and place another component on the left side. I tryed to removing this line over #GrandCarousel.
element.style {
/* left: -396.5px; */
}
how can I make this feature
Create two div inside #GrandCarousel div. Let's call them left-section and right-section. Give them width: 50%; Put all the current contents of #GrandCarousel div to the right-section. After this you might face issues in image alignment inside slider. You will have to adjust them according to how you need them to appear. Refer below HTML, CSS code to understand better.
HTML
<div id="GrandCarousel" class="banner-container">
<div class="left-section">
// Left section contents
</div>
<div class="right=section">
// Move GrandCarousel contents to here
</div>
</div>
CSS
.banner-container {
display: flex;
}
.left-section,
.right-section {
width: 50vw;
}
.right-section {
position: relative; // To contain all carousel contents inside right-section
}
I have the following HTML structure:
<section class="mysection">
<div class="parallax">
<div>
<svg></svg>
</div>
</div>
</section>
<section class="back">
<div class="triangle">
<img src="img/red-triangle-bkgrd.png">
</div>
</section>
This is the CSS in LESS:
.parallax{
width: 90%;
margin-left: auto;
margin-right: auto;
}
section.back {
.triangle {
position: relative;
img {
position: absolute;
right:0;
top: 0;
}
}
}
Before using parallax on the parallax, back just sits immediately below the bottom border of mysection.
When I scale parallax by 1.11111111, the parallax uses 100% width of the viewport. However, back does not sits right beneath the parallax anymore. Instead, it overlaps with the parallax area. Here is a picture of a real-life situation:
How can I make back in the overlap area invisible? Put it another way, how can I make svg or its containers completely opaque without showing the overlaped image beneath it?
I tried 'opacity:1` on svg and its containers, but it is not working.
To be more detailed, I use a tool called ScrollMagic for this work if this is relevant.
You can set the stacking order using z-index. Try setting the following:
.mysection {
position: relative;
z-index: 1;
}
This should ensure that whatever's in your .mysection (such as the svg/map) passes over whatever intersects (assuming you don't apply a greater z-index to the other elements).
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).
There is a navigation-bar with that css-definitions:
.nav {
position: absolute;
top: 0;
height: 40px;
...
}
<div class="nav">...</div>
That means that this navigation is always on to of the page. But now I have to insert a second bar at the top of that naviation-bar.
.top-nav {
position: absolute;
top: 0;
height: 40px;
...
}
<div class="top-nav">...</div>
<div class="nav">...</div>
That "top-nav" will be displayed at several pages (i didn't know now). So I am not able to change the css definitions or the html of the class "nav".
I am looking only for a (css) possibility to move any html-tag with the css-attribut "top: 0" down for a fixed value.
JavaScript is not a solution: There several pages i will include that "top-nav".
Edit:
overlapping:
not overlapping:
I am looking for that not overlapping solution.
Looking to your html if you want that a div reference to his container you have to put it inside the container. try this:
<div class="nav">
<div class="top-nav">...</div>
</div>
So the top-nav refers to the nav container.
EDIT 1:
No chance if you can't change the html. The thing you can do is add a javascript which add text inside top-nav. In this way you can generate code to put another div inside it.
for reference look at jquery text
You could try with:
position: static;
or without position definition (static is the defaul). In static position each box appear in the order they are in the html.
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.