Question

Okay so I have tried to implement Google Maps as a background to my website. But when I try to put text over it using this code:

.content{
z-index:0;
background-color:fffff;
position: absolute; top: 0; left: 0;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}

And that is giving me an error with the map it is displaying it on top of the map, which is what I want but it is not working with with margins for some reason. All my code is here: http://pastebin.com/uz6wwtYZ

Can anyone help me because I want the content in the center of the webpage and the map to act as the background.

Thanks.

Answer 1

Try adjusting the top and left instead of margin when an item is set to an absolute position:

.content{
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 100px;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}

Hope that helps? Also might want to set a higher z-index value as I have done above.

If you want it horizontally centered with auto margin values but also absolutely positioned, I don’t think you can do that.

You can try this instead by giving your content an absolute width and offsetting the left property:

    .content{
width: 500px;
    z-index: 100;
    background-color:fffff;
    position: absolute; top: 100px; left: 50%;
    height: auto;
    margin: auto;
margin-left: -250px; /* half the value of the width */
    }

Here’s a link to a JS Fiddle that uses your code: http://jsfiddle.net/4FLKt/1/ Seems to be working fine.

Mikey.