Menu
I am trying to embed the google maps api onto a page
and it is getting “hidden” by the css. For the life of me I can’t fix
it. I asked on a CSS forum and they suggested I make a function for
the element. So the code looks like this but it still isn’t working.
Any suggestions?
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title>CSS frameset generator</title>
<style type=”text/css”>
/*bgein of frames setting*/
html{
margin:0;
padding:0;
height:100%;
overflow:hidden;
_padding:110px 225px 5px 5px;
}
body{
margin:0;
padding:0;
height:100%;
overflow:hidden;
zoom:1;
}
.frame{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
zoom:1;
_right:0;
_bottom:0;
_width:100%;
_height:100%;
_position:relative;
}
.frame-bd{
zoom:1;
}
#main-header{
overflow:hidden;
position:absolute;
width:100%;
height:100px;
top:0;
left:0;
_zoom:1;
_overflow:visible;
_padding:0 230px 0 0;
}
#main-header .frame{
overflow:auto;
_padding:0 0 0 230px;
_zoom:1;
}
#main-header .frame .frame-bd{
zoom:1;
_margin:0 0 0 -230px;
}
#main-footer{
overflow:hidden;
position:absolute;
width:100%;
height:0px;
bottom:0;
left:0;
z-index:10;
_zoom:1;
_overflow:visible;
_padding:0 230px 0 0;
}
#main-footer .frame{
overflow:auto;
_padding:0 0 0 230px;
_zoom:1;
}
#main-footer .frame .frame-bd{
zoom:1;
_margin:0 0 0 -230px;
}
#pri-main{
overflow:hidden;
position:absolute;
top:105px;
left:225px;
right:5px;
bottom:5px;
z-index:2;
_top:105px;
_bottom:auto;
_height:100%;
}
#pri-main .frame{
overflow:auto;
}
#pri-sub{
overflow:hidden;
position:absolute;
height:0px;
top:105px;
left:225px;
right:5px;
z-index:1;
_botom:0;
_width:100%;
}
#pri-sub .frame{
overflow:auto;
}
#sec-main{
overflow:hidden;
position:absolute;
width:220px;
top:105px;
bottom:5px;
left:0;
z-index:4;
_height:100%;
_bottom:auto;
_padding:0 0 5px 0;
}
#sec-main .frame{
overflow:auto;
_padding:0 0 5px 0;
}
#trd-main{
overflow:hidden;
position:absolute;
width:0px;
top:105px;
right:0;
bottom:5px;
z-index:4;
_height:100%;
_bottom:auto;
_padding:0 0 5px 0;
}
#trd-main .frame{
overflow:auto;
_padding:0 0 5px 0;
}
/*My Customized Theme*/
body{
font-size:0.78em;
font:normal 0.78em/150% “verdana”,”monospace”;
background:buttonface url(metal-solid.gif);
}
.frame{
background:#fff url(frame-shadow.gif) 0 0 no-repeat;
_background-attachment:fixed;
}
/*Free HedgerWow Style*/
li{
_vertical-align:top;
}
.mod{
}
.mod .bd{
padding:12px;
}
a.valid{
font:0/0 Arial;
text-indent:-5000px;
display:block;
width:88px;
height:33px;
margin:4px 0;
background:#ccc url(http://www.w3.org/Icons/valid-xhtml10) no-repeat;
}
a.generate{
padding:12px;
display:-moz-inline-box;
display:inline-block;
color:#222;
background:buttonface;
border:solid 1px buttonshadow;
border-top-color:buttonhighlight;
border-left-color:buttonhighlight;
margin:4px 12px 4px 0;
vertical-align:top;
}
a.generate:hover{
border:solid 1px buttonshadow;
border-right-color:buttonhighlight;
border-bottom-color:buttonhighlight;
}
h1,h2,h3,h4{
margin:0;
color:#fff;
font-size:small;
padding:5px;
font-weight:bold;
letter-spacing:1px;
background:#444 url(metal-solid-dark.gif);
opacity:0.7;
zoom:1;
filter:alpha(opacity=70);
}
p{
margin:3px 0;
color:#666;
}
</style>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true”></script>
<script type=”text/javascript”>
window.onload = displayGoogle;
function displayGoogle(){
var google_wrap = document.getElementById(“map_canvas”);
google_wrap.style.overflow=”default”;
/* or use any other values except HIDDEN */
}
function initialize() {
var latlng = new google.maps.LatLng(39.2398190, -86.5133859);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
}
</script>
</head>
<body onload=”initialize()”>
<div id=”doc”>
<!–main-header–>
<div id=”main-header”>
<div class=”frame”>
<div class=”frame-bd”>
<!–My HTML–>
<div class=”mod”>
<div class=”hd”>
<h2>Header</h2>
</div>
<div class=”bd”>
<p>in sapien eget erat sodales viverra. Proin pulvinar interdum nibh. Proin ultrices gravida dui. Ut dapibus, dui a gravida dictum, nisi mi fermentum risus, sed auctor felis elit eu quam. Curabitur laoreet. Nullam tristique justo non metus. Sed scelerisque. In hac habitasse platea dictumst. Praesent feugiat mauris a elit gravida posuere. In consequat magna egestas lacus. Nam quis mauris. Integer tempor augue et odio. Suspendisse sodales, libero quis fermentum pretium, nibh augue rhoncus lectus, eget venenatis nulla lectus in dui. Sed egestas rutrum tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sem purus, lobortis vitae, hendrerit non, porttitor ac, velit. Pellentesque fringilla. Vivamus bibendum interdum turpis. Duis est urna, scelerisque in, cursus in, blandit vel, augue. Etiam a massa eget quam interdum accumsan. Curabitur tincidunt sagittis justo. Phasellus mi est, nonummy ut, ultrices eu, fringilla sit amet, purus. Fusce sapien lorem, congue id, sagittis ut, cursus eu, ipsum. In a erat porttitor mi cursus dapibus. Sed lobortis elit at tortor. Proin massa augue, hendrerit quis, gravida sit amet, tempor id, mauris. Etiam et velit at pede euismod elementum. Praesent pretium, lectus eu luctus volutpat, justo libero ultrices libero, nec eleifend eros mi eget justo. Nullam vitae massa eget purus facilisis viverra</p>
</div>
</div>
<!–//My HTML–>
</div>
</div>
</div>
<!–//main-header–>
<!–pri–>
<div id=”pri”>
<!–pri-main–>
<div id=”pri-main”>
<div class=”frame”>
<div class=”frame-bd”>
<!–My HTML–>
<div id=”intro” class=”mod”>
<div class=”hd”>
<h1>100% CSS Frameset Layout</h1>
</div>
<div class=”bd”>
<div id=”map_canvas” style=”width:50%; height:50%”></div>
</div>
</div>
<!–//My HTML–>
</div>
</div>
</div>
<!–//pri-main–>
</div>
<!–//pri–>
<!–sec–>
<div id=”sec”>
<!–sec-main–>
<div id=”sec-main”>
<div class=”frame”>
<div class=”frame-bd”>
<!–My HTML–>
<div class=”mod”>
<div class=”hd”>
<h2>Header</h2>
</div>
<div class=”bd”>
<p>in sapien eget erat sodales viverra. Proin pulvinar interdum nibh. Proin ultrices gravida dui. Ut dapibus, dui a gravida dictum, nisi mi fermentum risus, sed auctor felis elit eu quam. Curabitur laoreet. Nullam tristique justo non metus. Sed scelerisque. In hac habitasse platea dictumst. Praesent feugiat mauris a elit gravida posuere. In consequat magna egestas lacus. Nam quis mauris. Integer tempor augue et odio. Suspendisse sodales, libero quis fermentum pretium, nibh augue rhoncus lectus, eget venenatis nulla lectus in dui. Sed egestas rutrum tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sem purus, lobortis vitae, hendrerit non, porttitor ac, velit. Pellentesque fringilla. Vivamus bibendum interdum turpis. Duis est urna, scelerisque in, cursus in, blandit vel, augue. Etiam a massa eget quam interdum accumsan. Curabitur tincidunt sagittis justo. Phasellus mi est, nonummy ut, ultrices eu, fringilla sit amet, purus. Fusce sapien lorem, congue id, sagittis ut, cursus eu, ipsum. In a erat porttitor mi cursus dapibus. Sed lobortis elit at tortor. Proin massa augue, hendrerit quis, gravida sit amet, tempor id, mauris. Etiam et velit at pede euismod elementum. Praesent pretium, lectus eu luctus volutpat, justo libero ultrices libero, nec eleifend eros mi eget justo. Nullam vitae massa eget purus facilisis viverra</p>
</div>
</div>
<!–//My HTML–>
</div>
</div>
<!–//sec-main–>
</div>
<!–//sec–>
</div>
</div>
</body>
</html>