CODEWITHSUNDEEP
cssgoogle-mapshtml
JHM_67
JHM_67

Reputation: 115

div on top of div with Google Maps API

How do I float a div "menu" on top of my Google Maps API "map" div. And maybe possibly add a transparency of 50% on the menu div. Can this be done?

#map {width: 835px; height 540px; float: left;}
#menu {width: 145px; float: right; padding-top: 10px;}

<div id="map"></div>
<div id="menu"></div>

Upvotes: 11

Views: 29871

Answers (2)

Sarfraz
Sarfraz

Reputation: 382686

Can't you changed the positions of the DIVs like this:

<div id="menu"></div>
<div id="map"></div>

If not you could go something like this:

<div id="map"></div>
<div id="menu"></div>

#menu
{
    position: absolute;
    top: 10px;  /* adjust value accordingly */
    left: 10px;  /* adjust value accordingly */
}

Update 2

Cross-browser transparency style:

.dropSheet
{
    background-color: #000000;
    background-image: none;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Just apply the class dropSheet to the element you want to make transparent.

Upvotes: 19

Sune Rasmussen
Sune Rasmussen

Reputation: 954

Well, the basic structure of a float should contain a wrapping element that has its position property set to something else than the default, and an element that clears the float in the end.
Like this:

#wrapper {
  position:relative;
}
#menu {
  float:right;
}

<div id="wrapper">
  <div id="map"></div>
  <div id="menu"></div>
  <br clear="both" />
</div>

The code provided has not specifically been tested, but the float and the fact that the menu is the higher layer than the map, should make the menu on top of the map in the right side. For the transparency issue, see this fantastic resource.

Hope that helped you out.

Upvotes: 2

Related Questions